Website Redesign: Desktop and Mobile Friendly User Experience
Product Background:
China Queen is a family-owned Cantonese restaurant based in Guatemala City, Guatemala. They were established in 1985 and have exponentially increased their brand awareness over the years. Chinese restaurants are particularly popular in the Guatemalan dining scene, however, most websites in this category are old-fashioned and are not easy to navigate.
The Ask:
Role:
UX Design
Web Design
Visual Design
Skills:
UX Research · UX Process · UI Design · Branding · Website Design · Adobe InDesign · Adobe XD · Documentation
To redesign an outdated website to a modern, practical, and responsive web application for both mobile and desktop users. Particularly, to access information about the menu and their various channels of communication.
They want a website that reflects a modern look to attract prospective clients, as well as retain their regular costumer base.
Approach:
Evaluating user pain points faced while visiting the old website by translating their insights into a new information architecture that will facilitate navigating through relevant content. Updating China Queen's visual presentation into an aesthetically pleasing design, while ensuring to keep the restaurant's authentic essence and upbringings.
Target Audience:
Even though China Queen's customer base is primarily Gen Xers, there is an untapped potential to re-position the brand to a younger generation. Millennials are the ideal target audience since most of them are currently working professionals that tend to eat more at restaurants, they might go to lunch with their co-workers, like to share new experiences, and are present on social media. Through social media scraping, I was able to determine specific metrics for China Queen's Facebook and Instagram pages. As seen in the image below, Facebook has more than 8K followers. The greatest percentage of men and women falling under the desired target audience between ages 25-44. It is also important to note that the target audience resides in Guatemala City, which makes sense since both China Queen restaurants are located in the metropolitan area.
Personas:
After analyzing the target audience, I decided to create three different personas that will help guide my ideation process. The first one is The Explorer, a tourist in Guatemala City. Then we have The Ruler, he works at a bank located in the vicinity of the restaurant. Lastly, The Creator who finds comfort in sharing an authentic family meal.
Journey Map:
The journey map is a helpful way to analyze my users pain points and understand their behavior, right from their awareness of the restaurant to when they finalize dining at the restaurant. Each stage can determine an opportunity to gather consumer insights and re-focus marketing strategies.
User Stories:
Based on interviews and surveys, it was important to set priorities in my design efforts in order to facilitate consumers from obtaining the information needed on the website. I conducted a series of user testing with consumers and people who resembled the target audience. While they naviagate the old website, it was prompted to think out loud and identify areas of improvement. Overall, many people would immediatelty identify the brand as a family-owned restaurant but said it looked outdated and lacked consistency.
Key Insights:
1. Low-quality photography.
2. White space.
3. Misplacement of content information.
4. In need of a mobile-friendly website version.
5. Connecting to social media.
6. Accessing location and phone numbers.
7. Difficulty in updating due to the lack of a content management system (CMS).
8. Since the menu is quite large, it was difficult to navigate through all the options.
9. Lacking an 'About Us' section for consumers to fully understand the restaurant's upbringings.
10. Missing a section for the family menu and a page for the hot pot description.
Visual Design:
Homepage
The homepage did not look inviting and the design components didn't match the restaurant's identity.
Before
After
Lightbox Popup
Welcome window display to greet users for visiting the webpage.
Menu
Aesthetically it was visual dumping and the amount of content overwhelmed the user. There was no structure to the content and amplified confusion rather than coherency. The photo gallery showcased low-quality images.
Before
After
Additional Information
The owner also wanted to include an option for family or catering menus which is located on a separate page. The restaurant also offers services for Hot Pot, however, not a lot of Guatemalans know about it. It was important to include a full description of what it was, the ingredients, and overall experience so consumers to educate themselves and visually see what it includes.
About Us
Being a family-owned restaurant it was important to highlight their upbringings and let consumers connect with the brand. The old website did not include that section and only included a description of their current space offered foe special events.
Before
After
Location and Contact Information
The previous website only included the location for one of the two restaurants. The new website includes Google Maps links for easy access via desktop and mobile users. In addition, their social media accounts are also linked to this page and users are able to easily access them and view their feed.
Before
After