Tabitha Tsai

TaskRabbit

A mobile app to outsource chores and errands.

Design

I assume that people need help with chores and errands because of new to a place, physical limitations, convenience or better choices compared to other options. Thus, I design a mobile application with the voice search and machine learning, which improves the search results. In order to keep helpers staying at this platform, they accumulate the deal number as their reputation to attract future customers; For keeping users staying here, this app provides 24/7 customer service whenever users have questions. Features are:

  • A. Search
    • Text search
    • Voice search
    • Favorite list
  • B. Service list
    • Item and price
    • Filter
    • Review
    • Quote
  • C. Rating
  • D. Inbox
  • E. Customer service
  • F. Me
My screen design of TaskRabbit app. It has four tabs: search, inbox, customer service and me.
My screen design of TaskRabbit app

Deconstruction and Critique

Deconstructing the screens used in the TaskRabbit app
Deconstructing the screens used in the TaskRabbit app
  • Their rationale
    1. I guess that showing the statement about online helpers are verified and the insurance is included is to encourage people to complete transactions with confidence and trust.
    2. I guess that TaskRabbit shows categorized reviews (e.g. Cleaning) is because users are aiming for a specific professional of helpers, who might work on different categories (e.g. Cleaning and Delivery).
  • My suggestions
    1. Search result: I suggest TaskRabbit to provide users related search results.
    2. Title: I suggest TaskRabbit to make the sentence shorter to show the whole.
    3. Term: I suggest TaskRabbit to clarify options in order to avoid misunderstanding. For example, Does No tools are needed mean this task doesn’t need tools or users don’t need to prepare tools?
The left screen shows 'bike pump' at the search bar and 'photography' at the search result; The middle screen shows an incompleted sentence: please choose one o...; The right screen shows 'No tools are needed' as one option.
My critique for TaskRabbit

Goodreads

A mobile app to curate great content for readers.

Design

I assume that people have experience in physical bookstores, and enjoy the convenience brought from digital platforms. Thus, I design a mobile app which provides experience of being bookstores and at home in front of customized, personal bookshelves. Features are:

  • A. Notification
  • B. Onboarding
  • C. Bookshelf
    • List and bookshelf view
    • Barcode and book cover scan
    • Highlight
    • Book information and review
  • D. Discover
    • Personal recommendation
    • Popular read
  • E. Socialization
    • Friend’s reading
    • Share
My screen design of Goodreads app. It has four tabs: my shelf, discover, friend and setting.
My screen design of Goodreads app

Deconstruction and Critique

Deconstructing the screens used in the Goodreads app
Deconstructing the screens used in the Goodreads app
  • Their rationale
    1. I guess that Goodreads displays logged-in features (e.g. My Books and Want to Read) before logging in is because they want to inform people what features they will have after getting a Goodreads account.
    2. I guess that Goodreads displays Scan as an independent tab, which I put in the Discover tab in terms of part of the search functionality, is because they want to provide a seamless experience while users are at bookstores and want to scan books into their to-read lists.
  • My suggestions
    1. Control and freedom: I suggest Goodreads to have an opt-out option anytime in order to give users control according to NN/g 10 Usability Heuristics for User Interface Design.
    2. Call-to-action: I suggest Goodreads to display a clear call-to-action. In the current design at Scanned Books, it’s hard to know that users have to click on Shelve to show actions they can take.
    3. Link: I suggest Goodreads to test all links, including content in alerts.
The left screen shows a list of genres with a disabled next button; The middle screen shows two items checked without any actions displayed; The right screen shows a hyperlink code in the alert.
My critique for Goodreads

Omni

A mobile app to rent from neighborhoods.

Design

I assume that people need things temporarily for urgent cases. For example, San Francisco got heatwave few days in June 2019, and it’s hard to sleep without an air conditioner. Search and Rental History are two main functions in the app: Searching by use scenarios (e.g. type 'need holes on my wall' in the search box) or image scanning is in case of users don’t know the name of things they need; Rental history helps people repeat rentals from accountable shops. Features are:

  • A. Search
    • Search bar
    • Rental history
    • Map and list view of search result
  • B. Rental
    • Rent
    • Return
    • Payment
My screen design of Omni app. It has a powerful search feature by typing a use scenario or scanning an image.
My screen design of Omni app

Deconstruction and Critique

Deconstructing the screens used in the Omni app
Deconstructing the screens used in the Omni app
  • Their rationale
    1. I guess that shop names are starting from Omni (e.g. Omni Market Street) is because Omni verifies those shops instead of allowing people to provide rentals randomly. That is to say, Omni builds trust by selecting rental suppliers.
    2. I guess that Omni groups and sorts search results by locations is because, in their business model, people prefer rentals nearby. However, giving people visualization will reduce cognitive loads on figuring out which fit their needs. For example, the map view of search results gives people a concept of the distance of stores.
  • My suggestions
    1. Information: I suggest Omni to provide a contact link at the page, where Omni says users can ask for help. For example, a message feature or phone call link.
    2. Interactive map: I suggest Omni to make the map interactive either by providing an interactive map or linking out to a map app. For the second solution, users can measure how to get to stores and by how long.
    3. Inconsistent price: I suggest Omni to provide more consistent price list to avoid hesitation on completing transactions.
The left screen shows a description - ask us how - without any contact information; The middle screen shows a fixed map to show the store location; The right screen shows two prices at the checkout page.
My critique for Omni

FlightStats

A mobile app to check and share flight information.

Design

I assume that people need a platform to check flights with a piece of information, such as a flight number. That is to say, instead of wandering among airline-held mobile apps, this app empowers users to check general flight information: flight status, departure/arrival time, airport, terminal, gate, baggage carousel and weather, and to share with friends and family. Features are:

  • A. Check flight information
  • B. Add flight into watchlist
My screen design of FlightStats app. It has a search bar at the top of each screen and flights users add into.
My screen design of FlightStats app

Deconstruction and Critique

Deconstructing the screens used in the FlightStats app
Deconstructing the screens used in the FlightStats app
  • Their rationale
    1. I guess that FlightStats provides users with three search options - by flight, by airport and by route - to ease the search process depending on what information users have. However, users might spend time on toggling among these three options till they understand which one matches their needs.
    2. I guess that adding flights, that users were searching for and clicking into the detail page, into My Flight list automatically is because FlightStats wants to save users from an extra action to add a flight into the list.
  • My suggestions
    1. Keyboard: I suggest FlightStats to display a proper keyboard for specific text fields. For example, showing numbers on the keyboard for flight numbers.
    2. Cognitive load: I suggest FlightStats to use a single time zone in the description to keep users from calculating the time.
    3. Term: I suggest FlightStats to use easy-to-understand terms or provide description. For example, I don’t understand what Use Metric means?
The left screen shows numbers and special characters on the keyboard while searching flights by flight numbers; The middle screen shows two time zones - GMT and CDT, in a description; The right screen shows user metric and show codeshares on the setting page.
My critique for FlightStats

Pocket

A mobile app to have your own information collection.

Design

I assumed that people get information through many digital places and would like to enjoy it later. I designed a mobile application not only to collect articles from other applications, but also to eliminate advertisements from the content so that readers appreciate it without commercial interruption. Features are:

  • A. Save
  • B. Article
    • Category
    • Text or audio
    • Mode
My screen design of Pocket app. You add articles into Pocket app and then read it or listen to it later.
My screen design of Pocket app

Deconstruction and Critique

Deconstructing the screens used in the Pocket app
Deconstructing the screens used in the Pocket app
  • Their rationale
    1. I guess that having popovers moving upward for showing details or selections is because Pocket wants to present that the interaction looks like users are getting in and out items from their pockets. However, the first-time users might be confused how to close a popover with a bar at the top but without any text or icon buttons.
    2. I guess Pocket displays modes (dark, light and auto) and text-size settings under Text Settings is because users usually adjust these two settings together, so putting them in a place reduces clicks. Otherwise, it’s not intuitive to find the mode-changing feature under Text Settings.
  • My suggestions
    1. Carousel indicator: I suggest Pocket to remove carousel indicators, which makes users think they can swipe for reading next pieces.
    2. Status: I suggest Pocket to inform users the status of system according to NN/g 10 Usability Heuristics for User Interface Design. Users should know what they have done without adding cognitive load.
    3. Icon: I suggest Pocket to use a proper icon for the Discover tab. In the current design, an a-heart-in-a-box icon looks like a favorite collection rather than a metaphor of discovering.
The left screen shows four carousel indicators under an image and onboarding text; The middle screen shows a circle icon doesn't change at all after I clicked on it; The right screen shows an icon with a heart inside at the tab bar.
My critique for Pocket

WNYC

A mobile app to listen to the world.

Design

I assumed that users capture news on topics they are interested in when they are commuting. Therefore, I provided users to input how long they want to listen daily, and machine learning empowers this mobile application to create playlists for users in the period of time users gave. Features are:

  • A. Onboard
    • Choose topic
    • Estimate listening time
  • B. Listen
    • Transcription
    • Save
    • Share
My screen design of WNYC app. It has onboarding screens in the beginning of using the app. Then users can start listening news online or save it for listening offline.
My screen design of WNYC app

Deconstruction and Critique

Deconstructing the screens used in the WNYC app
Deconstructing the screens used in the WNYC app
  • Their rationale
    1. There is a time-setting feature while playing. From the label We’ll lull you to sleep in 20 minutes, I guess that WNYC sees listeners needing a reminder to stop listening.
    2. I guess that WNYC duplicates listeners’ favorites to the top of the list is because it’s easier to find favorites in a long selection list, even though showing episodes twice takes more space.
  • My suggestions
    1. Duplication: I suggest WNYC to check their main screen to eliminate the repeated items.
    2. Unavailable button: I suggest WNYC to disable buttons which users cannot take actions to, in order to avoid unnecessary clicks. For example, after pressing Next without choosing any item, it shows a message: Please select at least one topic.
    3. Term: I suggest WNYC to use a proper term on the tab to describe what this section is for. For example, Discover is difficult to associate with downloading news onto the phone until users are at the last step.
The left screen shows two items with the same content in the playlist; The middle screen shows a Next button at the top-right corder even though users haven't selected any options; The right screen shows a download playlist button in the discover tab.
My critique for WNYC

Couchsurfing

A mobile app to help or get help on travelling.

Design

I assume there are two kinds of users. One is the people who share places to stay, travelling information and events; Another is the people who need homestays or information while traveling to (new) places. Both love travelling and switch between these two kinds of users. Features are:

  • A. Onboard
  • B. Stay
  • C. Info
  • D. Message
  • E. Me
My screen design of Couchsurfing app. It has four tabs: dashboard, info, message and me.
My screen design of Couchsurfing app

Deconstruction and Critique

Deconstructing the screens used in the InShot app
Deconstructing the screens used in the InShot app
  • Their rationale
    1. In order to provide new users better experience, Couchsurfing doesn’t ask users to verify identities (to build the trust online) until they want to hangout with other users or share a public trip.
    2. I guess that Couchsurfing encourages users to provide payment information, including PayPal or credit cards, is because users can be verified by credible third parties. Verify With PayPal or Credit Card has the highest score among verification items.
  • My suggestions
    1. Onboarding: I suggest Couchsurfing to have the NEXT button to inform users what to do next during the onboarding process. Moreover, the color contrast of carousel indicators is too low to notice.
    2. Layout: It’s good that Couchsurfing uses colors to communicate with users. For example, red means users need to pay attention to, and blue means buttons. However, showing too many components in a screen might overwhelm users.
    3. Ambiguity: I suggest Couchsurfing to provide more explanation for money-related content, which gives people confidence to do actions. For example, I’m not sure if $60 for life means I need to pay to get verified.
The left screen shows a full-screen size onboarding image; The middle screen shows elements, such as notifications and buttons, are all over the screen; The right screen shows text: just $60 for life helps you meet the world.
My critique for Couchsurfing

Foodie

A mobile app to change your eating life from bland to delectable.

Design

I assume one of the reasons users download this mobile app is for the food-specific features, which other photography apps don’t have. Thus, I include a guidance with the AI-based algorithm, which tells users how to arrange the angles of their cameras. Moreover, minimizing the clicks of sharing on social media is the key, since users must be hungry at that time taking pictures. Features are:

  • A. Get guidance of positioning the camera
  • B. Edit and share photos
  • C. Edit and share videos
My screen design of Foodie app. It has a canvas to edit photos or videos with filters.
My screen design of Foodie app

Deconstruction and Critique

Deconstructing the screens used in the Foodie app
Deconstructing the screens used in the Foodie app
  • Their rationale
    1. Foodie uses animations (e.g. a filter name flies out from the middle of the screen to the right and then disappears) to inform users to use a swipe action to choose filters.
    2. Being different from other photography apps, users are able to take photos one after one without stopping at the editing screen. I guess it’s because Foodie considers users are hungry while taking photos of food, and users can share photos after eating. However, for the users, who can’t wait to share, these extra clicks (click on an album icon and then select a photo to edit) make the editing or sharing process longer.
  • My suggestions
    1. Icon: I suggest Foodie to use appropriate icons or to display icons with text. For example, the rectangle icon at the top of the screen is not intuitive for the aspect ratio of photos.
    2. Filter: I suggest Foodie to show filters on the screen instead of using swipe gestures. I believe trying different filters is the fun part for users. Thus, we can reduce clicks by showing filters defaultly.
    3. Terminology: I suggest Foodie to use easy-to-understand terms for filters rather than abbreviations.
The left screen shows 5 icons with no description; The middle screen shows an icon at the bottom-right corner to show filter options; The right screen shows abbreviation terms for filters. For example, YU and PL.
My critique for Foodie

InShot

A mobile app to edit photos and videos with fun effects and tools.

Design

I assume users need advanced tools to create collages or videos, such as cutting or speeding up the middle part of videos. For the business side, although this app promotes the premium membership or paid effects, I decide on including ads into one area, where users click ads proactively. The rationale is not interrupting users while enjoying in editing. Features are:

  • A. Edit and share photo
  • B. Store
  • C. Edit and share video
My screen design of InShot app. It has photo and video editing features. Users can shop for more effects after clicking on the store icon at the top-left corner.
My screen design of InShot app

Deconstruction and Critique

Deconstructing the screens used in the InShot app
Deconstructing the screens used in the InShot app
  • Their rationale
    1. For promoting paid effects, InShot uses animations to catch users' eyes. For example, it shows an animation on the gift-icon button at the home screen. (This icon is gone one day after.)
    2. InShot displays navigation buttons (e.g. a cancel button) at the bottom of the screen, in order to include buttons into the thumb range.
    3. I guess InShot leaves the top area (about one-inch height) blank for notifications and advertisements, where InShot can educate users to watch for important information. However, the notification disappears in two seconds, and I suggest InShot to leave the notification there from the accessibility point of view.
  • My suggestions
    1. Signifier: I suggest InShot to have a signifier to inform users actions. For example, it only has an icon for reducing the number of photos during the collage creation, but nothing to tell how to have one more same picture into the collage.
    2. Interruption: I suggest InShot to remove blinking ads or to have static ones while users are editing photos or videos. That is to say, it’s better not to interrupt the most enjoyable moment.
    3. Color contrast: I suggest InShot to increase the color contrast on guiding words for better readability.
The left screen shows no signifier to increase the number; The middle screen shows an advertisement at the top of the screen; The right screen shows low color contrast words at the bottom.
My critique for InShot

B612

A mobile app to play selfies with fun effects.

Design

I assume users like taking selfies and editing them with fun filters. For example, makeup, animal stickers and boomerang. They also like shooting videos and mixing them with musics. Moreover, they share the creative work in the form of collages. Features are:

  • A. Take photo/video
  • B. Create collage
  • C. Use effect: text, voice, boomerang, video-speed and draw
  • D. Import photo/video
My screen design of B612 app. It has a canvas to edit photos or videos users take or import from their phones.
My screen design of B612 app

Deconstruction and Critique

Deconstructing the screens used in the B612 app
Deconstructing the screens used in the B612 app
  • Their rationale
    1. B612 puts effect options at the bottom of the screen and non-editing ones at the top. I guess it’s because editing is the main functionality for B612 users, so they keep it within the thumb range.
    2. Like Uber Eats, which uses an animation to stand out the delivery status, B612 also utilizes an animation to stand out the feature they want to promote - Beauty. This only happens on first-time opening this app, which informs new users to try it.
    3. Users definitely do a lot of editing. The sliders present both the old and new values in case users want to go back to the previous settings.
  • My suggestions
    1. Signifier: I suggest B612 to have a signifer to inform users that how to close the effect-editing panel.
    2. Consistency: It has two different ways at different positions to download photos, and I suggest B612 to have them consistent.
    3. Term: I suggest B612 to use more specific terms. For example, I thought the SAVE button is for saving settings rather than downloading photos onto my phone.
The left screen shows a screen with no signifer to inform users to close the editing panel; The middle screen shows an icon with a downward button as a download button; The right screen shows text SAVE at the top right corner of the screen.
My critique for B612 app

MB3

A mobile app to explore and enjoy musics you love.

Design

I assume users want to use this mobile app as a one-stop platform to listen to musics without choosing from multiple applications, such as YouTube and iTunes. Through categorizing musics, users can listen to musics according to where they are, whom they are with, or what's in their minds. Features are:

  • A. Explore
    • General music categories
    • Search
    • Add into list
    • Play
  • B. Lists
    • Customized music categories
    • Shuffle play
My screen design of MB3 app. It has three tabs: explore, lists and settings.
My screen design of MB3 app

Deconstruction and Critique

Deconstructing the screens used in the MB3 app
Deconstructing the screens used in the MB3 app
  • Their rationale
    1. In the onboarding process, MB3 asks users one song they like as the foundation of music suggestions.
    2. As MB3 promises this app is forever free, ads are everywhere at the bottom of the screen and appear on modals randomly.
  • My suggestions
    1. Meaning: I suggest MB3 to use the number for how many songs in the list. I guess the number of songs here means how many songs other users have created in their playlists.
    2. Term: I suggest MB3 to use common terms for better understanding of use. For example, use Play rather than Start Radio.
    3. Activity view: For the iOS design, I suggest MB3 to use an activity view for the sharing function. Moreover, with images displaying on the activity view, users can select options quicker by visual elements.
The left screen shows text three songs at the top but there are more than three songs in the search result; The middle screen shows a button - start radio; The right screen shows a list of sharing options on an action sheet.
My critique for MB3 app

Foursquare

A mobile app to explore adventures and keep them as wonderful memories.

Design

I assume people use this app to search interesting places nearby, or they are going to. Users might use vague ideas and get suggestions from this app. For example, hiking or pancake. They can manage their todo lists or memorize where they have been. Features are:

  • A. Explore
    • Search
    • Add into list
    • Add into memory
  • B. Memory
  • C. List
My screen design of Foursquare app. It has four tabs: explore, memory, list and settings.
My screen design of Foursquare app

Deconstruction and Critique

Deconstructing the screens used in the Foursquare app
Deconstructing the screens used in the Foursquare app
  • Their rationale
    1. While onboarding, the navigation bar at the bottom has carousel indicators and a next button. I guess Foursquare wants to provide two options for switching the onboarding pages in case users are not familiar with carousel indicators.
    2. Users are able to draw an area, which might be an irregular shape, to confine their search results in that area.
  • My suggestions
    1. Control: I suggest Foursquare to use a time picker rather than a checkbox to select between AM and PM. In the current design, it means AM if the checkbox is unchecked.
    2. Duplication: I suggest Foursquare to remove repeated information. For example, there are two places of Add Hours on the screen.
    3. Icon: I suggest Foursquare to use more proper icons for voting comments. In the current design, arrows look like for arranging the order of comments.
The left screen shows a checked checkbox and a label (PM) next to it; The middle screen shows two places to add hours; The right screen shows upward and downward arrows for voting comments
My critique for Foursquare app

Tinder

A mobile app to match friends or lovers.

Design

I assume Tinder users want to connect to people for making friends or finding true love. This design focuses on candidates selection and communications. Features are:

  • A. Me
    • Onboarding
    • Profile creation
  • B. People
    • Like
    • Candidate pool
  • C. Match
    • Opt in/out for matching
    • Message
My screen design of Tinder app. It has three tabs: people, match and me.
My screen design of Tinder app

Deconstruction and Critique

Deconstructing the screens used in the Tinder app
Deconstructing the screens used in the Tinder app
  • Their rationale
    1. For liking or ignoring a candidate, Tinder displays two buttons under the candidate's picture: a red x button and a green heart, although it's more straightforward that using red for a heart. I guess Tinder uses a green heart is because it's more weird to have the switched placement: a green x and a red heart.
    2. Although users know the gesture of swiping left (to view the next candidate) and right (to like this candidate) via the onboarding instruction, this app also shows signifiers - a x button and a heart. Thus, users don't need to remember the implicated gestures.
  • My suggestions
    1. Medium: I suggest Tinder to use a video or animation, rather than a page, to educate users how to utilize special gesture features. I believe videos are better for showing sophisticated tips.
    2. Distance: I suggest Tinder to move the buttons together, in order to minimize the times users move their hands for holding phones.
    3. Group: I suggest Tinder to group related elements together. For example, displaying Enter your code and the code field next to each other.
The left screen shows text and an image for teaching users how to use swiping features; The middle screen shows buttons far away to each other; The right screen shows the label and field are not next to each other.
My critique for Tinder app

Postmates

A mobile app to deliver you anything or help you grab takeout from the counter without staying in a line.

Design

I assume this app serves two kinds of users: people who want to stay in a place but need something right away and people who don't want to spending time waiting in a line. Thus, it starts from searching, picking a store, placing an order, and then either waiting for it at where they are or going to that place to pick up. Features are:

  • A. Explore
    • Map view
    • List view
    • Shopping cart
  • B. Order
    • Delivery status
    • Pickup status
My screen design of Postmates app. It has three tabs: explore, order and settings.
My screen design of Postmates app

Deconstruction and Critique

Deconstructing the screens used in the Postmates app
Deconstructing the screens used in the Postmates app
  • Their rationale
    1. There might be a lot of categories in a menu. For example, salad and beverage. I guess in order to keep users away from memorizing what category they are looking at, it shows the category on the sticky panel at the top of the screen while scrolling the menu up and down.
    2. The VIEW CART button shows the number of items in the cart. I guess Postmates wants to remind users how many items in the cart. Yelp does the same thing, but also includes the total amount on the button.
  • My suggestions
    1. Ambiguity: I suggest Postmates provides people determined price and avoid using TBD, which gives people less confidence to make decisions.
    2. Color: I suggest Postmates to use another color for presenting stores, by which it helps users distinguish stores and the map.
    3. Expression: I suggest Postmates to describe time more clearly. For example, I don't understand if 20-25 mins means walking time, driving time or food preparation time.
The left screen shows estimated price items and TBD delivery fee; The middle screen shows a store camouflages into the map; The right screen shows a term: 20-25 mins.
My critique for Postmates app

280days

A mobile app to help mothers have a wonderful and assuring pregnancy journey.

Design

I assume most of the users are first-time mothers, who need tips and assistant to make sure everything is on the right track. Moreover, because the target users are first-time mothers, this app has baby avatars talking to mothers, which interactions assure mothers' emotions and help them enjoy the pregnancy. Features are:

  • A. Home
    • Onboarding
    • Baby avatar
    • Tip and encouragement word
    • Weight monitor
    • Schedule management
  • B. Diary
    • Pregnancy record
  • C. Me
    • Mother and baby
    • Share journey
My screen design of 280days app. It has three tabs: home, diary and me.
My screen design of 280days app

Deconstruction and Critique

Deconstructing the screens used in the 280days app
Deconstructing the screens used in the 280days app
  • Their rationale
    1. This app is created by a Japanese company. I guess this company assumes the pregnancy journey consists of a mother and a father. Thus, in the onboarding process, it asks users to choose between Female (Mom) and Male (Dad).
    2. One of the main purposes of users using this app is to assure first-time mothers. Thus, on the onboarding process, this app shows 8 guidelines with cute cartoons, which tells users that how this app helps them go through the pregnancy journey.
  • My suggestions
    1. Proximity: I suggest 280days to display related components closer to each other, which follows Gestalt Principles.
    2. Icon: I suggest 280days to use a proper icon. For example, the icon at the top-left corner doesn't convey well it's for switching to other baby's records.
    3. Localization: I suggest 280days to have an ability to switch for different countries, so they can serve broader users worldly. For example, people are used to using lb rather than kg to calibrate weights in the US.
The left screen shows text and fields are close to each other; The middle screen shows a misleading icon for switching to other baby; The right screen shows kg as the scale for weights.
My critique for 280days app

Google Photos

A mobile app to give people fun experience of keeping and sharing memories.

Design

I assume users enjoy this mobile app for keeping, viewing, and sharing their precious memories. The information architecture is simple but sophisticated enough to fulfill users' needs: album > photo. Moreover, I display the navigation bar at the bottom to minimize the times users change their hand position on the phone. Features are:

  • Video (made by Google Photos)
  • Search by people or object
  • Autoplay
  • Edit photo
My screen design of Google Photos app. It shows videos made by Google Photos and albums at the main page, and users can go further for a specific album and then a photo.
My screen design of Google Photos app

Deconstruction and Critique

Deconstructing the screens used in the Mint app
My screen design of Google Photos app
  • Their rationale
    1. I guess Google Photos shows a photo with a dark background color (and users need two more clicks to see the photo information) is because viewing photos is the user's main purpose while using this app. This is totally different from the Photos app in iOS (version 12.1.4), which shows brief information after clicking an item on an album, then the dark background appears with one more click on the photo.
    2. In order to give users more clear examples of search keywords, Google Photos uses double quotes to distinguish keywords and guiding words. For example, the keyword on the search bar is Search "Rock Climbing".
  • My suggestions
    1. Proximity: I suggest Google Photos to display related components closer to each other, which follows Gestalt Principles.
    2. Icon: In the current design, users can comment in the field at the bottom or an icon at the top. However, the icon Google Photos uses looks more like a message icon. I suggest Google Photos to use an easy-to-understand icon.
    3. Function: If there is only one function in the list, I suggest Google Photos to show an icon or button on the screen to minimize the clicks for users to achieve their goals.
The left screen shows information in between two sets of photos; The middle screen shows a looking-like message icon as the function of comments; The right screen shows one function in the selection menu.
My critique for Google Photos app

American Airlines

A mobile app smooth your flight experience.

Design

I assume this mobile app helps users manage their flights, including the flight schedule, transits, boarding, seats and flight track. From the marketing perspective, I assume American Airlines uses this mobile app to promote their upgraded services and flights. Thus, I especially design a tab containing upgraded service information. Moreover, users can see their mileage at the top of the screen, which encourages them to collect more mileage by purchasing from American Airlines. Features are:

  • A. Flight
    • Share flight
    • Traffic to the airport
    • Boarding and transit information
    • Seat management
    • Real-time flight track
  • B. Info
    • Admirals club lounge (the upgraded service)
  • C. Me
    • Mileage
    • Setting
My screen design of American Airlines app. It has four tabs: flight, check-in, info and settings.
My screen design of American Airlines app

Deconstruction and Critique

Deconstructing the screens used in the American Airlines app
Deconstructing the screens used in the American Airlines app
  • Their rationale
    1. In the onboarding process, it tells users that the notification feature is set up by default (but users can still change it later). I guess American Airlines does this because notifications for passengers are important. For example, users need to know the flight time changed, or they will miss the flight or arrive too early.
    2. Instead of having a tab bar at the bottom, this app shows a drawer menu, where users get a list of functions by dragging the menu upward. It's either because they design this mobile app by carrying web design thinking (listing all functions on a panel), or they have multiple tabs but don't want to obey the suggestion (having at most five tabs on the tab bar) from Apple Design Guideline.
  • My suggestions
    1. Mobile design: I suggest American Airlines to use a text or icon button rather than text only links, which are more like web design.
    2. Verification: I suggest American Airlines to make sure verification is working correctly. For example, I provided 10 digits as my phone number (without any space), but it shows the number is invalid.
    3. Search bar: I suggest American Airlines to lengthen the search bar for better readability.
The left screen shows using text as buttons; The middle screen shows an error message for the phone number field; The right screen shows a short search bar followed by an empty space.
My critique for American Airlines app

Mint

A mobile app to plan and track your money.

Design

I assume users connect this mobile app to their banking and bill accounts, which means the earning and spending are imported automatically into this app. Users focus more on planning budgets and tracking their expenses. Features are:

  • A. In/Out
    • Earning and spending list
    • Available budget
    • Manual entry
  • B. Credit score
  • C. Account
    • Account and bill management
  • D. Settings
    • Budget plan
    • Bill payment
My screen design of Mint app. It shows four tabs: credit score, accounts, in/out and settings.
My screen design of Mint app

Deconstruction and Critique

Deconstructing the screens used in the Mint app
Deconstructing the screens used in the Mint app
  • Their rationale
    1. I guess the reason Mint uses bars rather than pie charts to show the budget is because it's easy to display text with bars. For example, text can appear inside of bars.
    2. I guess the summary panel (monthly earning and spending) shows at the top because it's the place the summary is usually at. Moreover, users can drag down the summary panel for more details, which acts like a curtain. The hint of dragging down the curtain, a bar at the bottom of the panel, is intuitively understood by users. (But I'm not one of them.)
  • My suggestions
    1. Title: I suggest Mint to match the title across pages. For example, the title shows Trends, but I clicked on Spending at the previous page.
    2. Proximity: I suggest Mint to display related components closer to each other, which follows Gestalt Principles.
    3. Label: I suggest Mint to put labels on the pie chart to tell users what the pieces are.
The left screen shows the title: trend; The middle screen shows two bars for the monthly budget; The right screen shows a pie with coloful pieces without labels.
My critique for Mint app

IMDb

A mobile app to follow and see movies.

Design

I assume users want to get ideas of current or classic movies in order to follow, comment, and enjoy in watching them. This mobile app allows users to explore movies and theaters along with their preferences. Features are:

  • A. Explore
    • Search
    • Movie information
  • B. Watchlist
    • Pocket list
  • C. Ticket
    • Theater information
  • D. Me
    • Comment history
    • Share favorite
My screen design of IMDb app. It has four tabs: explore, watchlist, ticket and me.
My screen design of IMDb app

Deconstruction and Critique

Deconstructing the screens used in the IMDb app
Deconstructing the screens used in the IMDb app
  • Their rationale
    1. I guess two reasons that IMDb displays the tab bar at the top rather than bottom: 1) It has the sub menu in each page, so it might be confusing if one menu is at the top and a tab bar is at the bottom. 2) It has more than five tabs, and Apple Design Guideline recommends to have at most five tabls.
    2. It gives movies the rating and the number of people who vote in order to inform the validity of the rating. For example, 7.7/10 (based on 505,925 ratings).
    3. I guess IMDb combines two functions, search and filter, at the same page to satisfy users' different preferences on searching movies without changing functions.
  • My suggestions
    1. Unavailable action: I suggest IMDb to take off buttons which don't work. For example, it shows an error message during logging in with the Facebook account.
    2. Color: I suggest IMDb to use consistent colors on the same components. For example, IMDb has blue and yellow stars for ratings.
    3. Icon: I suggest IMDb to use a proper icon for the button with multiple functions. For example, the icon used in the movie detail page usually presents share, but it has functions: Add to List, Add a Review, Check In and Share.
The left screen shows an unavailable Facebook login button; The middle screen shows blue stars for ratings; The right screen shows a share icon for multiple functions.
My critique for IMDb app

BlaBlaCar

A mobile app to share rides for saving money.

Design

This mobile app is matching drivers and riders. Both can set whom they feel more comfortable to have a trip with. In order to encourage drivers to share rides, the design displays how much money drivers can save as a visual incent. Features are:

  • A. Drive
    • Trip creation
    • Trip information: the rider and route
  • B. Ride
    • Trip search
    • Real-time trip information
My screen design of BlaBlaCar app. It shows Deconstructing the screens used in the planning trips for drivers and riders.
My screen design of BlaBlaCar app

Deconstruction and Critique

Deconstructing the screens used in the BlaBlaCar app
Deconstructing the screens used in the BlaBlaCar app
  • Their rationale
    1. BlaBlaCar shows the disabled button with white text on a light grey background while completing the identity verification process. The disabled button is a signifier, that tells users they need to provide more information.
  • My suggestions
    1. Today: I suggest BlaBlaCar to mark today on the calendar to reduce users' memory load.
    2. Back button: I suggest BlaBlaCar to display a back or cancel button to give users the control to opt out.
    3. Page: I suggest BlaBlaCar to decrease the number of pages for completing a trip-planning process. Thus, users share rides with minimal clicks.
The left screen shows a calendar without marking today; The middle screen shows a screen without a back or cancel button; The right screen shows the leaving location and a next button.
My critique for BlaBlaCar app

Waze

A mobile app to get updated information on the road.

Design

I assume users need updated information while driving, such as the gas station or parking space. The main screen displays a map, which shows information users care about while driving. For instance, accidents or constructions. Buttons locate on the left side, which is close to the driver (driving in the US) when the driver puts the phone between the driver's and passenger's seats. Features are:

  • A. Directions and traffic
  • B. Gas station
  • C. Parking space
My screen design of Waze app. It has a map with a gas station button and a parking space button on the left side of the app.
My screen design of Waze app

Deconstruction and Critique

Deconstructing the screens used in the Waze app
Deconstructing the screens used in the Waze app
  • Their rationale
    1. Waze promotes the car pool service in this app, which is for Waze's another app - Waze Pool. Thus, Waze users can give a ride within this app. (Uber has a totally different strategy - separating Uber and Uber Eats.)
  • My suggestions
    1. Icon: I suggest Waze to use a proper icon or text button to present the feature of reporting the road status. However, users might figure it out after the first try.
    2. Two buttons: I suggest Waze to leave just one button at the navigation bar, since these two buttons work for the same function - changing the voice setting.
    3. Popover: I suggest Waze to allow users to dismiss the popover by tapping another part of the screen. In the current design, users need to click on the Resume button to dismiss the popover.
The left screen shows an orange icon for reporting the traffic status; The middle screen shows two buttons on the navigation bar with the same function; The right screen shows a popover, which is dismissed by clicking on the Resume button at the bottom of the popover.
My critique for Waze app

Getaround

A mobile app to rent cars in neighborhoods.

Design

I assume users use this mobile app (rather than car rental companies) is for getting cars nearby, paying lower rental fee and controlling what exact cars they rent. Since users might use this mobile app while walking or driving, the buttons locate at the bottom of the screen, which are within the thumb range. Features are:

  • A. Before rental
    • Car search
    • Book
    • Car lock/unlock
  • B. During rental
    • Rental time extension
    • Owner contact
My screen design of Getaround app. It shows the map around neighborhoods and users see available car options.
My screen design of Getaround app

Deconstruction and Critique

Deconstructing the screens used in the Getaround app
Deconstructing the screens used in the Getaround app
  • Their rationale
    1. In order to encourage users to turn on push notifications, Getaround uses descriptions with cute images, rather than an alert, and explains what messages users will get from push notifications.
    2. There might be multiple cars in a small area. Getaround uses a three-dot icon to present multiple cars are within a place, avoiding fat-finger mistakes on overlapped icons.
    3. I guess Getaround utilizes the scan feature for reducing human input of entering credit card information. However, not every credit card fits into the card pattern Getaround provides.
  • My suggestions
    1. Price: I suggest Getaround to provide clear price (hourly or total?) to help users make informed decision.
    2. Instant result number: I suggest Getaround to show the result number while using filters. Thus, users can adjust filters according to number of cars they will get on the result page.
    3. Schedule: I suggest Getaround to present the time on the rental schedule, so users confirm the schedule through matching their and car's availability.
The left screen shows a price range but doesn't say it's hourly or a totla price; The middle screen shows the filter page; The right screen shows the car schedule without the time.
My critique for Getaround app

Discogs

A mobile app to manage and enrich your vinyl collections.

Design

I assume users come to this professional platform to look for the vinyl records they love. In order to increase personal experience, this mobile app has a place to show their vinyl collections and to see the vinyl value on the market. Features are:

  • A. Shop
    • Online sales
    • Short clip
    • Information of physical store
  • B. Wantlist
    • Selling notification
  • C. Message
    • Communication with others
  • D. Collection (this is a place where users are proud of)
    • Vinyl collection
    • Market price
  • E. Me
    • Settings
    • Rating and Review
Screen design of Discogs app. It has five tabs: shop, wantlist, message, collection and me.
My screen design of Discogs app

Deconstruction and Critique

Deconstructing the screens used in the Discogs app
Deconstructing the screens used in the Discogs app
  • Their rationale
    1. In addition to five tabs at the bottom, Discogs displays the message button at the top-right corner. It could be either communication is important for users or Discogs follows Apple design guideline, that recommends having at most 5 tabs at the bottom.
  • My suggestions
    1. Mobile app design: I suggest Discogs to include all functions in the mobile. In the current design, users have to jump to the browser app for completing settings, where they need to log in again.
    2. Icon: I suggest Discogs to use a proper icon for the share function to make the feature discoverable.
    3. Price: I suggest Discogs to explain what these three prices mean.
The left screen shows a browser app to ask users to log in again for setting on mobile version; The middle screen shows a three-dot icon for the sharing feature; The right screen shows three prices for estimated collection value.
My critique for Discogs app

Uber Eats

A mobile app to get food without going to stores.

Design

In addition to the convenience of having food without going out, I give people an enjoyable experience of choosing food. Thus, users can see what they, their friends or other Uber Eaters had as references. There is no tab bar in order to simplify the food-ordering process, but users can:

  • A. To see the food-ordering history of themselves, friends, and others
  • B. To order
  • C. To track the delivery
My screen design of Uber Eats app. The screen process is from looking at the ordering history to order and delivery tracking.
Screen design of Uber Eats app

Deconstruction and Critique

Deconstructing the screens used in the Uber Eats app
Deconstructing the screens used in the Uber Eats app
  • Their rationale
    1. In the order detail page, information displays on more than a screen estate. In order to stand out the delivery-tracking feature embedded in the detail, Uber Eats utilizes a subtle animation to get users' attention.
  • My suggestions
    1. Quantity: I suggest Uber Eats to show the quantity of an item above the fold. In the current design, it's at the very bottom of the (long) page. I was confused that I couldn't change the number of an item till I scrolled down to the bottom of the screen.
    2. Done button: I suggest Uber Eats to position the done button closer to the content. In the beginning, I didn't see the DONE button at the bottom (even though it has bright, saturated green color), but clicked x button to go back to the previous page.
    3. Term - booking fee: I suggest Uber Eats to use delivery fee rather than booking fee. Firstly, delivery fee makes more sense to me. Secondly, the delivery fee changes according to the delivery distance, which makes more sense that delivery fee is different in each order case than booking fee.
The left screen shows the quantity at the bottom of the screen; The middle screen shows a done button at the bottom of the screen; The right screen shows a term - booking fee.
My critique for Uber Eats app

Snapchat

A mobile app to enjoy the moments.

Design

I assume users care more about sharing moments of photos, videos or screenshots. For this reason, the first step is adding friends at Snapchat, and then sharing content or communicating through messages. Features are:

  • A. Friends
    • Add friend
  • B. Share
    • Share photo and video
  • C. Message
    • Individual or group chat
My screen design of Snapchat app. It has three tabs: friends, share and message.
My screen design of Snapchat app

Deconstruction and Critique

Deconstructing the screens used in the Snapchat app
Deconstructing the screens used in the Snapchat app
  • Their rationale
    1. Snapchat doesn't have the feature description on App Store, and I guess it's because users use this app by the encouragement from their friends. Thus, what users can do is told by their friends.
  • My suggestions
    1. Back button: the back button after taking a photo locates at the bottom-left corner. By this way, the back button is within the thumb range. However, since clicking the back button goes back to the photo-taking screen, I suggest Snapchat to use a retake button.
    2. Signifier: I suggest Snapchat to give a signifier to notice users to apply effects on photos or videos.
The left screen shows a back button at the bottom-left corner; The middle screen shows no signifier to tell users the way to use effects on photos or videos; The right screen shows the effect options after users click anywhere on the screen.
My critique for Snapchat app

Instagram

A mobile app to share moments with friends and to explore the world.

Design

I assume this is a social platform for photos and videos, and I divide the scope into three tabs: personal, friends, and public. Moreover, sending messages back and forth with people is a way to communicate in the digital world. Features are:

  • A. Me
    • Upload photo/video
    • Share through message
  • B. Follow
    • Browse, like, share and comment on content shared by people you follow
  • C. Explore
    • Discover photo/video
  • D. Message
    • Send message
My screen design of Instagram app. It has four tabs: me, follow, explore and message.
My screen design of Instagram app

Deconstruction and Critique

Deconstructing the screens used in the Instagram app
Deconstructing the screens used in the Instagram app
  • Their rationale
    1. Photos and videos are the points at Instagram, so Instagram uses the screen estate as much as possible. For example, pictures have no margins at the left and right sides.
  • My suggestions
    1. Button - close: In current design, users have to click on the v in the middle, to display the full-screen viewing mode, and then click on the x button at the top-right corner to close a video. Moreover, the color contrast for both buttons are insufficient, which makes users take more time to perceive.
    2. Icon: I suggest Instagram to show more proper icons. For example, I was confused what an icon means while editing multiple photos, but realized that this icon is for editing an individual photo.
The left screen shows an unclear button for closing a video; The middle screen shows a closing icon shows at the top-right corner; The right screen shows an unclear icon for editing an individual photo.
My critique for Instagram app

Starbucks

A mobile app to increase your experience in Starbucks stores.

Design

I assume people use this app to have coffee whether they are in familiar or unfamiliar places. Thus, I design this app, by which people can get coffee in the right place at the right time without spending too much time in the line. Features are:

  • A. Order
    • Nearby store
    • Menu → order → pay → confirm
    • Gift card
  • B. Wallet
    • Payment
    • Gift card balance
    • Reward (redeem for free)
  • C. Me
    • Purchase history
My screen design of Starbucks. It has three tabs: order, wallet and me.
My screen design of Starbucks app

Deconstruction and Critique

Deconstructing the screens used in the Starbucks app
Deconstructing the screens used in the Starbucks app
  • Their rationale
    1. I combine two tabs Order and Gift into one because they have the same function - selling. However, Starbucks might want to promote their colorful and artistic gift cards, so they separate Order and Gift.
    2. I also combine the tabs Order and Stores because they are related. However, I guess Starbucks wants to make the tabs more clear. For example, if I'm a person who is looking for a nearby store, and it's not intuitive to find nearby stores in the Order tab.
    3. Starbucks has the Home tab, which is the first page of this app. Starbucks might want users to get surprised every time opening this app. On the other hand, Starbucks can display holiday promotion here.
  • My suggestions
    1. Unavailable item: I suggest Starbucks to show available items or not allow users to add unavailable items into the shopping cart.
    2. Icon: I suggest Starbucks to show more proper icons. For example, I am confused what the star means when I'm checking the balance of a gift card.
    3. Button - Pay in store: I suggest Starbucks to show the payment QR code after clicking on the Cards tab, because, I guess, users use the QR code for payment more than check their balance. In one situation, using one click (the Cards tab) to open the QR code while paying at the counter rather than two clicks (the Cards tab then Pay in store)
The left screen shows unavailable items; The middle screen shows an ambiguous star icon; The right screen shows two buttons away to open the QR code.
My critique for Starbucks app

© yi-shan tabitha tsai