Cookgram for Apple TV: Wireframe & Final Prototype

Cookgram for Apple TV is a recipe app where users can browse their recipes as well-designed recipe album (gif form) on Apple TV as well as explore more recipes from other users’. It will be a community to explore, collect and share recipes.

Wireframe & App Map Slides

Feedbacks & Critics from 1st presentation:

1. Horizontal design of apple tv version is not very effective. Use two sides and vertical view.

2. Top bar should follow the apple tv HIG

Paper Prototype:

Based on the feedbacks from the first presentation, I prototyped a new version of Cookgram for Apple TV.

PaperPrototype2 some user insights that I got from the paper prototype are: 1. Search function can be an independent section on the top menu.

2. Shopping list section doesn’t make sense for user to use in apple tv version.

3. Login view is missing.

So in my final prototype, I redesigned the UI and changed some of my UX flow. Here is the Final Prototype Slides

User Insights from the final prototype:

Under the detailed recipe view, the focus is default on “Followers”, while the right part of the screen shows the detailed recipe, which is confusing. Should use left side as a navigation section consistently like the one that I designed under “Me” section.

Marvel Prototype

“ingredipedia tvOS

<From last week Paper Prototype>

  •  Title of each drop down menu… not clear
  •  The food trend is like commercial use. ( I would expect something trustable and no ADs, if I use your app)
  • Home and Garden? try something like “ Food Process ”, or “Food Story”

IMG_0417   IMG_0416







Final design for tvOS ( pdf )

< Presentation Feedback >

  1.  Fonction of “My Wishlist” is quite overlapped with “Saved”.
  2. “WISHLIST ” ?! => Watch List
  3. Where to go back to the last page  from watching video? A button ?( UPDATE !! actually down swipe the control pad will drag down the top menu.)
  4. “Everyday Basics” => is an interesting section, instead of categorized order , maybe show top 5 video of each categories is more attracted (invited) people to keep going on your app.
  5. “I like the design, clean! “
  6. ” hmm.. Some of the Single Video page is small to me. “
  7. from your video detail page, if people finish watching, and then?…. adding a short “Recommendation List” or ” You may like list” for people to continue.



For April 7

  • Work with your partner to prepare wireframes and paper prototypes for your app
    • As a reminder, you Project 3 app can be either a phone or a tablet app on any topic.
  • Group 1 will present their wireframes
  • Groups 1 and 2 will have time to do paper prototyping


  • Post any missing assignments that I identified in your midterm grade emails
  • Remember you’ll need to post a second #ThursdayPlay/#ThursdayApp before the end of the semester.

make up for HIG

Note from HIG

  • App’s interface and contents need to be distinguished to each other. Good design of interface and cantent can facilitate each other but not distracting. The most important/attractive content would usually be placed on the top left corner, where as the less important content should be placed on the bottom right corner.
  • “Ensure legibility by using the system font. San Francisco (the iOS system font) works with Dynamic Type to automatically adjust letter spacing and line height so that text is easy to read and looks great at every size. Whether you use San Francisco or a custom font, be sure to adopt Dynamic Type so your app can respond when the user chooses a different text size.” Font size is an important element we should pay more attention. The appropriate size of font can contribute to all pages of layout, On the contrary, a wrong size can ruin the proportion of the whole design. Thus, we should follow/obey the system font size strictly when we design.
  • If an “onboarding experience” is needed, it should be easy to follow and don’t forget to design a way to exit this part anytime.

neatycutey – second wireframe & paper prototype in class

this is my second wireframe, fixed
apple tv second wireframe


after prototype in class,
apple tv prototype

user insights

  •  There were lots of designs that needed fixing. One of them were applying filter page, which users had difficulty understanding how to apply filters.
  •  For the tab menu(on top), I made a several changes in wireframe 1, 2 and after user testing. Unlike websites, search function has to be in the menu. I tried to integrate the filter and search function together, but lots of apps use “categories” tab menu to distinguish between “search” and “filter”.
  •  For the page layouts, it was difficult to choose which one to show and not to show. Some users didn’t like showing the length of the video, also they asked me to add how many people viewed the video. When they have nothing in mind, users look for videos that are “most viewed” by different people.
  •  Also, setting the page of “home” was difficult.(what to show, how to select a video and go back) Apple distinguished “home” as a “feature” page which shows most viewed content so I took the design and applied it to mine. I liked the simplicity of accessing the “most viewed” contents without going to a tap named “most viewed”.