Sushi Fuze is a speculative family-run restaurant in the process of converting their single outlet into a chain. This expansion would fill multiple new storefronts in counties adjacent to the original location, followed by plans of spreading further east if the first crop of stores prove successful. The following interactive prototype is the UX/UI design concept meant to serve as the restaurant chain’s new website.
Tools Used:
Sketch
InVision
Marvel
Zeplin
GitHub
Prepros
OVERVIEW
Founded in 1967 as ‘Sushi’ by an entrepreneurial couple, this Mom and Pop business flourished as a local staple for years, but had reached a plateau. They have since passed the mantle down to their three sons, who carry on this family-run business for a new generation. Their tenure had reinvigorated business at the original restaurant, to the point where expansion into new markets became a viable option.
Eventually, they were left with one last issue to be addressed, their weak digital footprint. Any chain worth their salt requires a strong online presence to back it up, and the best method to tackle that was with a new website. This meant designing an online user experience centered on intuitive navigation, up-to-date web standards and best practices, user interface visual hierarchy & grouping, minimizing the burden of working memory (saved user info/favorite dishes), managing and directing user attention, outlining and prototyping targeted user flows based on the needs of varied personas and scenarios, and more. This would also be in sync with their new brand identity, target market and business strategy.
PROJECT PROCESS
1. PROBLEMS
Small Brand Reach
Recognition for the restaurant ‘Sushi’ was limited to a base of locally driven traffic, built up over the years through community word-of-mouth. This support was not a guarantee following the expansion to a multi-location chain,
so a broader appeal became necessary for those unfamiliar with them.
Outdated Website/Poor UX
The old website was a relic, last updated in 1998, and did not meet modern web standards. Lacking responsive design, riddled with broken links, dated UI, and usability issues abound, this website needed to be redesigned from the ground up.
Encumbered Ordering System
A backed up phone line during peak business hours was a frequent issue. This deterred possible customers attempting order placement and increased the potential of human error for swamped employees. An additional method of placing orders, with POS (Point of Sale) software integration, needed to be provided.
2. BUSINESS NEEDS
New Online Brand Identity
To update the restaurant’s appeal with a modern cosmopolitan identity, tapping into a larger customer base, while increasing the digital footprint. The old generic name ‘Sushi’ was swapped out for ‘Sushi Fuze’, to better reflect a contemporary restaurant chain that is host to a fusion of dish types.
Responsive Design/User Flow
To design a site and app that smoothly scaled across a myriad of devices and screen dimensions. Also, developed a streamlined sitemap that minimizes the number of steps required to accomplish a goal.
Order Efficiency and Management
To provide an additional method for customers to request take-out/delivery by implementing an online ordering system. This efficient alternative offers a checkout process with user-friendly task navigation and does not tax the working memory.
3. RESEARCH
Information Architecture and Sketches
First, I created two slightly different maps to outline the navigational layout. The information architecture for the apple watch app served as the starting base, which the second map expanded upon with a little more depth for the general website. I then drilled further down into interface level detail with some brainstorming sketches.
*Apple Watch
*Mobile
*Sketch 1
*Sketch 2
Personas and User Journey
Constructing several character personas as points of reference, I used these summaries to explore the potential needs of users. I then narrowed down to one persona and conducted a user journey to explore their possible pleasure/pain-points, touch-points, and thoughts as they navigate through all stages of the website. This evaluation helped shine a light on potential usability issues I may have overlooked.
Rachel
Details: In a relationship, skydiving instructor, 28 years old, thrill seeker, lives in an unincorporated area.
Quote: “I want someplace that offers light meals for lunch, but can also provide formal dishes for dinner events.”
Notes: Rachel loves the Sushi Fuze branded prepackaged shrimp wraps from the local market, yet she enjoys having meals delivered to as well. Her apartment complex is hidden down a poorly marked side street and is easy to miss, so she would like to track the delivery. She would also appreciate quick access to her favorite dishes when ordering online.
Health consciousness: High
Time constraints: Medium
Meal variety: High
Digital proficiency: Medium
Hobbies: Rock climbing, swimming
Spends most time: Small airport runway
Social networks: Pinterest, Facebook
Adam
Details: Married, brand consultant, 41 years old, quality conscious, lives in the suburbs.
Quote: “I want a dining environment where I can hold business casual meetings with clients.”
Notes: Adam is searching for a new contemporary restaurant that works as an informal public gathering spot with his colleagues and clients. The laid back nature of meeting at the restaurant, as opposed to the boardroom, helps set the tone for the nature his tasks. Yet, Adam remains concerned about accommodating for larger groups and is determined to avoid table wait times that could encroach into the schedules of others accompanying him. Therefore, he prefers to set reservations and place some orders in advance for early evening meetings, taking into account the dinner rush.
Health consciousness: Low
Time constraints: Medium
Meal variety: Medium
Digital proficiency: High
Hobbies: Reading, blogging
Spends most time: Meetings
Social networks: LinkedIn, Google+
Mike
Details: Single, night shift and on-call surgeon, 32 years old, efficient, lives downtown.
Quote: “I want a quick meal I can pick up on my way to work.”
Notes: Picking up a to-go meal is convenient for Mike, since the restaurant is on his way to work. With erratic work hours, an efficient and reliable service are highly appealing traits make Mike a frequent customer. He has very conservative pallet, in that he sticks with only a handful of familiar meals, opting not to explore different dishes.
Health consciousness: High
Time constraints: High
Meal variety: Low
Digital proficiency: Medium
Hobbies: Biking, basketball
Spends most time: Hospital
Social networks: LinkedIn, Facebook
4. DELIVERABLES
Wireframe and Responsive Design
Adhering to a mobile first approach, I wireframed the website and outlined when layout specifications would responsively adapt across device screens of varying dimensions.
UI and Digital Assets
With a UX structure in place, I designed UI and digital assets that adhered to the visual brand identity. After importing these deliverables into a copy of the wireframe, they were lain over the structure and received additional size adjustments.
Interactive Prototype
Finally, I exported the UI assets from Sketch to InVision for prototyping, then transferred to Marvel for embedding purposes. This interactive model can then receive usability testing for additional user experience research and iterative refinements.
5. USABILITY TESTING
Example Navigation Task: "Find something that would make for a nice present."
My front-end style guide remains accessible throughout the design process for stakeholders to review, while my component markup and visual specifications are available to the development team for implementation.