Arashi Ramen

Mobile & Desktop Redesign

In 2016, Arashi expanded its business to include online ordering through several food delivery services. With the increase in online ordering, their website’s traffic had increased but remained detached from current trends and difficult for customers to explore and discover new dishes.

Arashi was looking to get their website updated with a modern interface that stayed competitive with the trends and explores ways to offer an effortless experience when searching for the needed information for new and returning customers.

The Challenge

Ramen website with limited readability and functionality

The website was created with limited resources and research so Arashi was looking to expand their research, update the UI, create a customer experience that will increase online orders, and decrease the drop-off rate.

High-Level Goals

Minimize the number of steps for customers to approach online ordering
Create an easy-to-view restaurant menu
Organized the layout of information for easier navigation

My Role

I led the website redesign for mobile & desktop (prioritizing the mobile experience due to the increase in mobile usage during the pandemic.

In addition, I worked alongside a developer as the website was being built out. Due to the pandemic, we had to put the website on pause but will be set to launch soon.

Kick Off

Learning about the customers

User tests were conducted to learn about the specific pain points when visiting the restaurant website on mobile.

Challenges mentioned by customers:

• Menu was obstructed and/or not loading correctly

• Website is uninviting, doesn’t portray a typical restaurant website causing customers confusion and wanting to click out

Early insights from the current website

Discovery

Insights from the competitors

• Home Pages feature top 3-4 dishes and promote unique flavors/broth

• Navigation menus are all easily accessible and placed at the top right/left corner

• Online ordering & restaurant menus are visually consistent and have a clear hierarchy

Define

Addressing our goals

One of the main discrepancies with the current website was that there was no real hierarchy or consistent UI. To address this, I created a sitemap to clarify the high-level hierarchy including the website’s main functionalities.

To ensure each element of the website was easy to follow and free of disruptions from one section to another, I expanded on the sitemap to reorganize the contents and build the skeleton of our intended pages with a user-flow map.

Ideate

The Evolution of The Home Page

Changes between iterations:

• A decision was made to maintain the buttons fixed at the bottom of the screen across all pages of the website so they didn’t pose as a distraction

• The buttons reduced from 3 CTAs to just one over rounds of testing due to the size of the touchpoints and to focus on the most prominently used button for the business

Pen to paper sketches of the landing page

Creating The Visual Design

Integrated the current brand colors with some updates to modernize the visual design
Deep burgundy color to complement the brand colors without being too bold
Typography used was to keep from taking attention away from the imagery of ramen dishes

Outcomes

After several iterations and rounds of testing, we concluded that the following designs improved upon the experience to display clear hierarchies across the website, increase readability, and decrease friction/drop off rate by reducing the number of distractions and engaging them with Arashi’s branding while featuring their most significant dishes

Highlights:

Focused more heavily on visuals
Intentional buttons for accessibility to online ordering
Consistency throughout the UI
Increased readability for restaurant menu

The Good

Clients felt confident implementing the redesign and seeing successful changes in their KPIs

The Bad

Due to the pandemic and another restaurant opening, the development was put on pause

What I’d Do Differently

Utilize more of the nitty-gritty data and metrics of success to define their business goals and the trends/trajectory of the current website to make the overarching design decisions prior to the redesign.