Gyu-Kaku Mobile App Project
Date: Fall 2022
​
For: Academic module at Northeastern University for the course "Usable Design for Mobile Digital Media"
​
Stakeholders: Gyu-Kaku Japanese BBQ
​
Roles/ Responsibilities:
-
UI/UX Designer
-
Product Designer
​
Tools: Figma, Adobe Photoshop
Download the Project PDF
Link to Video Walkthrough
View on Figma
The Problem
My client Gyu-Kaku Japanese Barbecue (BBQ) is a well-established chain restaurant which aims elevate the dining experience by delivering authentic and premium Japanese meats and other culinary offerings. Their existing app encourages patrons to revist the restaurant by allowing them to earn points and redeem rewards, however, it suffers from confusing navigation, and visual issues that prevent users from making the most out of their services.
The Solution
Through extensive user research, usability testing (KJ Analysis), and iterative designing of wireframes and prototype mockups, I sought to redesign and refine their existing mobile app to improve the user experience.
Initial Research
Persona, Journey Map, & User Story
To begin, I did some initial research into the target audience and general clientele of Gyu-Kaku. It was important for me to pinpoint the specific challenges and goals specifically for someone who would engage with the app. As a patron myself, developing the persona and their journey map was insightful and eye-opening. Following the user story basic template from my Professor's lecture, I filled out key information about my main persona Leo Strathwick.
Design Process
Sketches
Based on my initial research, I began to brainstorm some ideas on how to restructure and improve the existing mobile app screens.
Style Guide
Initial Designs
(High-Fidelity Wireframes/ Mock-ups)
Typically, this would be the stage where we do low-fidelity wireframing without colors, typography, and images so that we can focus on layout and content hierarchy. Unfortunately, do to time constraints within the course, our "wireframes" or mock-ups at this point were required to be high-fidelity, meaning they included color, imagery, and fonts so that we could start iterating right away. Even though the following designs include the visual aesthetics, they were still created with low priority and could be discared if need be after critiquing.
Usability Testing & KJ Analysis
After initially creating some interactive designs for the mobile app, I then developed 2 scenarios for users to follow while they tested out this version of my mobile design:
-
You and 2 friends are out late in the city. You just finished some fun activities but now you’re hungry and it’s cold out. Use the Gyu-kaku app to look for nearby locations and their reviews. Then, book a reservation for a table of 3 tonight at 8:15pm and double-check your reservation details.
-
Your meal at Gyu-Kaku was delicious, but now it’s time to get the check and wrap up. Use the Gyu-Kaku app to earn more points and then ask the server to redeem at least 2 rewards.
​
My 2 testers were given these scenarios as goals to accomplish while navigating the initial design. Additionally, these scenarios were designed with the persona's journey map in mind in order to observe and determine any realistic pain points that the testers would experience while navigating the mobile app.
​
Afterwards, we came together and performed a KJ Analysis (also called "affinity mapping" or "card sorting"). This method focuses on idea generation, prioritizing key goals, brainstorming, and finally forming a consensus on next steps. At the beginning we formed a focus question, such as "What did we learn in our usabilty testing?" By sharing and grouping our thoughts visually we were able to determine the most and least important ideas from the previous testing.
​
​
​
​
The 3 aspects of my initial idea that were the most important were the following (in order of importance):
​
-
UI/ Content
-
Navigation
-
Map Feature
​
What went well from Initial Designs:
-
New navigation system
-
Secondary options for searching (such as map vs. list and filters)
-
Overall content organization & layout was clear
​
What needed improvement:
-
Clarity for reservation system
-
Specific visual enhancements to account for accessibility
-
Bigger font & buttons
-
Better organized text content on specific pages
-
-
Finding certain features & screens more easily
​
​
​
High-Fidelity Prototypes
After extensive feedback from our professor and my peers, the final prototypes were developed. In this stage continued to follow the style guide I made initially to ensure consistency with the existing app's branding. Several minor and major changes were made to page layouts and the final task was to add interactivity to the screens for presentation.
​
You can download the high resolution images of the protoypes below for easier viewing. Click the other links below to view either a video walkthrough of the project, or you can look through the files yourself on Figma.
Learnings & Takeaways
Ideas for Revisions
This was my first course that primarily focused on mobile app design. Some of the previous courses I took for UI/UX included either a mix of desktop and mobile, or were exclusively geared towards desktop design.
The key takeaway I learned from this project was learning the core priniciples of user experience design for mobile devices. Additionally, I was introduced to new techniques such as the usability testing with the KJ Analysis, developing user scenarios, and adding interactivity for mobile prototypes on Figma.
​
By creating high-fidelity screens with an emphasis on implementing best-practices to improve accessibility, I learned how important responsive design is for any growing or well-established brand. Through redesigning an existing app for my client I gained more experience with presenting and explaning how my designs can meaningfully impact the target audiences.
-
While my redesign of the reservation page is still more streamlined and organized than the original version, I believe I can simplify the field form even more, specifically where the users inputs their date with the calendar view.
-
On mobile, this would be difficult to press, especially for users with larger fingers, so it would be more ideal to have the calendar view larger so that it takes up the entire screen in a pop-up window or in a different format altogether.
-
-
On the location screen that shows the list of all the storefronts, I divide the locations first by "near me" and then by US state as they have multiple stores across the US. To make the search less cumbersome and require less clicks, the list should first have a search bar at the top below the toggle for map vs. list, and then show a filter for "near me" or "recent". Then, instead of subcategorizing with accordion drop-down menus by country (US), then state, then location, it should just show a list of all the locations alphabetically by state, then town or prefecture, etc.
-
For example, the list would first start with all the storefronts in California, and organized by which city or town in California like Beverly Hills, then Brea, then Burbank, and so on and so forth.
-
-
While the overall styling, such as color palette and imagery, are compliant with the current branding of the company, I believe the aesthetcis of my designs such as certain field forms and buttons could be improved so that they are more clean, elegant, and modern.
-
Right now all of the design elements feel a bit basic and square, and could benefit from more visual flair like rounded edges, blurring, or even subtle patterns in the background. The general look and feel of the app is serviceable but not necessarily memorable and I would endeavor to make more changes in this regard.
-