Project Details
The goal: In 8 weeks, analyzed Ripley’s Aquarium of Canada website and redesigned its information architecture based on the results from usability testing, card sort, and tree test.
Platform: Website
My Role:
Designed and conducted interviews and usability tests
Analyzed website’s content, context and users
Established and ran card sort and tree test
Made recommendation to the website’s IA
Methods used: competitive benchmark, usability test, card sort, tree test, schematics, prototype
Tools used: Optimal Workshop | Balsamiq
Teammates: Anya Nandkeolyar | Jamal El Kouka | Shahroz Zaman
Brief Overview
Ripley’s Aquarium is a tourist hub in Toronto
Its website aims to promote and provide information on the Aquarium
Since COVID-19 pandemic, it also act as a platform for ticket bookings & virtual experiences
Analysis of the Content
Top-Down Approach:
8 main menu items in the global navigation
Up to 4 navigation levels
Accessible from any page due to floating banner
Inconsistent header click ability
Ripley's logo used to return to the home page
Website’s default 100% zoom view cuts out elements depending on device’s screen
Search bar is not available
Most pages load within the same site, except online gift shop
Bottom-Up Approach:
Inconsistent breadcrumb trail
Live-chat function
Website contains a footer that is consistent across all pages and contains quick links to most visited features
Representative Users
We identified tourists who reside in Greater Toronto Area as the intended users. This is because given the pandemic situation and restriction, people are more likely to seek entertainment locally.
We further narrowed this down into two groups and recruited three participants for the interview and usability testing.
All participants identified as tech savvy and used website as well as mobile apps on daily basis.
Interview & Usability Test Result
Through our research, we discover the needs for:
Card Sort Study
Overview
Result
We found that participants were confused with….
Preliminary IA Schematic
Based on our card sort, we combined similar categories (Programs and Group+Events), renamed ambiguous labels (details below), added important label (COVID-19 Safety Measures), removed repeated labels (e.g Virtual Tours and Online Gift Shop), and added a search feature.
Changes are displayed in the preliminary IA schematic below.
Original IA Schematic
Preliminary IA Schematic
Preliminary IA Sketches
Based on our preliminary IA schematic, we redesigned three task flows which can be seen through the series of low-fidelity sketches below.
Tree Test
Overview
Afterward, we conducted tree test to further investigate whether the changes made were efficient and if there were further fixes that should be done.
Result
Tasks were considered successful (indicated by green-colored-border) when it had a success rate of 90% and above, and a directness rating of at least 50%. Out of 8 tasks, 4 fell under this, showing that our proposed redesign schematic for these labels was effective.
On the other hand, the other half with a directness rating of less than 50% was regarded as failed (indicated by those with "red-colored-border) and thus they were identified as areas that needed to be improved.
Summary of Card Sort
Final IA Schematic
By synthesizing our research result, we further reordered the main menus based on the F-shaped pattern (the most important being on the left), added new menus (e.g Conservation and About Aquarium), renamed ambiguous labels, and removed redundant levels.
Changes are displayed in the final IA schematic below.
Preliminary IA Schematic
Final IA Schematic
Medium-Fidelity Prototype
Based on our final schematic, we turned the previous task flow into mid-fi as illustrated below.
Summary of Findings
Based on our study, we would like to recommend the following for Ripley’s Aquarium of Canada website:
