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

Week 4

User Insights

     

1. Clock Icon – Still does not look like clickable button
also, the Reset Button on the timer screen does not seem clickable.

2. Pictures of the food do not look appetizing.

3. Two search parts have to be combined, so people do not get confused.

4. Still need a Home button so people can go back to the main page while reading step pages for the people who are not cooking but just exploring the recipes.

Thursdayapp

‘Alarmy’ is an alarm application, which ensures an easy start to the day by forcing you out of bed.

There are several activities you can choose.

1. Take a Picture -Move to a specific location.
You set it up by registering a photo of an area or room in your house. Then once the alarm is set, the only way to make it stop ringing is to get out of bed and go take a photo of the registered area. This function also helped people to connect to make habits in the morning naturally. For example, take a picture of the book they have to read, or take a picture of email account, so it helps people to read a book or check email every morning when they get up.

2. Shake – Physically exert yourself.
People have to shake the phone until they reach their preset goal to dismiss Shake Mode alarms. Their body could use some exercise in the mornings.

3. Solve a Math Problem – This activity allows for people to wake up the brain, as well as the body.
Solve some math to stop their alarm. For example, easy math problems: (61 X 8) + 12 is a lot harder in bed. They can customize the level of difficulty and number of questions to solve in the morning.

Week3 User Insights

Insights from Users and Research.

1. From the user test, people told me for busy people; maybe they do not need time filter specifically. They aim to make food quick. Think about another filter which can be helpful for them.

2. And people asked me “Is there any popular recipe or recommendation recipe?”

3. Think about the menu. (No need drink, dessert, or appetizer for this app.)

During my research, I found out that there are not many recipes that only takes 5minutes or 10minutes so, I decided to provide a recipe, which takes less than 40minutes. And I made a new filter that users can put the ingredients they have at home, or they want to eat. After their inputs, the app will recommend four recipes based on ingredients they choose.

 

Digital Prototype

https://marvelapp.com/project/2711160/

 

 

Week 2 Haemin

User Insights from the first user test

 

 

Sign for the last page of a recipe.
Users were confused about the last page of the recipe because on the step3 page; there was no clue to figure out the page is the final step. Also, users wanted to go back to the main page where they chose a recipe for the first time from the last step of a recipe. But they had to take two steps to go back; which was tapping on a menu and then home button.

 

 

Timer function.
Nobody recognized the timer icon. Users said icon does not look like clickable. The timer is needed when people boil while cooking, but once they click the timer, it should be minimized, so it does not cover recipe photos. Users no need to set the time themselves because based on the recipe, a timer can set it automatically for them.

 

Navigation.
Basically, there is a menu bar on the left to navigate, but has two buttons, which are ‘home’ and ‘my cookbook.’ Users said there is too much blank for the menu navigation, so they suggested me to put those two buttons underneath of the whole interface. Another navigation bar is choosing a recipe based on time. There are three options 5, 10, and 20 minutes. Users said split into three times seemed restricted. Many recipes cannot fit into those three options and suggested me to think about how to make this filter flexible.

 

Based on the feedback, I iterated the prototype.

Below are the second user flow and wireframe.

<First user flow>

<Second user flow>

<Second wireframe>

Week 1

3 things I didn’t know from the HIG

System capability – Multitasking (Slide Over, Split View, Picture in Picture) It lets people to quickly switch from one app to another at any time through a multitasking interface.

Layout Guides and Safe Area: Guide to leaving some margin space.
Every time I create a mobile digital prototype, it was not 100% fit to screen, sometimes it was oversized or looked ugly. Also, a great thing to know about was, how to deal with a screen when people play a game vertically.

Drag and Drop function in new iOS: With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising a finger to drop it. Never know about this function.

About me

Hello, I am Haemin Kwon. I am an interaction designer from Korea. I am interested in User experience design (UX research, sketches, wireframes, prototypes) and UI design.

 

User Flow

 

wireframe