wk11_Sara & Stella


From last week’s feedback, we noticed that the iOS system actually couldn’t read users’ messages. Therefore, we decided to create an app that allows 2 or more people find a place to meet up at a midpoint between them based on their information shared on the Facebook. It picks up personal preferences from your Facebook account as well as your locations to figure out what kind of place you want to meet up.

Insights from user test on 04/05

1.  Users care about the price of each place so it is important to show the price range in a conspicuous way. ——  “$”,”$$” and “$$$” to indicate low to high price.

2. What if users want to revote —— an “Edit Choices” button after they submit their votes.

3. Users feel confused about the dragging icons. “They look like a burger menu” —— delete the dragging icons and add a text instead.

4. How users know their friends have already made decisions—— Notifications from the app when both decide.

5. How to check the chosen place is at a midpoint——both people’s location will be shown on the map.

6. Users want to know more details about the places.

Iterated App Map

Iterated Wireframe



2-3 user insights that I learned from paper prototyping

  • Reconsider the category for the menu tab.

From the critique as well as the user test, I found out that the initial category on the menu tab is not that familiar to users. Hence I referred to some shopping applications on Apple TV and redesign the menu tab. I added a logo on the left corner and an icon for shopping cart on the right corner, which correspond to users’ habits more.

  • Redesign the layout in the “CURRENT” view.

From the user test, I figured out the vertical layout for current recipes was not that efficient, which didn’t keep consistency from the layout of “SHOP” view as well. Hence, I changed it to the grid layout which is more clear and informative.

  • Rethink user experience in the “SHOPPING CART” view.

Initially I only designed a confirm button in the “SHOPPING CART” view. However, I found that users may need more actions such as reviewing the recipe here. Accordingly, I added more features in this view. For instance, users could set their start and end date for the plan, and review the recipes they select before the confirmation now.

Final Visual Design


What I’ve learned from the Apple TV Human Interface Guidelines

  1. Consider the user’s distance from the screen. Design interface elements appropriately, so they’re legible, easy to find, and aren’t overwhelmed by background images or adjacent items. I feel that it may be one of the biggest differences between designing an iPhone APP and an Apple TV APP. Users’s distance from the screen should definitely be taken into designers’ consideration.
  2. Don’t display a cursor. People expect to navigate fixed numbers of items by changing focus, not by trying to drag a tiny cursor around a huge screen.
  3. No need to show the “BACK” button.
  4. Design for different focusable item states. On Apple TV, focusable items can have up to five different states, each of which should appear visually distinct.


tvOS App Map

tvOS Wireframe


User insights:

  1. The processing bar on the “SHOP” view is clear enough so there is no need to have an extra view to show the details. Also, “remained” should be “remain”.
  2. The icon to add recipes in the shopping cart does not make much sense. An “add” icon may work.
  3. The color of the shopping cart checking button should be consistent.
  4. The first page of “SHOP” is not that efficient. More useful information should be shown on that view.

Final prototype



inkHunter is an AR mobile app for people to virtually “try on” various tattoos. By drawing a cross on the skin you want to have a tattoo on, you could easily preview the tattoo via the inkHunter.

Basically it is a simple app with this only feature, but I feel that it is great example to combine the AR technology with the mobile app in the real life. Users could select their favorite tattoos in the Gallery and tap on “Try” to try whatever tattoos they like.


Among all the feedback, what tangled me most was the process of how users select and buy a weekly plan in the app. Initially, I just considered it as a normal buying process, however, during the user tests, I noticed that there are many other factors which should be taken in my consideration. For instance, how to encourage people to buy again? Or how to differentiate various plans with each other? Therefore, I did a redesign of Order-A-Plan.

digital prototype


User insights I learned from my second paper prototyping

  1. It’s important to keep how users would interact with the app in mind, which means a simple and clear user task flow is vital. Specifically, how people get into a specific view, and how people could get into another view afterwards should be completely logical. For example, users would care about how they could go to the home screen, and where a “back” button would lead them to. They all require us designers’ consideration.
  2. Even a single word on the screen matters. Though users are accustomed to viewing icons and images in a view first, it is still significant to care about every word and text in the app. For example, “alert”, “notice” and “notification” are quite different from each other. Users may also feel confused about “Skip” which is used for users who need to eat outside on a specific day. However, in my user testing, this feature, or maybe this word is really confusing.

Visual Design

Digital Prototype

wk02 Stella

User insights I learned from paper prototyping

  1. PLAN:
    1. It may be unnecessary to set up the number of family members because the family plan has already existed.
    2. Users couldn’t search within the plan to check which recipes are in the plan before they confirm to buy it.
    3. It is hard to know how many recipes are selected in the selection page.
    4. tags may help users to make decisions among the recipes.
    1. The processing circle is distractive.
    2. Both horizontal and vertical layout are not that effective.
    3. Ranking feature may be set after users finish cooking.
    1. alert rather than notice?
    2. Delivery tracking is necessary.
  4. ME
    1. Why users need to connect to their facebook account?

Evaluation from the critique

  1. PLAN:
    1. The coexistence of horizontally swiping and vertically scrolling is unclear and confusing.
    2. Users need more obvious trigger to notice that the page could be scrolled down.
    3. Price button may get users give up buying the plan.
    4. users couldn’t preview the details of those recipes.
    1. The processing circle may be not that necessary.
    2. What if users skip one of the day (for example, hang out for the dinner)?
    3. The most important feature on this view should be how to check the recipe that day.
  3. SEARCH:
    1. Where do users need to search for something? The position of searching is vital.

App Map V2.0

Wireframe V2.0

wk01 Stella

About Me

Hi, there! I’m Stella. I’m fascinated with crafting better experience for people and just dive into ubiquitous computing recently. I’m here to learn more professional knowledge about UX/UI on mobile devices.

Three things I don’t know about HIG

1. Modality

I learned a lot about basic principles of modality which I only had limited knowledge in. Specifically, I knew that people could specify how they want receive notifications from the app, so it is important to abide by there preferences. Also, there are several appropriate modal view styles to choose from to make modals more standard.


It is vital to implement navigation in a way that supports the structure and purpose of the app without calling attention to itself. There are three kinds of navigation, including Hierarchical Navigation (Settings and Mail), Flat Navigation (Music and App Store) and Content-driven Navigation (Games and Books).


In the past, I always chose typography based on the theme of the app. However, it would be better to choose built-in text styles, which let me express content in ways that are visually distinct, while retaining optimal legibility. These styles are based on the system fonts and take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size.