SCCDineOut

For an independent case study, I transformed an experience designed to easily locate restaurant and food facility inspection results

Tools

Figma

Timeline

Three weeks

Skills

Design Audit, Synthesis, Prototyping, Journey Mapping, User Personas, Site Mapping, User Interviewing

Role

(Solo) Product Designer and Researcher

Overview

At a glance

SCCDineOut is an app that provides access to food facility inspection results in the Santa Clara County and is recognized as the official app for the county's Department of Environmental Health.

With this app, you can view summaries of health violations, inspector observations, compliance scores, and so much more for any recognized food facility.

The Challenge

To be candid, the outdated and inconsistent design of SCCDineOut hinders user navigation and deters them from utilizing the app.

Solution

As part of a design challenge for Rivian Automotive, I applied methods such as user research and a design audit to uncover any pain points and problems with the app. I then leveraged these insights to redesign the SCCDineOut Experience.

View Final Solution
My Role/Responsibilities

User research, product design, user testing/validation

Process
Getting Myself Familiar

With any redesign, I like to start off by familiarizing myself with the product I’m designing for. This helps me gain a sense of the breadth, so to start, I created a site map to understand and organize the information and page architecture of the app. Doing This helped me visualize the entire user flow more efficiently, and I used this as a reference point when exploring the current user journey.

In addition to site mapping SCCDineOut, I audited the current experience and conducted a heuristic markup to take note of my personal frustrations and delights, and even though I established my own pain points, I withheld these until I was able to meet with users to validate them. So for example, some of the concerns I had with the current experience revolved around functionality and overall structure.

Gathering User Pain Points

The next step in my process was to discover user frustrations apart from my own. Fortunately, I was able to conduct 3 open ended interviews with participants from various backgrounds to gather insights, and as you can see, I had quite a few so I organized my findings onto a whiteboard according to general themes and opportunities.

So, what were users struggling with?

I synthesized my findings into 4 main pain points that were shared between all 3 participants. Apart from an out of date visual design, the first major pain point users had was a lack of direction. For example, upon entering the app, my participants weren’t too sure where the starting point was because there was a blank screen, where it wasn’t until they tapped search, they uncovered the information and functionality they needed. The other pain points include inconspicuous features and unnecessary pages, where users either had a hard time discovering essential information or they found other parts of the current experience, like the information and closures pages, unnecessary.

Pain points
01

Out of date visual design

02

Lack of direction

03

Hard-to-find features and pages

04

Superfluous steps, actions, and pages

Meeting My Persona

I created a persona based on my user insights to help me drive decision making and keep my redesign focused on directly addressing user pain points.

Journey Mapping

I then mapped out the users’ emotional journey with the current experience to help me visualize which stages they were experiencing the most frustrations with.

Insights and Opportunity

The stages that needed more attention were the searching process, obtaining information (such as restaurant and inspection details), and lastly, uncovering features that made the app more personal. Since I had everything laid out in one place, I took this time to identify a few opportunities for these stages such as a new starting point for the app and eliminating superfluous actions.


Doing everything up to this point, I felt I had substantial insights to be able to craft my problem statement, asking:

"How might the SCCDineOut user experience be reimagined to improve its function, encourage discovery, and upswing accessibility for new and familiar users alike?"

Establishing Features

Next, I began ideation by jotting down a few features that aimed to tackle user needs, and I organized these features into themes. Some of these features included having a map view so users can visualize nearby restaurants and search more efficiently, and a dashboard and discovery page to that acts as a starting point and offers users a sense of direction.

Feature Prioritization

I then took the time to distinguish which features would be nice to have but would require more work, and which  features are more more essential to the redesign.

Visualizing the Flow

The following flow was created to help articulate how a user would navigate the app and reach their goals in the new design. The primary user flow is the process of discovery, searching, and obtaining useful information.

Ideate

Bringing concepts to life

I began ideation by focusing on three flows to sketch, which were map and search, discovery, and restaurant information. This is where I illustrated how the aforementioned features would look. These sketches acted as a blueprint that would allow me to bring my concepts to life in the form of mid-fidelity wireframes.

The three flows
01

Map and Search

02

Discovery

03

Restaurant information

Sketches
Mid-Fidelity Prototyping

As shown below, the new flow for SCCDineOut is intended to flow naturally, eliminating superfluous actions and steps. With these mid-fidelity screens I was able to begin user testing.

Usability Test

Gathering user feedback

My next step was to engage with my users to gather feedback on my concepts and identify areas of improvement. I decided to have them test with my mid-fi wireframes to get a sense of how they interact with my designs in the early stages to uncover unexpected needs and expectations.

I had my users perform a series of tasks that include search and filtering, getting restaurant details, etc., and I organized my findings on a diagram according to frustrations and misunderstandings, delights, and new ideas formed.

Key Participant objectives
01

Expand inspection details to get inspector comments

02

Sort restaurant results 5+ miles away in alphabetical order

03

Download full inspection report PDF

Key Findings

Users wanted to see restaurants that didn’t pass (so they wanted to see variation in scores) and have access to more filtering options, there was concern with how the search on the discover page would parallel with the map search, and there were other frustrations like too much scrolling  and confusing buttons etc.

Solution

Finalizing designs

Based on various feedback from users and mentors, I continually iterated my final designs over the last leg of the project. These are the results:

Discovery

Having the availability of featured and nearby restaurants makes discovery easy and offers a sense of direction for users. With user feedback in mind, there is variety in restaurants displayed to include failed and conditionally passed inspections. There is also an added convenience of being able to use the search bar for quick simple search so that you don’t have to switch pages to the map view.

Map and Search

I decided to use a map view so users would be able to visualize restaurants more efficiently and offer an added level of discovery. Responding to user feedback, I incorporated restaurant status and more search and filtering options to enable more control of search based on individual need and organization. I also moved the search bar to the bottom of the page to allow for reachability and accessibility.

Restaurant & Inspection Information

Finally, this is what the restaurant view looks like. To address user pain points, i simplified this page by eliminating unnecessary actions and scrolling by allowing the users to view and download the full inspection report right off the bat, and if they would like to see more details, they would be able to pull up a pop up and view the details that way instead of scrolling.

Finale

Outcome & final reflections

After working on this project for three weeks, I presented this app redesign to the Rivian design team, where I was able to move forward in recruitment.

This was a very stimulating challenge that helped me showcase my creative thought process, and there were many explorations I would have liked to get to if I had more time. At first, this project was challenging because there are so many directions I could have taken and it was very open ended, but connecting with users really helped keep me grounded and allowed me to be driven by insights.

More Case Studies