Ruan's China Kitchen
Timeframe:
5 Weeks
Role:
UX/UI Designer | Researcher | Marketer
Tools Used:
Figma & Photoshop
Project Type:
Website Redesign
Project Overview
Ruan's China Kitchen, a locally-owned Chinese restaurant in Oak Lawn, Illinois, was struggling with their digital presence. Their website was outdated, relied heavily on third-party ordering systems, and provided a frustrating user experience that was deterring potential customers from ordering online.
Deliverables
Heuristic Assessment
Cognitive Walkthroughs
User Persona
Competitive Analysis
Information Architecture
High Fidelity Mobile & Desktop Prototype
The Problem
Ruan's website leaves customers frustrated, overwhelmed, and scared to order from this business due to a lack of system feedback, along with an outdated design, and a heavy reliance on a 3rd party vendor that displays a jarring amount of content.
The Solution
A complete website redesign that integrates ordering functionality, improves user feedback, modernizes the interface, and creates a seamless one-stop experience for customers.
Research & Discovery
To get a general idea of Ruan's China Kitchen's existing site, I conducted a heuristic evaluation using Nielsen's 10 Usability Heuristics. I also conducted cognitive walkthroughs with 4 participants—in various age groups—to see how users are actively engaging with the site. From the data I gathered I then pinpointed user pain points to guide my redesigns.
Heuristic Evolution Usability Issues
Poor System Feedback
To get a general idea of Ruan's China Kitchen's existing site, I conducted a heuristic evaluation using Nielsen's 10 Usability Heuristics. I also conducted cognitive walkthroughs with 4 participants—in various age groups—to see how users are actively engaging with the site. From the data I gathered I then pinpointed user pain points to guide my redesigns.
Research & Discovery
Users had no indication of system status or order progress
Third-Party Dependency
Critical functions redirected to external sites with no return path
Outdated UI
Users had no indication of system status or order progress
Content Organization
Information was cramped and poorly structured
Missing Functionality
No clickable phone numbers, addresses, or help options
Cognitive Walkthroughs
Person 1: Age 65
Sex: Male
Class: Upper-Mid
What Worked:
- Website is simple
- Maintains locally owned business persona
- Tabs on page are easy to understand
What Didn’t Work:
- Website is hard to navigate, due to a majority of
the buying process is on a 3rd party site
- Relying on 3rd party site
- Content is not used efficiently
- Little content
- Content that is shown is very condensed
making it hard to process
- No aid to new users
- No help functions, guidelines, feedback, or options
for escape
- Menu has too many options
- Little Visual Elements of items
- Portions sizes of products are unclear
- Buying process could be easier to follow
Person 2: Age 30
Sex: Male
Class: Middle
What Worked:
-Site is relatively easy to read
- Labeled sections
- Clear menu
- 3rd party site ordering
straightforward
- Resembles local owned
persona
What Didn’t Work:
- Website isn’t secure
- More of a launchpad rather than a website
for a business
- Content needs to be more organized
- More visuals
- More website aided help in the buying process
- Little feedback
- Options for escaping/ returning back
- Lack of clickable links
Person 3: Age 27
Sex: Female
Class: Lower-Mid
What Worked:
-Appreciated that it resembles a locally owned business
-Noticed the days/hours are inconsistent
-Checkout was smooth
What Didn’t Work:
- Noticed the website is visibly outdated
- Menu page is a “turn off”
-Content on the main page is too cluttered and small
-Promotions page isn’t needed
- Desired a one stop experience
- 3rd party site is too cluttered
- Too many options with little descriptions and imagery
- No escape to main page
-No reviews
Person 4: Age 21
Sex: Female
Class: Lower
What Worked:
-Checkout was smooth
What Didn’t Work:
- Noticed some flaws in the minor UI Design
- menu leads to an (external site)
-3rd party site doesn’t match the aesthetic of the main site
-3rd party content is too much all at once
- Portion sizes are unclear
- 3rd party site is too cluttered
-Too many options with little descriptions and imagery
-There was little indication as to how a pickup order works
-Could not manually search for items via search bar
User Pain Points
Based on my heuristic evaluation and the cognitive walkthroughs, I came up with 3 pain points to address in the redesign of Ruan's China Kitchen's website. These pain points cover the general problems people were initially having with the website.
Frustration with Navigation
Information Overload
Lack of Guidance
Defining a User
Before moving onto the ideation phase of this project, I generated some user personas. These persona's aim to represent the average demographics of real people ordering from Ruan's China Kitchen.
Primary Persona
Mark Blinder
Age: 46
Location: Oaklawn, Illinois
Occupation: Director of Sales, PTA Member
Middle Class
Education: Bachelors degree in Sales
Tech Comfort: Moderate, comfortable with apps and new technology
Goals & Motivations
Primary Goals
Find quick family meal options
Navigate website easily
See customer reviews of food
Complete simple buying process
Order status tracking
Current Pain Points
Frustrated by complex ordering process
Needs clear system feedback
Wants reliable pickup timing
Secondary Persona
Michael & Emily
Age: 33-year-old male | 29-year-old female
Location: OakPark, Illinois
Occupation: Therapist | Marketing Associate
Education: Masters in Psychology | BA
Tech Comfort: High Proficiency
Goals & Motivations
Primary Goals
Find affordable meals after long work days
Quick food delivery
Support locally-owned restaurant
Explore new dishes
Current Pain Points
Needs clear system feedback
Wants reliable pickup timing
Competitive Analysis
With my person's generated, I then focused on how I wanted the new iteration of the website to look like. To start, I conducted a competitive analysis of similar restaurants around Ruan's China Kitchen. I specifically looked at the UI design components and how they could be further improved and implemented into Ruan's own website.
Competitor Pain Points
Based on my competitive analysis, I gathered pain points in the websites of Ruan's competitors. These pain points are the focus for solutions to improve Ruan's own website and further better promote the brand.
Over Reliance On Third-Party Apps
Sites Are Not Mobile Friendly
Outdated User Interface
Ruan's Opportunities
Direct Online Ordering System
More User Personalization Opportunities
Update User Interface to Modern Standards
Beginning Design Stages
After I conducted the competitive analysis, I then went into the design process. To start I designed out the existing information architecture of Ruan's website to see how users are navigating the website in their buying process.
Medium Fidelity Prototyping
Ruan's existing website is somewhat low in fidelity compared to the modern restaurant website. I went straight into medium fidelity prototyping to see what the website would look like with more updated UI. I designed both desktop and mobile interfaces.
Desktop Screens
Mobile Screens
Successes
-imported many items to main site
-created improved UX providing system status and user feedback
-organized content for easier navigation
-maintained retro UI preserving local business feel
Areas for Improvement
-UI readability
-UX flow during the buying process
-Implementing more feedback for users
User Testing
To see if my medium fidelity iterations of Ruan's website were usable, I tested 3 users ranging from ages 18-22. I asked them to pretend to order a meal and see if there are any major flaws with the overall flow of the website.
User Feedback
User 1:
-App reminds them of a locally owned restaurant
-Readability issues with the text
-some of the text alignment is questionable
-still slightly outdated
-appreciated a one stop experience
-liked the idea of order tracking system
User 2:
-Feels Retro
-Readability issues
-UI needs to be more modern
-doesn't seem like a real restaurant
-appreciated the imagery of the food
-liked the ability to search
-accounts for loyal customers
User 3:
-Appreciated the less modern look
-Readability issues with the text
-color choice is outdated
-appreciated a one stop experience
-liked the idea of order tracking system
-wanted some feedback for potential user mistakes
Updating UI & UX for a better user experience
Make the website more readible
Keep the essence of a locally owned restaurant while also updating slightly
High Fidelity Prototypes
I used the feedback in my user testing to create the final iterations of an updated Ruan's China Kitchen website. I remembered that the main purpose of this redesign was to improve the user experience and lead users down a happy path. While the UI was also important, I wanted my final high fidelity prototypes to include some constraints and system feedback to keep users from getting lost in the site.
High Fidelity Desktop Screens
High Fidelity Mobile Screens
Improvements
I designed my high fidelity prototypes with the feedback that I got from my user testing. I updated the UI by changing the color scheme completely. I also made the text more readable, while also keeping the website reminiscent of a locally owned business. I also implemented user feedback to ensure users are staying on the path to success.
UI Design
-readability improved by utilizing different colors to emphasize text
-modern ways of navigation
-imagery of food
-use of buttons and drop shadows for depth
-improved layout and hierarchy
System Feedback
-feedback for users who may make a mistake in the buying process
Key Design Solutions
Improved UI to Modern Standards
Updated Typography - more readable fonts and better hierarchy
Color Accessibility - Improved contrast ratios further improving readability
Visual Consistency - Standardized spacing between content and text
Implementation of System Status
Order Process Tracking - Clear indication of user order status
Confirmation Messages - Improved communication from business to user
Organization of Content
Logical Menu Structure - Categorized menu items by type
Visual Hierarchy - Clear headings and sections
Efficient Space Usage - Better layout with included white space
Focus Information - Centralized stimulus for a user to comprehend
Enhanced User Feedback
Error Prevention - Form validation and added constraints
Help Documentation - Help button to communicate with business
Contact Options - Clickable phone numbers & addresses
User Guidance - Tooltips and contextual help to keep users on a happy user journey.
Reflection & Next Steps
What I learned
Research Insights
The user testing revealed critical pain points that were not obvious when I was designing
The Heuristic Evaluation provided a structured approach to identifying user issues within the existing website
The cognitive walkthroughs uncovered real user frustrations
Design Decisions
Balancing modern standards to UX/UI design and brand identity
Mobile considerations for users viewing website on different devices
Text and color affect the readability of content
Future Improvements
Additional User Feedback
Implementation of wire framing
User testing on final prototypes for usability improvements
Thank you for looking at my case study! If interested, make sure to check out some of my other works.
-Jacob Schmidt
works.
