Dufflet.com Website Redesign

Improving the information Architecture of Dufflet.com to create a better user experience.

Project Type

Website Redesign

Timeline

Oct - Dec, 2021
(3 Months)

Platform

Desktop

Tools

Mural,
Optimal Workshop,
Figma

Team Members

Raika Sethi, Tanisha Amarakoon, Kira Fullerton, Emily Gazo, Ryan Mui

My Contributions

Survey creation, usability testing and analysis, revised IA schematic, tree testing, low fidelity prototypes, mid-fidelity prototypes.

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.

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:

Content Analysis
User Analysis
Card Sorting Study
Revised IA Schematic
Low Fi Prototype
Tree Test Study
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 Insights

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:

“All the information you need is there...it’s just not where you’d expect to find it”. (P3)

Research Analysis

Understanding the Problem

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 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

Unclear iconography labels

The use of internal jargon throughout labels

Inconvenient navigation

Users were frustrated having to navigate through 5+ pages of product results.

Lack of breadcrumbs created no sense of context and forced participants to rely on top-down navigation.

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.

Important product information is hidden in PDFs

This is bad for content searchability and SEO.

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 Wireframes

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”.

Med-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.

Next Steps: High Fidelity Design

I plan to tackle a high-fidelity redesign of the Dufflet website which I will make into an interactive prototype.