The Challenge
With no functional, easy-to-access online platform for their customers to obtain information or learn more about their cuisines, Jade Sushi Bar is having trouble bringing in new customers, especially since the impact of Covid-19.
How might we rebuild an online experience that appeals to Jade Sushi Bar’s target demographic, while eliminating any shortcomings that inconvenience their loyal customers?
High-level Goals
Create a responsive website that is easy to navigate and read on any device.
Redesign the logo and overall visual identity to reflect a modern and upscale aesthetic.
Ensure the user journey is engaging and tells a good story about the brand and business.
Research
Getting Oriented
Jade Sushi Bar is a modernized Asian cuisine restaurant that has been serving communities in Charlotte, North Carolina for over 16 years. Since the start of the Covid-19 pandemic, Jade had no proper channel to efficiently update their customers regarding changes to operating hours or pared-down menus, nor did they have an online food-ordering system set up to accommodate all the to-go/delivery orders. Taking a closer look, currently their website includes:
- Outdated menu items and prices
- Outdated and almost no images of their dishes
- Confusing menu tabs
- Hours and location
- Phone number
Despite the website’s lack of consistency in colors and logos, it also needs a more structured information architecture to more effectively organize long lists of menu items.
Initial Research Goals
- Discover how to appeal to different customers
- Identify ways to accomplish higher conversion rates
- Solidify approach to best represent Jade Sushi Bar through rebranding
Looking at their competitors
I looked into direct competitors serving modernized Asian cuisines in various cities, as well as indirect competitors serving other types of cuisines but targeting similar clientele as seen below. I also cross-checked how their websites function and respond to different screen sizes and compared their visual viewing experiences.
After collecting industry trends and inspirations, I summarized a couple of takeaways:
- Main navigation items: About / Menu / Hours & Locations / Reservations / Private Events / Take out
- Secondary navigation items: Press / Career / Email Signup / Accessibility / Social media
- Reservation is usually linked to a third party (Resy or OpenTable) or by phone
- Takeout service is linked to a third party (toast, Ubereats, Chowhouse, etc)
- Images are used throughout the website to enhance the visual experience: Homepage, About, Private Events, Menus
- PDF menus are no-go
Digging deeper into the strengths and weaknesses between Jade’s direct and indirect competitors, I uncovered some more useful insights:
Direct Competitors
- The majority of restaurant businesses in this category (pan-Asian or Asian-inspired cuisine) lack clarity and consistency in their online presence, even if they are great restaurants in real life.
- They often display overwhelming or disorganized content on websites, which feels unsophisticated and not appealing.
- Their online presence doesn’t reflect nor represent the richness and diversities those cuisines have in reality.
Indirect Competitors
- Restaurant businesses that serve western cuisines on average are strong in crafting their stories and demonstrate a good balance of content online.
- They branch out in social media channels to help promote their business.
- These websites have a good flow of navigation systems with clean and unobtrusive UI. Less is more proves successful in this case.
Opportunities
It is difficult to introduce foreign cuisines to Americans, as Asian cuisines are often considered less prestigious than Italian or French cuisines. How might we overcome this stigma and create an Asian restaurant with an upscale, appealing, and informative online presence?
Speaking to Users
Due to Jade’s significance to its loyal customers and the neighborhood it serves, It was important to conduct my research through two sets of potential users: regular restaurant-goers and Jade’s loyal customers.
- What draws them to visit different restaurants?
- What aspects are involved when they are looking to learn more about a restaurant or their food?
- How would they improve their experience at their favorite restaurants if any?
- What motivates them to stay engaged when browsing through a restaurant website?
After both sets of empathy maps from our target users were identified, it was evident to connect commonalities in terms of the pains and gains from both groups of users. Despite Jade’s customers being more lenient toward their shortcomings, they recognized areas that could improve their dining and ordering experience.
Gains
Wants the interior & ambiance to align with the quality of their food
Wants to be able to find updated information online
Wants the convenience of ordering online
Needs to see: a functional menu, price, hours, concise background, good photos, food order system
Wants efficiency and quality service when ordering from restaurants
Pains
Frustrating to find outdated or inconsistent information online
Not efficient to place orders when information are not all in one place
Define
Meet Drew & Ashley
Two personas were created to better understand our users’ needs and the difficulties they have experienced. Our savvy restaurant-goer Drew always seeks to find the fastest way to research restaurants of interest and wants to learn about what they specialize in before spending much time digging.
As for Ashley, our loyal customer at Jade, has been hoping for a refresh to the overall experience. She also had a lot of trouble finding updated menus and ordering information online during the pandemic.
Information Architecture
After compiling primary and secondary research, I developed a detailed feature roadmap and sitemap to prioritize and outline development in stages for both desktop and mobile devices. The goal is to be more efficient in communication with the stakeholders and to manage their expectations regarding the project scope appropriately.
The structure of the website is mainly broken down into the main and secondary navigation, highlighting clear calls to action to place an order or book a table, as well as additional services such as recruitment and event catering available. With the Menu page being the most intricate part due to the wide variety of cuisines they offer, I dedicated more effort and time to identify the flow in this section.
In order to gain a deeper understanding of the information architecture in particular to menu items, a quick tree jack study was conducted remotely with 8 participants.
Task 1 : Where would you expect to find private event details? Task 2 : Where would you go if you are looking for specialty rolls?
The results of the study proved that the organization or naming of the type of sushi rolls needed clarification as most participants were unable to locate “Specialty rolls” under “Maki rolls.” After speaking to participants, it was clear that the label “Maki Rolls” is not a commonly-known term.
Based on this research, I simplified the organization of the variety of sushi rolls under “Rolls.“ In addition, I also replaced the label “Specialty Rolls” with “Signature” to help users associate it as a name of a category instead of just a dish.
User Flow
So how does a user move through the website? A user flow helped me map and plan their paths that provide credibility and control. This path also enabled me to see all features necessary to make their browsing process as seamless and efficient as possible.
A customer who is new to Jade
The customer is visiting Charlotte soon with his colleagues and hopes to add Jade to his itinerary and will most likely make a reservation for dinner.
Jade’s loyal customer
The customer is planning to book her birthday party at Jade but will need to see what’s available on the menu first.
Design
Low fidelity wireframing
I moved on to creating layouts and navigation systems for both desktop and mobile versions. In order for the business to increase revenue from mobile traffic, I made sure all touchpoints and interactions on mobile screens are intuitive and designed to engage users.
Mobile screens
With the mobile version, I explored the interaction experience and observed two touchpoints regarding navigation and entering information.
The first touchpoint is on the Menu page, where the users can choose to navigate to a different section of the menu initiated by a dropdown button. After a few iterations, I concluded that by breaking down the trail of content into different frames, we can reduce the cognitive load for the users and simplify the UI at each decision point.
Secondly, through the use of various input interactions on the Reservation page, users can stay engaged, resulting in higher efficiency to the given task.
Desktop screens
On the other hand for the desktop version, the main objective is to coordinate a good balance of visual and written content, clear CTAs, and ensure visibility status for the users throughout.
Branding & Visual Design
As the scope of the project includes re-establishing new brand guidelines and visual identity, I collaborated with the stakeholders through verbal discussions and mood boards before kicking off the branding design process.
Key brand tones & concepts
- Modern but friendly
- Elegant
- Versatile
- Medium-light weight
- Western style with Asian elements
Redesigning the logo
Starting from pencil sketches, I wanted to define a style for Jade that is refreshing, memorable, and not entirely foreign to its current identity. Here are all the options I developed and can see how they can be implemented into their new DNA.
Next, I brought these concepts to a discussion with the stakeholders. After hearing about their concerns, impressions, and feedback, we landed on our final designs.
Followed by these discussions and visual explorations, a comprehensive style guide was then created to organize the color schemes, typography, buttons, images, and card treatments all in one place.
High-fidelity Wireframes
The website is now ready to be outfitted with all the visual assets in place. In this first iteration, I highlighted the importance of communicating the brand through selective visual elements and ensured accessibility and the flow of our main call to action, make a reservation, on all pages.
Desktop prototype
Mobile prototype
Before
- Plain & endless texts
- Lack of images
- Information architecture is unclear
- Duplicated menu items in different tabs
After
- Fully responsive design
- Established brand tone
- Clear information architecture and simple navigation system
- Shows nice images of the food
- Shows testimonials from other customers
Usability Testing
Testing Goals
6 participants and a focused group session were involved in testing the usability, function, and visual appeal of the first prototype for both desktop and mobile versions. The testing goals include:
- Overall ease of use and aesthetic experience while navigating through the user flows
- How users perceive and respond to information architecture and visual hierarchy
- How efficient and easy it is for the user to navigate to other tabs of the Menu (our most complicated section)
- The flow of making a reservation through the built-in form
- Observe any point of frustration or confusion during the process
Participants were tasked with learning about Jade Sushi Bar, navigating through the menu, and making a reservation. In addition to the prototype yielding an amazing success rate, wide-ranging positive feedback was received on all targeted objectives. Many also mentioned that the visuals and clarity of the menu were the biggest improvements and that really encouraged them to place an order.
Priority Revisions
After testing, I used an affinity map to help gather all the insights from our participants. Overall, users experienced confusion when the section title sounded too broad or open-ended. They also expressed the need to easily see the depth of the full food menu at first glance. Key screens below outline the priority revisions I made to address these high-impact concerns.
Homepage
– Removed text and link on hero image to improve accessibility
– Updated carousel navigation buttons also for better accessibility
About Page
– “Our Team” is updated to “Our Restaurants”
– CTA “Dine with us” is updated to “Make a Reservation”
Menu Page
– Dropdown menu under “Menu” available to see all sections for better visibility status
– Lunch & Dinner menu have been condensed to just one and is listed under Entree
– Improved clarity of menu sections
-Updated button options at the end of the menu items as secondary navigation within the menu tabs
Menu Page (Mobile only)
– Updated CTA dropdown button to become more visible
– Breadcrumbs are added as users move further down in the overlay menu
Next Steps
Photography updates
I was grateful to be able to exercise creative direction and work closely with a professional food photographer to capture images of food items, the interior of the restaurant, and the owner’s portrait as part of the rebranding process. Retouched photography has been implemented in the last iteration of the prototype.
Implement a food ordering system
While the task completion was high, the ultimate goal for the online platform is to incorporate a streamlined food ordering system that synchronizes, tracks, and stays updated with any takeout and delivery orders. This shall be executed in the following development.
Development & Hand-off
As of now, we have not yet finalized a platform to best host the website. Further research and stakeholder discussion will be necessary to determine the customization abilities regarding utility and design and whether the cost and labor involved in maintenance are manageable.