Ginger Cafe
Working with stakeholders to better advance user experience for their mobile & web sites.
For our customers
Ginger Cafe is renown Vietnamese-Thai Fusion restaurant that aspires to keep up with modern times and advancing their user flow and experience for their customers. A team of 3 works together with stakeholders to mockup their website and mobile redesign in order to achieve what our stakeholders and users desire.
Overview
Team
3 freelance UX designers coming together to problem solve a redesign project
Roles
- User research, analysis, & definition
- Visual design & development
- Prototyping & project management
Tools
- Figma
- Figjam
- Storyboard
Final prototype goes here
Through User Research we focused on...
1) Stakeholder's interview and user experience with their own website & mobile site
2) Usability and flow of the restaurant's web & mobile site as a user
3) The web & mobile site's heuristic evaluation to bring a fresh new image to the brand
Interview Takeaways:
-
Many interviewees had difficulty navigating through the navigation bar and different menus
-
The layout of the overall web & mobile site was overwhelming
-
Users were confused about the multiple menu options with duplicate items/how menu was organized
-
Stakeholders and users thought the color palette was distracting and hard to look at as they browse
-
The restaurant name/logo did not leave a strong impression, which relates to the brand's identity
-
Users believe the same information was redundant in all page access, which users and stakeholders deem as unnecessary
-
Users were confused as to why restaurant and website does not have an "Order" or "Take Out" delivery option, limiting ordering options to be in person or dine-in only
Competitor Analysis involves direct & indirect competition such as Quang Restaurant, China Wok, & Wild Fire
In order to draw ideas in user flow, accessibility, and visuals for our web & mobile sites, we did some user evaluation on competitors within the industry. Some are direct competitors, as in they are within the same category and others are indirect competitors, as in the same business only.
Prototyping & Iterations
1) First round of web & mobile site wireframing
2) Reiterating overall visuals & usability of heuristics
3) Creating a whole different web prototype after reevaluating first prototype
Checkout the beginning stages of prototyping, our low-fi prototype!
After our user research, we brainstormed individually as a team and came together to put our thoughts together. We came up with multiple mockups and layouts of what we think would help our users within this app using the research we have done. Below was one of our main mockups we ended up revising for the final.
And guess what? We also did some A/B Testing!
Can you spot what we were testing?
After wireframing and ideating our low-fi prototype, we came across a decision-making obstacle, what format would our users like best and what would make most sense for our user's flow? In order to find a more definite answer, we conducted A/B user testing with our users to decide how we proceed with our product.
Test A tested a grid layout for content and recipes
Test B tested a scrolling layout for content and recipes
Let's all not forget the hard work that went into our user flows as well.
After ideating, sketching, and wireframing, images below are the user flows for each feature we focused on for our users in our recipe app. You can see the in-depth step-by-step users would take from onboarding, browse/search/view, profile set up, and cooking/selecting recipes.
This user flow shows the profile feature along with the shopping list and export process
After all that hard work, we have a mid-fi prototype to showcase iterations
After establishing user flows after low-fi prototypes, we gathered all the information we have learned and wireframed and prototyped a mid-fi prototype. For this prototype, we brought in features, create pathways that would be most beneficial to our users and this product.
And the best for last, our final product high-fi prototype!
We were quite extra and also did an app promotional website. Just to showcase our wonderful final product & idea.
A look at what our app would look like through a mockup promotional website.
What we can do better. Feedback is always key. Our future suggestions & reflections.
After completing this project and its case study, our team got together and jot down suggestion ideas for future mockup, changes we'd want to see, and features we'd like to focus more on in the future.
01
Expand more on accessibility features to meet a broader set of needs for our users.
02
Further explore the community aspect of our recipe app.
03
Add more interactive features and expand more on the creator's features of our app.
04
Explore more of our other features that we didn't get to expand on such as the browse/search and create/post features.
