CanadaFlowers.ca
Website Redesign
Re-draft of the chief aspects of the website using the knowledge and practice of
information architecture (IA) principles.
Project Overview
During the Master of Information program at the University of Toronto, I participated in a project to apply user-centric methods to address information architecture problems on a chosen website Canadaflowers.ca
About
CanadaFlowers.ca is a ecommerce platform that specializes in flower bouquets and gift baskets within Canada and abroad.
Problems
Organization System
Labeling System
Navigation System
Search System
Goal
-
Identify issues with existing platform
-
Redesign prototypes to demonstrate a better information architecture schema.
Principle & Method
-
Cognitive psychology, Industrial design, Systems analysis, Human-computer interaction(HCI)
-
Card sorting, Tree testing
Usability testing
Role
Team Co-lead
UX Research
UX Content
UX design
Tools
Figma, Balsamiq
Canva, Miro,
Optimal workshop
01 The Problems
1
Organization System
-
Duplicated and redundant categories
-
Category content is poorly organized and cannot be filtered
2
Labeling System
-
Labels and icons do not correspond to category contents
-
Labels are not always relevant or clear
3
Navigation System
-
Site levels are too high, taking longer time for users to find the needed info
-
Easily for users to get lost
02 User Research
At this stage, we conducted user research through user interviews and usability tests( 5-second testing, think-aloud with tasks) with 3 users.
Let's meet Andy, Will, and Rina! See what do they have to say about their experience with CanadaFlowers.ca
.png)
Andy, CA
"Why do I need to check-out separately if I want both items to arrive on the same day?"
Will, NY
"It's like I am buying a mystery box."
Rina, CA
"How am I able to convince myself to purchase when there is just one picture available ?"
03 Card Sorting & Tree testing
After gaining insights from users, we conducted card sorting and
tree testing to evaluate the labeling, hierarchy, and information architecture of the CanadaFlowers Website.
After 2 rounds of card sorting and 2 rounds of tree testing, we were able to identify more problems and structure the site in a more cohesive way
Below shows the Information Architecture(IA) schema diagram during the 4 stages.
Stage 1
IA Schematic Diagram
Stage 2
IA Schematic Diagram After Usability Test + Research
.png)
Stage 3
IA Schematic Diagram After Card Sorting
.png)
Stage 4
IA Schematic Diagram After Tree Testing
.png)
04 Prototype & Solution
Now, I am going to walk you through the final high-fidelity prototypes along with the Before & After comparisons.
Problem I Redundant Categories
<Before>
.png)
<After>
Clear and Structural Category &Organization
Problem II Unable to Filter & Search effectively
<Before>
.png)
<After>
Filter & Sort Function to navigate Easily
Problem III Confused Icon with Single Picture
<Before>
.png)
<After>
Clearer info with multiple pictures
06 Final Thoughts
As the team co-lead of this IA project, our team applied principles such as of cognitive psychology, industrial design, and human-computer interaction(HCI) to a real website system, CanadaFlowers.ca,
We improved its existing IA schema through secondary research mining, card sorting, tree testing (optimal workshop), to various phrases of usability testing(think aloud, observation, lean evaluation).
As a result, our team articulated the results and brought all user feedback into consideration, generated the final refined prototypes, and achieved a more than 92% user efficiency rate.
It was a great chance for me to learn best practices for web-based architecture and knowledge of usability principles.