IA Redesign
Ripley's Aquarium Information Architecture Redesign
Frustrated, Confused and Dejected
Ripley's Aquarium is a central tourist attraction in Toronto. With the COVID pandemic, it's website became a central nexus for visitors, with all ticket sales solely available on the platform. My team and I found that using the website left us frustrated, confused and dejected.
So in a typical fashion, we decided that our frustration could be used positively, through helping redesign the Information Architecture (IA) of the website. My team included Anya Nandkeolyar, Austin Go and Jamal Elkouka. I took on a primary role as a researcher and designer for the team.
By analyzing and redesigning the IA of their website we created a more efficient and effective way for users to interact with the site. By improving user interaction, we believe that this will then increase user engagement with Ripley’s physical and digital spaces in a pandemic dominated world.
Problem Description
After investigating the website, our team discovered that the site contained issues which impacted the website’s UI and it's organizational, navigational and search systems. These included an inconsistent structure of information and a lack of a search function embedded in the site. Additionally, the sites elements were overwhelming and repetitive.
In response to these issues, our team sought to investigate:
In response to these issues, our team sought to investigate:
- The current information structure of the site to determine who the target audience is
- What information is valuable to users
- How we can improve audience/user engagement with the site
Initial Research Approaches
We used three research approaches to determine the usability of the website and what aspects of it's IA needed to be redesigned. These were:
-
Hybrid Card Sort
Through a hybrid card sort, 10 participants were asked to place 20 labels under a set number of categories. The labels reflected the pages on the website and the categories the overall headers. Following the card sort, participants were given a questionnaire. -
Usability Test
A usability test was conducted on 3 representative users. Participants were given a set number of tasks and asked to think aloud as they completed them. With a post task follow up after the completion of each task. -
Semi-Structured Interview
A semi structured interview was also conducted on the 3 representative users before and after the usability test. Participants were asked a number of questions revolving around the IA of the website.
Overall Findings
Our initial research found users had issues with:
Our participants for each study helped guide us for the need to facilitate four key changes within the IA of the website. These are displayed on the right.
Our initial research found users had issues with:
- Categories with similar meanings
- Labels with jargon and ambiguous meaning
- Repeated labels
Our participants for each study helped guide us for the need to facilitate four key changes within the IA of the website. These are displayed on the right.
Preliminary IA Schematic
Based on our research, me and my team created a preliminary IA schematic, displayed below, which dramatically altered the organization system within the website.
Preliminary IA Sketches
Following the creation of our schematic, we illustrated the change in navigation and user interface through a series of low fidelity sketches.
We created three workflows in order to highlight the new features added. The images on the right constitute two of the three, locating COVID-19 Safety Measures and the search function.
We created three workflows in order to highlight the new features added. The images on the right constitute two of the three, locating COVID-19 Safety Measures and the search function.
Secondary Research Approach
Tree Test
Following the creation of our preliminary IA schematic, we tested out our new organization system through the use of a tree test. Ten representative users were asked to complete eight tasks, navigating through our new system.
The overview of the task results are displayed on the right, with dark green reflecting direct success, light green indirect success, orange being indirect failure and red being direct failure.
Below are specific highlights of the data collected.
The overview of the task results are displayed on the right, with dark green reflecting direct success, light green indirect success, orange being indirect failure and red being direct failure.
Below are specific highlights of the data collected.
Key Takeaways
Based on the tree tests results my team concluded that users had two particular issues with the organization system layed out in the preliminary IA schematic, these were:
- Persistent confusion over heading and label names
- Too many levels within headers
Final IA Schematic
The final IA redesign of the website radically altered it's organization. We created labels, removed redundancies and reorganised the entire structure of the header and footer. Following this, we illustrated the newly redesigned IA, most particularly the new UI, through a medium fidelity prototype created in Balsamiq. Highlighted below is the workflow of accessing and using the search function.
The sequential storyboard for the medium fidelity prototype can be downloaded through this Balsamiq Link.
The sequential storyboard for the medium fidelity prototype can be downloaded through this Balsamiq Link.
Evaluation
This project successfully helped me understand and visualise the role of information architecture in displaying and situating information. I gained numerous skills in a variety of research methods, prototyping and wireframing throughout the case study. My background in History helped situate me in terms of research but integrating user feedback and reiterating designs in particular was difficult initially. But over the semester, I was able to adapt and integrate what I learned with my previous knowledge.
