A Mouthwatering Mobile Experience for South Seattle’s Favorite Cultural Food Festival

An optimized web experience bringing you the unique flavors of South Seattle to your fingertips. Featuring the new PON Passport, a refreshing home page and restaurant browsing experience, and the real people sharing a piece of their hometown. 

Award
Best Design Award Finalist (Informatics Top 3) @ 2023 UW iSchool Capstone Gala

Context
Informatics Capstone Project

Duration
20 weeks

Deliverables
Affinity Diagram Maps
Low to High-Fidelity Figma Prototypes
MVP
Summary Video

My Role
UX Designer

Team
3 UX Designers
1 Lead Frontend Developer
1 Lead Database Developer

Tools
Visual Studio Code
Figma
Canva
Miro
Zoom

Coding Languages
Javascript (React Bootstrap)
Html/CSS

Problem Context

Their residents come from various backgrounds, and this diversity is well-reflected by the plethora of independent, BIPOC-owned small businesses populating the area. This is particularly true for the food industry, such as restaurants and cafes.

71% Non-White Residents

Over 50% are Immigrants

60+ Languages Spoken

40+ Ethnic Groups

South Seattle is a Melting Pot of Cultures 🌍

But There are Additional Challenges for their BIPOC-Owned Small Businesses ⛰️

  1. Language Barriers

  2. Difficulties Accessing Grants and Funding

  3. Limited access to resources

  4. Disproportionate COVID-19 Impact

Literature analysis and stakeholder interviews revealed that these BIPOC-owned small businesses experience a unique set of additional challenges compared to their counterparts. These hurdles make it disproportionately harder for them to continue operating, often putting the representation of local diversity and culture at risk.

Fortunately, There’s Already an Egg-cellent Solution: Plate of Nations

Plate of Nations (PON) is a 2 week-long annual food event celebrating diverse cultural cuisines while promoting independent, BIPOC-owned small businesses in South Seattle.

📙 14+ years history
🍽️ 30+ participating vendors located throughout the Rainey Valley neighborhood
🕒 From late March to early April
🚶‍➡️ Attendees participate by traveling to vendors and ordering exclusive “Plate of Nations sample plates” featuring the vendor’s best dishes.
💼 Run by MLK Business Association and Sponsored by Amazon, etc.

The PON Website: The Most Essential Component to Event Success

Not only is the website its primary form of marketing, but it’s also intended to inform stakeholders regarding event details such as dates, participating vendors, menus, how to attend, giveaways, and event context. Without an effective website, there is no centralized hub for information regarding PON and returning/ potential attendees would not know how to participate.

Their website is organized into five main sections

  • Home

    Home

  • Restaurant Directory

    Restaurant Directory

  • About

  • Press

  • Passport

❌ Poor User Flow

Formatting issues, functionality issues and hidden affordances create friction in the user flow, making navigation awkward and preventing users from completing desired tasks. We imagine the likelihood of users navigating away from the site is high, contributing to difficulties in acquiring new attendees and retaining returning attendees.

!! Broken Links & “404” Errors

Website Analysis

3 Critical Issues with Original Website Design

Though their website is crucial for attracting attendees and the overall event experience, our team’s analysis identified several issues that detracted from the user experience.

❌ Poor Mobile Accessibility

Smaller devices, such as smartphones and tablets, are not supported. Written and visual information are not resized appropriately, making text appear illegibly small and graphics extending well beyond the screen. The site may appear “broken” to users on these devices, detracting from user’s impression of not only the site but of PON itself.

❌ Missing Key Event Details & Lacks Effective Organization

Event logistics are missing, leaving users confused about the intended purpose of the site and PON. The site does not effectively use formatting to organize written or visual information, reducing scannability and making it challenging to find relevant information. This could culminate in the website being less impressionable and the event appearing less interesting to users.

!! Verbose About page, yet no event details

!! Only a long video on Home page with minimal event information

!! Only Parts of Video Showing

!! Inconsistent Layout and Spacing

!! Text is Tiny and Verbose on Mobile

WE HYPOTHESIZE THAT…

Usability issues negatively impacted user retention, user acquisition, and PON’s brand image, contributing to a low attendee turnout 

User Validation

Usability testing Confirms Hypothesis

To gain insight into how PON’s target users were interacting with the website and confirm if our suspicions were true, we recruited frequent PON attendees, South Seattle natives, and potential attendees (self-proclaimed “foodies” and food festival lovers) for usability testing on the original design.

Findings Prove that Usability Flaws Discouraged Attendance

Users expressed confusion regarding basic event logistics and showed visible frustration towards the user interface and navigation. These issues culminated in users expressing little to no interest in the event.

THE PROBLEM IS...

How might the Plate of Nations website be made more accessible so that more attendees will participate in the event?

Defining

User Persona

Synthesizing our secondary and user research, we created a user persona embodying the typical Plate of Nation attendee: a local Millennial who frequents food events is interested in exploring their own/other cultures, and enjoys socializing. This persona helped contextualize the target user’s needs, motivations, and behaviors, and was referenced often to ensure each design choice was appropriate.

Mobile Accessibility

Easily navigable with mobile responsiveness

Goals

Linguistic Accessibility

Information can be understood by screen readers and non-native English speakers

Cultural Representation

Accurately present cuisines and cultures without stereotyping 

Ideation

Referencing Our Market Analysis and Literature Analysis for Inspiration

We Came Up with 25+ Ideas! 🤩

Low Fidelity Prototype

Visualizing Concept with a Low-Fidelity Prototype 

User Research

Concept Validation

Concept validation was conducted on our low-fidelity wireframes. Insights were organized into a color-coded affinity diagram map to organize key insights, pain points, and ideas for improvement from users or inspired by users.

Users Express Approval and Excitement

✅ Increase in visuals and use of color is aesthetically pleasing
✅ Inviting, playful aura
✅ Greater focus on the people (restaurants participating) makes event seem interesting

Main Feedback was Refining Concept’s User Flow

🤔Too focused on building individual “Features” vs. how they come together
🤔Not all relevant information, especially on “About PON” page

Mid- to High-Fidelity Prototypes

Mid Fidelity

Iteration 1

Iteration 2

Iteration 3

High Fidelity

Development Challenges

High-Fidelity Design vs. JavaScript Capabilities

A critical challenge we encountered was recreating our high-fidelity Figma wireframe with JavaScript. Javascript was the common coding language among our team, but its capabilities were limited in perfectly reproducing what we designed in Figma. With no time to formally design another iteration of our high-fidelity wireframe that only includes what JavaScript is capable of producing, our team modified the design as we were coding. We aimed　to keep the functionalities and styling as similar as possible to the Figma wireframe.

Team’s Limited Technical Skills & Reducing Passport Page Scope

Since we did not have a designated back-end developer, it was difficult for our team of mostly UX designers to code a fully functional passport page that stores and retrieves each user’s login and PON passport information from a database as intended. With limited time until the Capstone Expo, we reduced the scope of the passport page to demonstrate its functionality only on the front end.

Final Redesign

A Website that Invites

Home

Key event details, such as dates and what PON is, are displayed clearly to users upon navigating to the site. The “Find Restaurants” button offers a call to action by inviting users to view participating vendors, encouraging user engagement. Mouthwatering images of cuisines, colorful imagery of food, and images of real PON attendees intrigues and welcomes users to attend PON.

Before

After

Restaurant Catelog

Easily browse and search for this year’s participating restaurants by type of cuisine, location, hours, or name. Instead of presenting users with restaurant logos as search results, we showcase the savory images of the PON sample plates that look too good to resist. Click “Visit Restaurant” to see more information, such as the pricing of plates, what’s included, business hours, the chefs, and the real stories behind each vendor.

Before

After

A User Flow that’s Seamless

In under a minute, users can find essential information such as event logistics, participating vendors, PON passport, and about PON. Navigation is effortless.

A Mobile Experience that’s Just as Beautiful as on Desktop

Images and text are dynamic, ensuring that they fit on all smaller screens. All elements are customized to be easy to read and access on mobile. Even without a desktop, the website is functional, impactful, and smooth.

5 Minute Summary Video

Missed the Capstone Gala? Watch the Pre-Recorded Presentation!