Dufflet
Website Redesign
Improving the information Architecture of Dufflet.com to create a better user experience.
Project Summary
As part of an Information Architecture course, the goal of this project was to deconstruct, analyze, and re-design a website of our choosing.
Our team chose to tackle the Information Architecture of Dufflet.ca, a high-end bakery serving Toronto and its surrounding area. We analyzed the existing navigation structure, identified problems, and through various tests, designed an improved user centred experience which we implemented in a med-fi prototype.
Project Type
Webside redesign
Duration
3 months
Platforms
Desktop
Tools
Mural,
Optimal Workshop,
Figma
My contributions
Survey creation
usability testing and analysis
revised IA schematic
tree testing
low fidelity prototypes
mid-fidelity prototypes.
Team Members
Raika Sethi
Tanisha Amarakoon
Kira Fullerton
Emily Gazo
Ryan Mui
The Challenge
Due to poor categorization, confusing labels, information overload and lack of filtering functionality, users are having difficulty finding the information they need on Dufflet’s website.
How can we improve the information architecture of Dufflet’s website so customers can find important information effectively and efficiently?
CIBC
I spent 8 months working at CIBC as a product designer on the delivery team. I spent the majority of my co-op on a digital card management project.
Project Type
Co-op
Duration
8 Months
Platforms
Native app, Web (static + responsive)
Project Summary
As part of an Information Architecture course, the goal of this project was to deconstruct, analyze, and re-design a website of our choosing.
Our team chose to tackle the Information Architecture of Dufflet.ca, a high-end bakery serving Toronto and its surrounding area. We analyzed the existing navigation structure, identified problems, and through various tests, designed an improved user centred experience which we implemented in a med-fi prototype.
Project Type
Website redesign
Duration
3 months
Platforms
Desktop
My contributions
Survey creation, usability testing and analysis, revised IA schematic, tree testing, low fidelity prototypes, mid-fidelity prototypes.
Team Members
Raika Sethi, Tanisha Amarakoon, Kira Fullerton, Emily Gazo, Ryan Mui
Tools
Mural,
Optimal Workshop,
Figma
The Challenge
Due to poor categorization, confusing labels, information overload and lack of filtering functionality, users are having difficulty finding the information they need on Dufflet’s website. How can we improve the information architecture of Dufflet’s website so customers can find important information effectively and efficiently?
The Solution:
A redesign of the Dufflet website where information architecture is optimized through improved organizational schemes, clearer labels, search functionality, and decreased cognitive burden. This allows both new and regular customers to find product and bakery information efficiently and efficiently.
The Process
The process we took to arrive at our solution:
1. Content Analysis
2. User Analysis
3. Card Sorting Study
4. Revised IA Schematic
5. Low Fi Prototype
6. Tree Test Study
7. Mid Fi Prototypes
Research
Understanding the Users
Why?
Through user research, we wanted to find out:
(1) What are potential users’ cake buying habits and behaviours.
(2) How users currently navigate the Dufflet website
How?
3 Usability Testing Sessions
25 Survey Participants
Research Analysis
Cake Buying Habits
Most Important Factors when Selecting a Cake
When asked about the 3 most important factors during the cake selection process, flavour, price point and cake aesthetics were the most popular options:
Most Useful information when visiting a bakery’s website
When asked about the 3 most important factors during the cake selection process, location info, product availability and hours of operation were the most popular options:
Research Analysis
Website Navigation
Even though users were mostly able to complete the given tasks, their experience was slow, cumbersome and inconvenient.
Inconsistent Categorization Schemes
Inconsistent categorization schemes exists throughout the website leaving users confused.
Example: None of the participants observed were able to locate where to buy candles through the navigation menu.
Lack of filter functionality
Lack of filtering functionality made cake finding cumbersome for participants. When they did find the right cake, they were disappointed to realize it was out of stock, only after clicking on it and visiting the product page.
Poor Labeling Systems
The use of internal jargon throughout labels
Multiple term labels, creating cognitive burden and overwhelm.
11 items in the SHOP menu consist of multiple-term labels
Click image to Enlarge
Sub-optimal Information Organization and Hierarchy
Users are missing key information at the time when it is most important to them, forcing them to do additional work to find necessary information elsewhere.
An example on the product page, where key allergen information is hidden underneath naming tags and social media handles. Serving size and exact pricing is also missing from the page.
Card Sort Study:
How do users organize information?
What We Did
The team conducted an open card sort study on Optimal Workshop, where participants were presented all the labels from the Dufflet website and asked to organize the labels in a scheme that made sense to them.
- Open card sort
- 27 Cards Provided
- 5 participants
Card Sort Analysis
Difficulties in Analysis
Due to the current groupings of products on the Dufflet website, some cards presented to participants included multiple terms (ex. "Coffee Cakes + Loaves"). This forced them to keep these items group together and so we understand our results could be misleading.
In hindsight, we should have separated all the multi-term labels into individual cards.
Our Analysis Process
With so much partial overlapping data collected we needed a way to understand our results, without locking us into an organization scheme. We use the Similarity Matrix to do this, by noting which cards had high groupings (over 83%).
Identifying the highest groupings
We grouped together the cards that had the most frequent groupings and used that as a starting point to reorganize the remaining shop categories.
Redesigning the Information Architecture Schematic
Original Schematic
- 12 multi-term category and page labels
- Confusing labels like Seasonal Confection and Seasonal Items
- Inconsistent organizational groupings
Revised Schematic
- Consistent organizational groupings (Ex. Cakes menu consists of only cake types)
- Dietary Preferences has been made into a category
- 12 multi-term labels have been split up into individual labels
Low Fi Sketches
The team sketched low fi sketches of three tasks to illustrate how the user’s journey could be improved with the new website structure.
Tree Test Study:
Is our redesigned schematic successful?
We conducted a tree test study to verify whether our new IA schematic was successful, and to see whether further adjustments need to be made.
The Process
10 tasks
3 Follow up questions
13 Participants (4 Observed)
Average time: 7 minutes and 3 seconds.
Why?
We conducted a tree test study to verify whether our new IA schematic was successful, and to see whether further adjustments need to be made.
How
- 10 tasks
- 3 Follow up questions
- 13 Participants (4 Observed)
What We Learned
Our tree test study had a 76% success rate and a 71% directness rate.
Successes
Our test results were able to confirm that the changes we made to the IA Schematic were in fact successful.
- All participants were able to locate Christmas themed cup-cakes
- 92% of participants were able to locate where to buy an apple pie
- All participants were able to locate the correct place to find candles! Previously, none of the participants were able to locate the candles from the main navigation.
Room For Improvement
Through test result analysis we were able to uncover insights that will further improve the user experience of the website:
Insight
Participants were torn between two paths: Cakes and For Your Event when asked to find a high end engagement cake.
Iteration
Since the premium cakes are specialty cakes we decided it would be best to also include them under “for your event” in addition to the “shop>cakes” menu.
Insight
When asked to find out whether Dufflet is a Kosher bakery, participants were uncertain whether information will be found under About Us or FAQ. 31% of first clicks were to the About Page
Iteration
To better communicate this page is about the bakery’s history rather than a place to get practical and logistical information, we have decided to relabel it as “Our story”.
High-Fi Redesign
We used our tree test insights to create a mid-fidelity interactive prototype of the website using our new information architecture schematic.
Finding a fancy nut-free cake
Through an organized shop menu and the introduction of filters, users are able to easily find a cake that fits their needs
Finding Dufflet’s List of Retailers
By adding a retailers page accessible through the main navigation, users are able to find a retailer carrying Dufflet's products and filter the retailers in their area
Key Learnings + Next Steps
Take time with the Data
Taking time to really dig deep into the data - both the successes and failures, helped us better understand our findings and get a clearer understanding of the problem scope.
Don't Forget to re-visit the Research
As the team moved further ahead in our design process, we left our research data behind us. Referencing the important insights we gathered more often would have helped us make better justified, user centric design decisions.