One Bowl of Ramen Please!

*The following application is a demo built for specialization coursework.

Tsukuru Ramen is Detroit’s one-of-a-kind Ramen Bar and Japanese Restaurant. We have a ramen bowl for every taste palette. Guests can fully customize their bowls from the soup base to the type of noodles, to the protein, and most importantly an endless selection of toppings.

To get the most of a Ramen Bar, Tsukuru Ramen is a restaurant that encourages dining-in, small-to-midsize gatherings, and offers quick eats for the busy city-goers. To bring the Ramen Bar experience for guests on the go, I designed a mobile app to capture the digital ordering experience.

Try the fully clickable prototype (left)! Viewing on a smaller screen? No problem, click here for a clickable prototype.

Marina (19) – Future ESL Teacher

• Elementary Education Major with a Japanese Minor

• Attends a lot of cultural clubs and activities

• Likes to eat out with friends

• Social, not super studious

• Obsessed with Kpop, Asian food, and anime

Takeshi Jun (26) – ABJ The American-Born Japanese

• A junior investment banker in Downtown Detroit

• Parents immigrated from Japan to California and then moved to Michigan during his elementary years

• Flies to Japan every few years to visit relatives and connect with his Japanese roots

• Biker, dog-walker, video-game enthusiast, and food-lover

Dr. Reese Fairhart (42) – The Professor

• Biology Professor, PH.D holder, and department director

• Mother of 3 children, married to another professor

• Passionate about her career and teaching students; colleagues are her second family

• Often buys local made, local produced, and local sourced products; proud Detroiter

• Health-focus, vegan, and marathon runner

Sitemap

When a user opens the Tsukuru Ramen app, there are 2 paths of interaction. The user can either dive in to order food or they can learn about the restaurant and its dedication to providing Japanese authenticity by exploring the pages in the dashed box.

Another unique UX choice was including a Customization page (later renamed Tsukurimashita in design) at the end of putting your ramen bowl together. This extra step is for the user to collectively examine all the choices selected on previous pages and decide which toppings, protein, and tare they want to increase or reduce in their final bowl. This step gives users agency in the digital ordering process that dine-in users naturally have when they’re personally choosing ingredients at the Ramen Bar.

Wireframing

As a UI/UX designer, wireframing is the process I look forward to the most. It is the step where I bridge the strategy and research of the UX with the vision of the UI.

During this step, I focused on ensuring the UI elements were comfortably sized for mobile use and for users to examine each customizable ingredient on the menu.

I also strategized Figma components and variants during this phase. This step accelerated my workflow 2.5x during the mockup phase.

Design Inspiration

Tsukuru Ramen's interface design was inspired by Japanese packaging design and elegant stone gardens. The packaging design gave insight into patterns and shapes that were uniquely Japanese. I selected stone gardens as my second reference because they evoke a sense of elegance and sophistication that can rival many of the upscale restaurants on Woodward Ave, Detroit.

UI Design

A selection of Figma components is shown in the image above. I used variants for creating alternative versions of the same component and to show a state change during animations. The variants were especially useful for prototyping micro-interactions. The illustrations below are hand-drawn using Procreate. These illustrations add the brush-stroke art style often seen in Japanese packaging design. The style was not suitable for UI components but was very well suited for subtle foreground illustrations.

Mockups

High-Fidelity Mockup

• Color, typography, and UI elements styling

• Built asset library to store digital artifacts

• Followed iOS design system comfortable and usable icons

Design

• From sharp-edged image boxes in wireframe to softened, rounded corners in the mockup

• Subtle drop shadows with increased blur range

Usability

• Copy, micro-copy, and labels written for user’s ease

• Tested for realism, look & feel, and experience of using

Animations & Transitions

Features

• Vertical & Horizontal Screen

• Button tap feedback

• Animated status bar

• Button progress

• Natural ease-in, ease-out, slide-in, and slide-out transitions

• Realistic overlays

• Custom animations

While prototyping this application, I focused on creating animations that gave the user a realistic look and feel of how the final product will function. I used smart animation transitions and variants to create micro-interactions. The animated progress bar is also emphasized in the design to show users their location in the Ramen Bowl customization.