Dr Zigs: e-commerce website redesign
This was a team project completed in collaboration with Dr Zigs’ founder and CEO Paola Dyboski-Bryant. Dr Zigs is a Welsh toy bubble company specializing in specialty bubbles for all occasions. Paola founded Dr Zigs as a vehicle to empower the youth across the globe and spread her passion for environmental conservation. Our team was responsible for redesigning her website to better fit her vision and company goals.
Date
Spring 2022
Duration
4.5 months
My Role
UI/UX Designer
Table of Contents
The problem
The existing Dr Zigs website was antiquated and neglected. Paola wanted a new website that would leave a lasting impression—a "wow factor". She also wanted her new website to better spread the company’s goals of youth empowerment and reinforce the brand's environmentally conscious messaging.
Goal
The main goal is to redesign the website to achieve Paola's wishes. The first priority is to fix any issues with the existing website. The new website should also do a better job at “advertising” Dr Zigs’ mission to empower the youth across the world, and demonstrate the company’s environmentally responsible behavior. The final deliverable is a high fidelity prototype in Figma for Paola to take to a developer.
Old home page
Old product listings page
Research: identifying pain points
Heuristic evaluation
I conducted a heuristic evaluation of the current site using Nielsen's "Usability Heuristics for User Interface Design". The website violated all ten heuristics; some were violated multiple times.
Card sorting
The site had at least thirty pages; the navigation bar had eight different categories. As a team we decided that a card sorting would be beneficial. We wanted to see if Paola made the right categorization choices and if all the 30+ pages were necessary. We had people sort the pages of the website into five categories that we picked as a team.
Tasks analysis
Each of us on the team conducted a task analysis study to see how potential buyers interact with the site. We discovered that participants struggled to find products: some gave up even before checking out and others struggled to find information about the bubbles. A few test subjects spent more than 5 minutes looping the same few pages before giving up. Ironically, participants were unaware of Dr Zigs' mission despite lingering on the website. Below is a tasks analysis diagram of how someone navigated the site to purchase bubbles for pets.
Task Analysis: users were getting stuck in a loop
Prototyping: less is more
Overview
Based on the research, the website had to be trimmed. Visitors were overwhelmed, and the company's mission was lost in the sea of pages. The website had some great content, but also plenty of unnecessary content. In some ways, the website is like a house that hasn't been cleaned in years. It's our job to declutter and reorganize.
Paola spoke highly about the websites of Patagonia and The Body Shop. She liked how they were obvious in their environmentally conscious messaging. Thus, I took inspiration from both those companies when designing the prototypes.
Paola spoke highly about the websites of Patagonia and The Body Shop. She liked how they were obvious in their environmentally conscious messaging. Thus, I took inspiration from both those companies when designing the prototypes.
-1.png)
Low fidelity prototype
Low-fidelity prototyping
I was responsible for prototyping on Figma. After deliberation with the team, I cut down the website to six essential pages—home, product listings, product pages, blog listings, blog posts and tutorial pages. The navigation bar was trimmed to four main categories. The goal was to reduce clutter by using consistent page layouts and simplifying the navigation bar.
One key new feature: a home page hero. The hero replaces the massive advertisement for giant bubbles. The hero is for Paola to advocate her company's mission and run seasonal advertising campaigns.
Another new feature is the impact subsection on product pages (seen below). Paola proudly shared that her bubbles are environmentally friendly and responsibly sourced; however, visitors had no idea. I wanted the product pages to reinforce Dr Zigs' environmentally conscious goals, and gives buyers a reason to feel good about their purchase.
One key new feature: a home page hero. The hero replaces the massive advertisement for giant bubbles. The hero is for Paola to advocate her company's mission and run seasonal advertising campaigns.
Another new feature is the impact subsection on product pages (seen below). Paola proudly shared that her bubbles are environmentally friendly and responsibly sourced; however, visitors had no idea. I wanted the product pages to reinforce Dr Zigs' environmentally conscious goals, and gives buyers a reason to feel good about their purchase.
View prototype
↗
.jpg)
Redesigned navigation bar and new subcategories that appear on hover. We later discovered that "events" was causing confusion people.
-1.png)
Newly proposed impact section to help buyers understand the positive impact of their purchase.
User testing
We had target users complete a moderated, virtual test on the low-fidelity prototype. We had participants find specific products and find answers to questions about the bubbles.
User testing revealed that users were having an easier time finding products and navigating the site. Visitors were more aware of Dr Zigs’ environmentally conscious branding thanks to the new impact section and better page organization. However, users were still not satisfied with the categorization of pages. In particular, the subcategory "events/for hire". The participants argued that it shouldn't be categorized under shop (see image above). Events deserves a category of its own.
The biggest flaw with the redesign was that participants struggled to switch between accessory and bubble listings. Accessories are used to make bubbles and are sold separately to bubble sets, so switching between either type of product needs to be much easier.
User testing revealed that users were having an easier time finding products and navigating the site. Visitors were more aware of Dr Zigs’ environmentally conscious branding thanks to the new impact section and better page organization. However, users were still not satisfied with the categorization of pages. In particular, the subcategory "events/for hire". The participants argued that it shouldn't be categorized under shop (see image above). Events deserves a category of its own.
The biggest flaw with the redesign was that participants struggled to switch between accessory and bubble listings. Accessories are used to make bubbles and are sold separately to bubble sets, so switching between either type of product needs to be much easier.
Final deliverable: a high-fidelity prototype in Figma. Prototypes for the home page, product listings page, and product page pictured above.
High-fidelity prototyping
Paola provided us with amazing photos, and it really helped augment the designs. In response to the testing results, our team decided to add a fifth header (“events”) to the navigation bar. Dr Zigs does "event/for hire" services, and it deserved a category of its own.
A button to switch between bubbles sets and accessories was also added. Shoppers can quickly swap between bubble set and accessory listings.
The final prototype is a tidier website that doesn't deviate far from the original. I tried to cut away the unnecessary and organize page layouts while maintaining a similar feel the original website. I kept the green color palette to reinforce Dr Zig's commitment to the environment. I am happy with how the website looks; I am confident that visitors will be more excited to shop there. Paola's work is amazing—she deserves a website she can be proud of.
A button to switch between bubbles sets and accessories was also added. Shoppers can quickly swap between bubble set and accessory listings.
The final prototype is a tidier website that doesn't deviate far from the original. I tried to cut away the unnecessary and organize page layouts while maintaining a similar feel the original website. I kept the green color palette to reinforce Dr Zig's commitment to the environment. I am happy with how the website looks; I am confident that visitors will be more excited to shop there. Paola's work is amazing—she deserves a website she can be proud of.
View prototype
↗
Next steps
The logical next step to the project is to test the high-fidelity prototype with her Welsh and loyal customers. I hope that the our team's work will lead to the development of a new site to better spread Paola's voice and sell her amazing bubbles!
Takeaways
I really enjoyed working with Paola. Her mission and energy is infectious and inspiring. This project really reminded me of how UI/UX design can be used in a positive manner to help the communities around us. UI/UX isn’t just about designing websites, apps, and experiences—design is a vehicle to enact positive change.