Izakaya Nomad Web Redesign

Redesigning mobile-first for web.

Problem:
 
Izakaya’s website currently has a very long menu design that fits well for mobile devices, but is not responsive to websites. The website is hard to use because every page opens in a new tab, all information is linked to an external Facebook Website, and there is no way to return to the homepage.

How might we create a navigable responsive web design for Izakaya that stays true to its framework so it can attract new customers and maintain its current customer base?

Audience
 
My audience would be foodies who like Japanese cuisine between 16–80. Our persona was Chelsea, a 26-year old female who was checking out restaurants where she wanted to host her birthday.

Constraints:
Time: 3 days, we began ideating on Wednesday morning and had deliverables by Friday.
 
Process:

We started performing a content audit by analyzing each page, content type, url, content description, and external links in an excel spreadsheet.

Our content analysis broke down information by page.

Also, we created a sitemap to break down the information architecture to ensure clarity.

The Sitemap was a great guide to restructuring information.

Our third focus was on an information heuristics analysis. We analyzed the 10 principles of information heuristics and applied them to our site.

Information Heuristic analyses focused our pain points

From our research analyses, we each created sketches, which we adapted into initial prototypes. For a first prototype, I initially created the Home Pages wireframe and brought it to hi-fidelity.

Wireframing brought out ideas for our Home Page
Here is the home page in hi-fidelity including themes.

After converging with the group, each person shared their screens for home page, navigation, and the press page. As a group, we decided on a color scheme and consistent theme that we integrated across all mobile and web screens.

Our final desktop responsive home page, gallery, and press page were consistent.
Our mobile app screens were consistent and complementary to our website.

Process: Personas, flows, information architecture, heuristics, sitemap, content analysis, wireframing, prototyping.

Takeaways:
 
Sitemaps can offer guidance. Creating a sitemap helped us focus restructuring information to reframe the information on the website and import information from Facebook. We were able to understand the content and usability much easier.