WEBSITE RESPONSIVE RE-DESIGN

IZAKAYA NOMAD

PLATFORM: WEBSITE

BACKGROUND:

MOBILE UNRESPONSIVE:

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.

CHALLENGE

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?


Meet Chelsea

From interviews and surveys, the user was identified as foodies who like Japanese cuisine between 16-80.  Chelsea, a 26-year old female who was checking out restaurants where she wanted to host her birthday, was the persona fleshed out.


INFORMATION ARCHITECTURE BREAKDOWN

 A content audit was initially performed by analyzing each page, content type, url, content description, and external links in an excel spreadsheet.

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

The third focus was on an information heuristics analysis. 10 principles of information heuristics were analyzed and applied to the Izakaya site.

Information Heuristic analyses focused our pain points.


INITIAL DESIGNS

 From our research analyses, sketches were independently created , which were adapted into initial prototypes. For a first prototype, my role was to create the Home Pages wireframe and bring it to hi-fidelity. 

After convergence, each team member shared their screens for home page, navigation, and the press page. The team decided on a color scheme and consistent theme that we integrated across all mobile and web screens.

Wireframing brought out ideas for our Home Page.

Here is the home page in hi-fidelity including themes. It was updated to our final prototype.


Design Decision


final designs

We adjusted their mobile screens to match their color scheme. Also, we analyzed the outside websites' content and developed a site hierarchy.

Here are the final deliverables: the web-responsive Izakaya site.

Here are the final deliverables: the web-responsive Izakaya site.

RESULTS

Izakaya website's new design would allow people to see each independent page. After testing, users found it much easier to access information and more convenient because every navigation menu item did not pop out to a general Facebook page. Now, Izakaya's information was available and pleasant for a user to see and use.