Case Study
Mobile App Redesign
Overview
The exercise serves as a deliverable for the Rivian Design Case Study - which involved critically analyzing the “SCCDineOut” mobile app to make it more organized and easy to view, and thus making it more accessible and informative for users. SCCDineOut is an official mobile application by the Santa Clara County Department of Environmental Health that provides access to food facility inspection results within Santa Clara County.
While the app is not the most visually appealing, there is no doubt that it provides some very important information. For the redesign, I have focused on features such as search page, favorites and onboarding that will make the application easier to understand, improve navigation and increase personalization - resulting in a far greater user experience.
Type: Individual Project
Duration: 2.5 weeks
Tools and Methods: Interviews/User Testing, Affinity Map, Procreate, Figma, FigJam, Photoshop
Design Process
A sketchy depiction of what the process looked like - covering each of these in the next sections.
1. Initial Observations
Initial understanding of the app -> Marked the confusion points
Non-intuitive
Objectives of the app are unclear, forcing the user to read through the description on the App Store.
Inconsistent with the laws of UX
The app does not follow the UX principles - such as hierarchy, accessibility, context or providing control to users.
Information load
Information that can easily be presented in the form of an interactive visualization or bullet points is presented as long paragraphs of text.
Misses the Target Audience
A USDA report found that millennials dine out over 30% more than other age groups combined.*
Millennials have a short attention span and are digital natives - they prefer personalized experience and cohesive visual identity in products, something that the app fails to offer.
2. Research
I tested the app with 3 friends, who have never heard of it, but were kind enough to think out loud while walking through the app. In addition to their thoughts and my ‘Whys’ about each interaction and page, I grouped the data to think through the features that I need to work upon.
Quotes from the interview and my notes showing a list of Why’s for different pages
Grouped the user testing data under broader categories of pages. Some stickies have stamps such as ‘dislike’, ‘question mark’ (representing why) or ‘eyes’ for a key opportunity.
Key Insights
Search should be reinvented
Although it’s part of the exercise, it was one of the major confusion points
Onboarding screens can be life-saver
Participants (including myself) struggled to understand the purpose of the app without looking at the Play/App store for detailed description.
‘Favorites’ feature can be a lot more than just that
We generally prefer our go-to-places unless feeling adventurous. Not only the food facilities should be easy to enlist as favorites, this feature can easily be the ‘most used’ amongst users.
Not every feature has to be a separate page
‘Closure’ can be well integrated within the homepage while ‘Info’ and ‘Contact Us’ can be combined together to simplify the app structure.
Information load should be addressed
Instead of providing chunks of text, information should be well laid out considering hierarchy in mind
3. Ideation
In the ideation phase, I brainstormed on multiple concepts using virtual white-boarding tools like FigJam. I started out by laying out user goals and task flows, and asking questions for each screen (such as why does the homepage has to be empty or why does the user need to know observations for each violations?)
A rough sketch of task flows and my thought process while ideation
After taking into account the task flows, I started to think about groupings of bottom tab and below are the proposed changes:
Search -> Call it ‘Explore’
Closure -> Integrate it under ‘Explore’
Favorites -> Remain ‘Favorites’
Feedback -> A separate page called ‘Contribute’
Info and Contact -> Combined both under ‘More’
After bottom tab, I started ideating on each page and what should be improved respectively:
Search page -Make it easy to look for food facilities around and offer an overview of the inspection results and score on the home screen itself
On-boarding - discusses the features of the app while also briefly explaining the placard color and compliance score
Favorite page- Propose the feature of giving regular updates on favorite facilities to the users
Combine the detailed info (glossary) page with the contact info of the department
Have a separate page of giving feedback within the app itself
Lo-Fi Mockups
4. Final Prototype
On-boarding Screens
Key Features
Filters
The ‘sort’ feature has been replaced by the ‘filters’ so that user can filter options based on inspection results as well as score. The only option available within the score is ‘Above 90’ to avoid paradox of choice.
Inspection Details
The details are laid out in card format to avoid information load. Users will see the most latest info and can swipe right to view other inspections.
The card contains the info about the date of inspection, inspection type, result and only the list of violations (without the observations).
In case the user wants to view more details, they have the option to download the report.
Search
The map on the home screen serves the following purpose:
Allows user to look for nearby restaurants
Zoom in and out of the map to ‘search the area’
Gives an overview of the food facility (how far it is, the placard color and compliance score)
Additionally, users can also search using the search tab by feeding the name of the food facility, neighborhood or pin code within the Santa Clara County.
Auto Suggestions
The app currently provides a list of options after the user has clicked on search. Instead the feature has been redesigned to provide immediate suggestions in a dropdown while the user is typing (a common practice for search)
Favorites
The workflow for selecting a facility as favorite has been simplified with a heart icon on the detail page.
Favorite page can be accessed via bottom tab and shows a list of facilities selected by the user. There are options of getting regular inspection updates about the facilities or deleting the facility from the list.
Click on the prototype to experience SCC Dine Out
Takeaways
There are always more ways (keep thinking) - I tend to think about one option if that is resolving the problem but in this exercise, I realized that there are always better ways. I thought about multiple ways of providing information on home screen such as suggesting the restaurants instead of a map or just providing a list of nearby facilities. So, I considered pros and cons of all options before singling out on one.
I should illustrate often - This is the first project where I designed illustrations, and I feel illustrations add an extra oomph to the product. I’ll be doing it often!
Illustrations designed for the project… Happy Illustrating!!