Role: UI/UX Researcher & Designer
Duration: Jan, 2020 - March 2020
Team Director: Professor David Kirsh & Rob Kaufman
Tools: Figma, Google Suite
In the COGS 187B - Practicum in Professional Web Design class taught by Professor David Kirsh, all the students are self-motivated to find their own clients to collaborate within a real-world scenario. Our group worked with an on-campus fast-casual dining restaurant and focused on establishing a clear branding delivery through a website redesign and UX writing.
Overview
Since March 2019, Soda and Swine UCSD have delivered a level of fast-casual dining at an affordable price - an experience that was previously missing from the UC San Diego campus. As a rising restaurant located in the heart area of the UCSD campus, Soda & Swine UCSD wants to attract more customers with a variety of events and promotions. Based on our research, we noticed that the design of the old website failed to deliver clear and systematic information to their target audiences.
(Before) 1-page design, not attractive
(After) Clear Information Architecture w/ clear navigation, vivid food image for further attraction
Discover and Analysis - Customer Side
The customers of the restaurant are a great source to help us understand the situation and explore further particular needs and questions. By going through field research and interviews, we roughly categorized those customers into three major categories:
Persona 3: Non-Affiliated
Persona 1: Staff & Faculty
Persona 2: Students
Through interviewing and observing target and potential customers, we would be able to learn users’ habits and pet peeves when they try to target a restaurant using the Internet and browsing through the online platform.
User Habits:
Using search engines or third-party websites to locate their target restaurants
Third-party websites navigate them to the restaurant homepage and browse through the page to get further details besides the food pictures and comments from the other
User Pet Peeves:
Unclear description of food and restaurants, and missing detailed menu
Out-of-dated information provides false impression
Too many ads and confusing choices on third party websites
Discover and Analysis - Bussiness Side
Soda & Swine at UCSD does not have a holistic website structure for us to get started. Therefore, the team needs to construct our own structure and information hierarchy to meet the goal of our client and fulfill the needs of the customers. The competitors within the same area of Soda & Swine can be a great material to discover the trends of the market and analyze the actions that other owners take to promote their own branding and activities. The team located five major stores in the local area that specifically highlighted their drinking menu along with a cozy environment for people to enjoy their spare time.
Through detailed analysis of their branding and website content, we were able to form a systematic understanding of the delivery of branding and information via careful content design. The exploration also helped us form a general mood board and website structured outline for our client Soda & Swine at UCSD.
Image is the most attractive and powerful way to guide customers to explore further and stay longer
A consistent color palette and repetitive pattern can enhance the brand information in the virtual browsing experience
The minimalist, simple, and straightforward structure is the most trending style in this major category of stores/restaurants
Up-to-date event information or easier accessibility of event links is the most welcomed feature on most of the website
Promoted events/activities need to take major space/area on the home page along with attractive colors/images that stick with the style and the brand of stores/restaurants
Sketch & Design
Based on our user interviews and competitor analysis, we brainstormed the major structure for the Soda & Swine website to meet the requirements of the customer side while following the major training and structure within the industry. We primarily targeted designing the platform as mobile-friendly to provide a more convenient user experience that matches most people's browsing and searching scenarios in their common life.
By reviewing our client’s specific requirements, we decided to focus on promoting the restaurant’s weekly event and most popular dishes. We aimed to provide clear navigation within the website to provide as much detailed information as we could about dishes and rotating beer tabs and wine.
Iteration and Final Delivery
After completing the frame of website design, we conducted a non-interfere usability test with target users to test the usability of our sites. By going through task-based testing and the speak-out-load process, we would be able to test the efficiency of information delivery on the design idea and information architecture of the website:
Here are several updates we implemented after testing:
Branding delivery becomes clearer on the homepage
Adjust the font size and spacing for a more friendly reading experience
Highlighted multiple featured drinks and food on the home page to attract users to explore further
By iterating the design based on the testing’s feedback, we delivered a brand new responsive website design to Soda & Swine at UCSD. Our client was excited about the final delivery and plans to pursue the design further with the developer. By the time we completed the design hand-over, the pandemic started. Unfortunately, Soda & Swine was not able to survive this global pandemic and was permanently closed by this time.