#ThursdayApp

Disney Magic Timer by Oral-B 

  

This app helps kids to have fun to their daily brushing routine with Disney Magic Timer. As kids start to brush their teeth, they will be able to see their favorite Disney, Marvel, and Star Wars characters, so this app encourages kids to brush longer. The screen is blurred for the first time, but it would become clearer when they start brushing and they can enjoy brushing by watching their favorite characters. Kids need to buy toothbrush to use this application.

Project3: Haemin, Frannie, Qinwen(Add On)

We are creating our app add-on for iMessage app.

Idea: People can customize(outfit, text, effect) and save their character from our mobile application. And in the iMessage app, they can send saved characters as stickers to their friends. We are creating the app add-on in iMessage app for people to chat and communicate in fun way using stickers as well as promoting purpose.

Project3: Haemin, Frannie, Qinwen(Digial Prototype)

User Insights from Iteration

  • How about changing outfit based on the timeline? (Morning and evening temp is different every day.)
  • Saving icon is a little bit confusing. What I am saving, where and what for? – Save icon – change to share icon.
  • Users were confused about which city is first or second. (Think about how to show current city. -the main city)
  • Setting page – notification and refreshing function are unnecessary for users. – Remove it.

App Map

Digital Prototype

https://marvelapp.com/160d039g/screen/41846128

Project3: Haemin, Frannie, Qinwen(Design)

User Insights from testing

  • People usually first check weather icon on weather app to see if its sunny or raining and then temperature.
  • Seven days interface should be cut off – to show it is scrollable
  • Choose brand name for your outfit – how are we going to really help people with this?
  • What if a person personally doesn’t like wearing a jacket or doesn’t like bringing an umbrella or sth? How can AI react to this and how people set these functions?

App map

Wireframe

Project3: Haemin, Frannie, Qinwen(paper prototype)

User Insights from Paper Prototyping

  • Users didn’t know that they can share their characters because they didn’t know they had to tab it for a long time to share.
  • The character looks lonely and sad so it is not easy to get the weather information quickly. (character should reflect the weather condition)
  • Only temp is shown – hard to know the weather immediately and C or F should be next to temp numbers.

Week8

User Test

User Testing Insight

  1. Don’t need closing icon –  Apple TV has a back button.
  2. Remove the first search screen – make people tap the search keyboard right away.
  3. What screen do people see when people type in many different types of ingredients? — So I designed another version of the interface.
  4. For the bookmarking the cookbook, the icon should be outside of the recipe photo because Apple TV cannot focus on inside. — I took out the icon outside of the recipe photo, so people can focus on the icon separately.
  5. Consider the interface when there is many ingredients or steps descriptions. – So I made squares surrounding the step descriptions, so people can scroll down by square to square.

Final User Flow / Wireframe

Final UI

 

 

Final Prototype

https://marvelapp.com/3ajf5eg/screen/40010319

Week 6

Learnings from the Apple TV Human Interface Guidelines

Layout
1. Keep primary content away from the edges of the screen. Be mindful of the area spanning 60 pixels from the top and bottom of the screen, and 90 pixels from the sides.
2. Include appropriate padding between focusable elements.

Tab Bars
1. Match tab bars to the app’s visual style.
2. Use a tab bar to organize information at the app level. – A tab bar is a good way to flatten the information hierarchy and provide access to several peer information categories or modes at once.

Buttons
Don’t include back buttons. People know that pressing Menu on the remote takes them back to the previous screen or the main menu. So, no need to include ‘back’ button.

 

App map

Wireframe