Yum Catering

Year

6.14.2022

Project Type

Logo Design

Role

The final design aims to reduce the friction typically experienced when working within multiple platforms to complete different tasks. By consolidating these tasks into one unified platform collaboration is easier, workflows are more efficient, and projects are more organized.

Overview

A social network for foodies

YUM was created for true foodies, those who love to try new restaurants and keep a close eye on the local food scene. The die hards who organize and categorize their favorite places and love to share recommendations and experiences with friends. YUM curates, personalizes, and streamlines the restaurant finding experience while connecting users to a network of fellow foodies.

Problem

Millennial foodies are frustrated with the current products they use to find restaurants that fit their preferences. While there are multiple apps to solve this problem, none successfully provide users with all the features they want to make a confident decision in one seamless experience. Instead, they flip between multiple apps to search and cross check what they find on the others, which makes for a very clunky and time consuming task.

Solution

YUM integrates and improves upon the most used features of competing products to solve user pain points. Simplifying the process of finding reputable and desirable restaurant options, saving those new finds for future reference, and sharing them with friends.

View Final Solution
My Role/Responsibilities

UX research, UI design, brand identity

Process

Discover

Restaurant finding essentials

Initial research focused on better understanding user’s needs related to finding and saving restaurants as well as measuring the extent to which these needs are held among their peers.

Focus Areas
01

What products exist to find, save and share restaurants?

02

How do users interact with existing products?

03

What are users current pain points with existing products?

04

Which features are essential to find restaurants?

Survey

A survey was conducted on 20 participants to identify which products and features people are currently using and determine which feature are essential to find a new restaurant.

User Interviews

A series of in-depth interviews were then conducted on 5 participants to further identify pain points, frustrations, needs, and desires with existing products to determine how YUM could improve this experience.

Key Takeaways
01

All participants used a combination of multiple apps to find, save and share restaurants

02

How do users interact with existing products?

03

What are users current pain points with existing products?

04

Which features are essential to find restaurants?

05

Which features are essential to find restaurants?

06

Which features are essential to find restaurants?

Competitive & Comparative Analysis

Competitive analysis was conducted to identify competitor's strengths and weaknesses to inform YUM's features and information structure.

Define

Carving out a niche in a saturated market

After conducting user interviews, all the participants responses were synthesized to identity themes, opportunities, and features that YUM could focus and improve upon.

Affinity Map

An affinity map was created to identify high level themes and group similar insights gained from the user interviews.

Interview Synthesis

Using the four hues of the SimpleStage identity as a starting point, I expanded the color palette to accommodate the needs of the platform’s complex dashboard system.

Persona

A persona was built based on the data collected to help drive decision making and keep the product focused on solving users pain points, frustrations, and goals.

Ideate

Cooking up a better experience

To kick-off the design process, quick sketches helped me get ideas on paper to establish which elements were necessary for each screen. A low fidelity prototype was then created for initial user testing.

User Flow

The primary user flow is the process of searching, saving and sharing with friends.

Site Map

YUM's simple information structure makes it easy to navigate and move through tasks.

Sketches

Rough sketches were done to get my initial thoughts on paper and brainstorm new ideas for specific UI elements.

Low-Fidelity Prototypes

Using the feedback and insights gained from research, analysis and sketching, a how-fidelity prototype was created to begin user testing.

Usability Study

A usability study was conducted to determine where improvements could be made and identify new ideas to satisfy user expectations, needs, and desires.

Pain Points
01

Source of restaurant review was unclear

02

Quick save option not available, had to specify which list to save to

03

Emphasis on photos made it difficult to find type of food and restaurant ratings

New Ideas
01

Use color to differentiate YUM's suggestions from a users saved restaurants

02

Remove multi-step process to find social icons and make immediately visible

03

Add a moment of delight to let the user know a restaurant was saved

Design

A focus on simplicity

Drawing inspiration from fine dining restaurants with a focus on minimal yet functional simplicity, the UI design reflect the users desire to have a clutter free, curated look and feel.

Logos
Typography & Color

Solution

A highly curated experience

YUM makes the process of finding a restaurant, saving it for later, and sharing it with friends simple and engaging. It connects people to a social network of fellow foodies and only suggests restaurants that match up with each user's preferences and positively reviewed and rated dining experiences.

Sign In

Intro screen and onboarding

Search

Users land on the map screen after signing in and when opening the app, making searches quick and easy.

Save

After finding a restaurant, users can then save it and add it to as many lists as they'd like

Share

After saving they can share it with their friends or friend groups

Social Feed

Users can follow friends and read their reviews or write a review and share pictures of their own dining experiences

Profile & Lists

Profiles feature a recommendation section where users can add their top rated spots

Discover

YUM recommends restaurants based on a users location, friends, saved restaurants, and their positive posts and reviews.

Problems Solved
01

Integrates all needs into one streamlined experience

02

Suggests more personalized restaurant recommendations

03

Supports social connection and engagement

04

Saves favorites for quick reference later

05

Gives users more flexibility to create specialized lists

06

Provides a source of reputable reviews from trusted friends and influencers

Project Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

My Role

As the UI designer, my role was to use the SS brand as a jumping off point to develop and implement a design system for the product interface.

I also collaborated with Tyler and Garett to solve UX problems during the design process to continually improve the functionality of the platform through more intuitive UI design.

My Responsibilities
  • Color and typography selection
  • Creating an atomic design system
  • Maintaining the component library
  • Iconography design
Team

Tyler Morian & Gareth McDonald
 – Development

Roberto Lucero
 – Identity Design

Madisen Fedo – UI Design

Timeline

March 2021 – August 2021

Challenge

Our challenge was to combine 3 distinctly different functionalities, which are usually accomplished in different platforms, into one easy to use product. These tasks included: sharing projects with clients, communicating back and forth on design iterations, and finalizing designs through bug tracking during development.

Project Goals
  • Build and launch a new product
  • Simplify the project management process
  • Generate recurring revenue through SaaS business model

Research & Planning

How to differentiate in a dense competitive landscape

A visual identity, marketing website, and initial prototype had already been created before I was brought onto the project. These elements served as jumping off points for my research and development of the platform design system.

Design

Establishing a fresh, dynamic, and scalable design system

After I gained a better understanding of how similar platforms used color and typography, the next step I took was to develop a design system for SimpleStage. My goal was to stay true to the SimpleStage name by designing a UI with the following characteristics:

Iterate

Design & Refine

Several flows were iterated on throughout the design and development phases. As we refined each screen/flow and found that certain aspects of the dashboard weren't clear or intuitive enough for the user, we'd work through different variations until we landed on a better solution. I’ve broken down the keys screens below that were substantially re-worked to walk through the biggest changes we made to improve both the UI and UX of the platform.

Solution

Designing a cohesive interface experience for a multi-faceted platform

The final design aims to reduce the friction typically experienced when working within multiple platforms to complete different tasks. By consolidating these tasks into one unified platform collaboration is easier, workflows are more efficient, and projects are more organized.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Impact

Setting a new standard for design projects and processes

Working on SimpleStage taught the team a lot about both UX and UI design. All of which helped to reshape our design processes at Motion Tactic for the better.

Design Impact

Design Systems are now an integral part of our initial design processes. Working on SimpleStage taught me how to develop a design system and why they're important to use on projects at any scale. These are the benefits I found when working with a design system & component library:

  • More efficient when under tight deadlines
  • Easier to collaborate with colleagues
  • Ensures design consistency when collaborating with others
  • Allows more time to solve over-arching problems rather than focusing on small design details
  • Makes it easier to organize and navigate design files

What I would do differently
  • Conduct more thorough competitive research to identify additional differentiating UI features
  • Create user flows earlier on to better understand the platform's architecture to inform better dashboard design
  • Advocated more strongly for user testing at the wireframe stage to identify user pain points before launch

Future Roadmap

SimpleStage is set to launch in late 2021. After launching with an MVP, the team plans to begin user testing to further iterate on the product's design, features, and functionality.

More Case Studies