Fishs Eddy - Website Redesign Case Study

Video: Fishs Eddy Redesign Case Study Prototype

Overview

Timeline
Two Weeks
Platform

Responsive Website

(Desktop)

My Role

UX Researcher

Information Architect

UI Designer

Tools

Sketch

inVision

This is an individual case study focused on the information architecture of Fishs Eddy's website. I researched the current website heuristic and information architecture and conducted different types of usability tests to understand user's mental model to create a new sitemap and user flow. And then, I redesigned the current website into a site with clear structured navigation and intriguing visuals that better represent Fishs Eddy's characters.

Methodology in Use

Research
Heuristic Evaluation(Abby Methods)
Competitor Analysis
Comparator Analysis
Information Architecture
Ideation
Open Card Sorting Test
Closed Card Sorting Test
Sitemap Revision
User Flow Revision
Tree Testing
Design and Prototype
High-Fi Prototype
Usability Testing

Research & Analysis

During the research phase, I analyzed Fishs Eddy's competitors and comparators, as well as conducted a detailed heuristic evaluation on three different pages of the current website by applying the Abby method. I found the major problem areas fell into the site's findability, communication, controllability, delightfulness. The current navigation is complicated for users to find products while the language in-use causes further confusion.

I sent out closed and open card sorting tests to understand how users categorized navigation items and where the language confusion was. The 20 user responses and comments informed a new navigation structure and user flow. The tree testing validated my revisions and led me moved forward to the design phase.

research infographic
Figure 1. High Level Research Steps and Results

Sitemap

I analyzed the current site's information architecture, and revised based on card sorting results to create a final revised sitemap. I reorganized items into primary, secondary and tertiary navigation and edited on the wording choice. And then, the new site information architecture was sent to tree tested.

User Flow

To better demonstrate how users could find New York City related products online, which are the main selling point of Fishs Eddy, I created a before and after users flow.

Design Outcomes

In the high-fidelity wireframes, the changes of primary, secondary, and tertiary navigation made in the sitemap were adapted. I also replaced the home page images to one that better represent the character of Fishs Eddy. I made visual edits on the payment process that reflected the new user flow, as well as added the logo in the payment pages to increase the website's credibility. I received postive feedback from users during the usability test.

hi-fi wireframes in order screenshot
Figure 2. Fishs Eddy Website Before vs. After
hi-fi wireframes in order screenshot
Figure 3. Fishs Eddy Redesign Visual Flow - Buy a NYC mug

I conducted one round of usability tests on the high-fidelity prototype. 4/4 users succeeded to complete a purchase of New York City related products. Users said the language used in the navigation was clear and the home page images were consistent with their impression of Fishs Eddy's business.