its-coco-chen-blog

[its-coco-chen-blog]

Summary - 2018 Summer

Until this week, I spent almost one year in this project. It is a good experience to learn the process from design to coding. I learn a lot. 

Right now, I finished most interfaces pages in coding and light control function. I know there still have some problems because the smart home is a big theme. I should learn more about users and smart devices. However, as a thesis project, I think I did well. This year, I tried my best to finish this app. I know there has a distance to be a real app but this project experience improves my design thinking and coding skills. At first, coding for me is more like a tool to come true my design. Right now, I think coding is a math design. Thus, I will continue to learn the coding. Althgouh I know learn by myself is tough. 

For the next step plan, actually, before I did the interview with Hamilton I have no idea about how to continue this app. Because I defined this project was a thesis project. However, after the interview, I begin to think this project also is my work, I should do more. Meanwhile, it already had a good foundation in design and coding. As Hamilton said, it has a little shame if I give up right now. Thus, I will keep this blog to record my process of this project in the future. 

Now, I finished the degree in AAU. These years are important to me. I got a lot of help from friends and teachers. 

So thanks to my friends, thanks to teachers, and thanks to Hamilton.  

[its-coco-chen-blog]

Week 11 - Summer 2018

These days I did a thesis book and presentation slideshow. Also, I did user testing on the mobile phone. Got some feedback, so last week I will improve these details. 

[its-coco-chen-blog]

Week 10 - Summer 2018

This week I got some visual feedback. 

It includes some pages should be more attention to hierarchy. I can use font size, bold to show it. 

Second, because of the app focus on sleeping, right now I use a white background as my content card color. However, white in the dark environment maybe will to light. 

Third, the color tag could have a border because some colors in my background are not very clear. 

Moreover, I should keep all border-radius in one size. 

Next, I will let users do user testing on their phone to test responsive and the icon size. 

[its-coco-chen-blog]

Week 9 - Summer 2018

This weekend I did user testing and based on user testing to improve my visual design. 

The problem still focuses on the choose a place page. The user will miss the next button on this page. Thus, I changed these elements’ position.

Also, I got a new feedback is about tag color.  On the sleep routines page, I use tag color to show the devices belong to which place. Meanwhile, if users not in one place, the devices in that place will show “off-line”. After I did user testing, one user told me she thought these color points mean these devices are off-line because these color points are red. Thus, based on feedback I did some color changed. 

Next, I will continue to do user testing and improve more details. 

[its-coco-chen-blog]

Week 8 - Summer 2018

After I finished three task flows I began to use this coding prototype to do user testing.  I post my user testing journal at the end of this journal.

Based on the feedback of user testing, I improved some things. First, the content of sign in and sign up. I modified the position and make them look better like a system. Second, because I found the user will be confused about the Next button in the choose a place page. So, I changed the design of this part.  Moreover, I changed “Home” to “My Place”. 

Also, I double checked three task flow. Then I find the hue light setting of the first task flow has some problems. I think maybe right now hue light setting is from the My Place’s databased, but when I create a new place, the place name is not matched with the database so the coding break. 

Tomorrow, I will bring my Philips Hue Bridge to test the first task flow. Hope can fix it.  

User Testing Journal 

[its-coco-chen-blog]

Week 7 - Summer 2018

These days I finished the third task flow including the responsive part. Thus, right now I almost am done the coding prototype. 

Then I will do user testing and improve some design.  

[its-coco-chen-blog]

Midterm Summary - Summer 2018

Righ now I still follow up my timeline. These weeks I finished two task flows including the responsive part. 

I changed some designs of interfaces, not a big changed just some elements’ position. Becuase some designs are hard to come true in my coding prototype right now. Also, for the hue light setting page, I changed the original design. I used a 3D light model to replace the old icon image. Based on this change, I modified some effect of the final light effect. 

Meanwhile, we figured out how to do not use BOTT internet to show home control part. Thus, right now my thesis technology part almost is done.  

Next weeks, I will work on the third task flow. I plan to finish all task flow before week 8. Then I will do user testing to test my prototype and refine it. Also, I plan to record a video for my light control part, just in case something wrong on the final presentation day.  

[its-coco-chen-blog]

Week 6 - Summer 2018

These days I finished the second task flow including the responsive part.  Next, I will continue to do the third task flow. Also, I should begin to work final review slide show. 

[its-coco-chen-blog]

Week 5 - Summer 2018

The second task flow has two ways to help users to synchronize their sleep setting. So these days I finished the first way - users synchronize sleep setting from the preference page. Also, there have some HTML & CSS problems. I will figure out later. 

Meanwhile, this week I did the hue light setting page in the help of  Hamilton and other technical staff.  Also, now I can show the home control function without the Internet. Although there have details that I need to improve and test more. 

Next, I will finish the second way of the second task flow. Also, I will finish the responsive part of the second task flow before midterm.

[its-coco-chen-blog]

Week 4 - Summer  2018

These days I focus on the second task flow. Based on the new design of the hue light setting page, I changed the light icon to 3d light. Right now the brightness range has a problem. I need to reverse the color of the brightness range. Also, I am working on preference pages. There have some errors about input. Next, I will continue to work on the second task flow. Hope I can finish the second task flow before Friday. 

[its-coco-chen-blog]

Week 3 - Summer 2018

These days I continue to improve my design. Now the first task flow is done. I begin to work on the second task flow. These days I tried to improve the hue light setting page. However, it still has problems on canvas. 

Next, I will continue to work on the second task flow.

[its-coco-chen-blog]

Week 2 - Summer 2018

This week I focus on the first task flow - Create new place and group, then add devices. Now I almost finish all pages of the first task flow. 

Meanwhile, there have some problems. First, I made checkbox buttons look like radio buttons but I want to change the background color and other styles. Second, add devices part I build fake pages but I want to link the hue light setting page from the database. 

Next, I will do the responsive of the first task flow, then I will begin to work the second task flow.

[its-coco-chen-blog]

Week 1 - Summer 2018

During past a month, I refined the interfaces of three task flows. It including a new homepage. Now I want to make sure 3 task flows’ coding demo will be work on the final review. So, this module I refine the first task flow - Create new places and groups. 

Now I have two bugs. They are all about the database.

During Module 2, I hope I can finish the first task flow, and also finish the responsive of the first task flow.

[its-coco-chen-blog]

2018 Spring Summary

First, this semester I finished the visual design of GoodNight app. Thus, based on my design I began to coding my pages. I finished homepage, group page, hue light setting page, user profile page. There have some details need to improve but the frame almost is done. Now I'm still working preference setting page. The hue light setting page spent me a lot of time because I hope the light control part can work with Philips hue light. Thus this part I almost spent three weeks. Now it works. Second, I created a database for my app. Now homepage and group page can get data from the database. This part spent me one month to create a database, then replace my coding with data that from the database.   These two things are main work that I finished this semester. I will present in summer, so I still have a lot of work need to do. I know time is not enough for me, so I consider change my plan. Before the summer semester, I hope I can finish all task flows' interfaces, and make sure these interfaces are clickable. Also, after today's interview, I got some great ideas. Thus, I will consider it, then improve my project.  I will continue work and upload my journal during the summer holiday. That's all !!~

[its-coco-chen-blog]

Week 13 - Spring 2018

During this week, I still working the preference pages. I find some problems. First, when I build bedroom preference pages I find the menu bar doesn’t work. Second, some elements’ position is wired. 

Also, based on the visual design, I improve the hue light setting page. Now, I consider the color of brightness range will follow the hue range. It means the brightness range will show the color that user choose in hue range. After I have this idea, I search the coding for this part. I remember last week I saw this part function in Hamilton’s coding. However, I didn’t get it. I tried several ways to build some connect between hue range and brightness range. They all faired. 

[its-coco-chen-blog]

Week 12 - Spring 2018

Last week the hue light control function is work. So, this week I try to do showing final color and brightness that users choose on the half circle on the light setting page. I have a general idea of how to make it. Based on Hamilton’s coding of Radial Color Selector on Codepen, I try to figure out this function in my app. However, I have several questions about HSL.

First is about HSL degree. Because I need to fit my coding with Philips API, so Philips API’s hue color degree has 65280 but I have no idea about should I change the degree same with API or just keep it as 360 degrees?

Second, I am confused about the getMovingValue function. 

Except for the light setting page, I will continue to do other function pages. 

[its-coco-chen-blog]

Week 11 - Spring 2018

Because last class we finished hue light color/brightness control part. Thus, this week I connect my app to Philips Hue Light. Now, the turn on/ off button is work. However, the coding of brightness control now is complex. I have no idea to create this part. 

Also, this week I began to create preference setting page. Because I found this part still need a database but I confused if I need to create a new database or I can still use right now database. 

For next weeks, I will try to finish preference setting page. Meanwhile, the hue light setting function must be finished.