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.