Website Redesign to create a more user-friendly e-commerce experience and increase sales conversions
Overview
Client
The Gift House
Duration
2 Weeks
Role
UX|UI Designer
Figma, Illustrator, Photoshop, Canva, Maze, Zoom
Tools
Website Redesign: Revamping the Gift House E-Commerce Experience
The Gift House is a family run collectible gift store located in Lakewood, CO. They carry a vast selection of fine gifts and collectibles. Their mission is to fulfill the gift needs of all customers, which is why their product inventory is so large.
The owners of the Gift House built their own website, and they were not happy with how it turned out. Their website gets a lot of traffic, but the number of visitors that actually complete purchases is disproportionately low. They asked me to help them increase sales conversions and make their e-commerce experience more user-friendly.
Defining the Problem
The Gift House website gets a lot of traffic, but e-commerce sales are disproportionately low. The products are not organized in an intuitive way, making it hard for customers to find what they’re looking for and preventing sales.
Solution
How might we drive sales by making it easier for users to find products on the website?
Uncovering User Pain Points with Strategic Heuristic Evaluation
Knowing that the owners made the existing site themselves, I began with a Heuristic Evaluation. I wanted to get a better understanding of what might be interfering with the user’s flow and preventing sales. In accordance with Neilson Norman’s 10 Usability Heuristics, my study revealed a couple pain points that needed to be addressed.
Consistency & Standards Score: 4
According to #4 on Neilson’s List, consistency and standards should prevent a user from wondering if different words or situations mean the same thing. Looking at the screenshot, you can see that the primary navigation was not categorized in an intuitive way. Many of the product categories were synonymous. Moreover, the categories were a confusing mix of holidays, brands and themes.
Aesthetic & Minimalism Score: 4
According to #8 on Neilson’s List, the aesthetic and minimalist design of an interface should ensure that the information being presented to the user is essential and relevant. The layout of the homepage lacked minimalism. The variety of fonts and colors used throughout were problematic. The logo in the top bar was crowded with other pieces of information. The screenshot shows the chaotic composition.
From Chaos to Clarity: Sorting out the Navigation to Boost Sales
Card Sort
It was obvious to me at this point in my research that the main thing preventing sales conversions on the Gift House’s website was the chaotic navigation. How were customers supposed to make purchases if they couldn’t easily find what they were looking for? I conducted an open card sort with 7 users to see how they would recategorize the product menu. Using the results from my card sort, I reorganized the primary navigation, and I also decided to add a separate supplemental navigation menu at the top.
The existing sitemap confirmed what the Heuristic Evaluation already revealed…the lack of consistency and standards in the primary navigation was a problem.
After conducting an open card sort, I recategorized the navigation. The new and improved sitemap reflects the feedback I got from my user research.
Comparative/Competitive Analysis: Understanding the Market and Diving Deeper into Design Strategies
The next phase of my research helped me dive into my design process. We’ll get there next….but first let’s take a look at the competitive and comparative analyses I conducted across 6 market rivals. I identified several features the Gift House had in common with these retailers and several features they were lacking. While assessing the key features, I also studied the websites’ design decisions and marketing strategies. I took a close look at color palettes, page layouts and successful content writing. I also looked over the information architecture of each website to confirm that the new primary navigation aligned with industry norms and met user expectations.
Colorful and Contemporary: How the Gift House Found it’s New Design Palette
After getting acquainted with competitors and also familiarizing myself with the existing branding on the Gift House’s website, I began to organize my design ideas on a mood board in Canva. I refined the color palette to include shades of pink and yellow that complimented each other better. I also chose stock photos that had a more contemporary feel. The font chosen for the entire site was Ubunto.
Mood Board
Rebranding - Logo Design
In addition to choosing a new font to stylize the store’s name, I also redesigned the logo. I illustrated a similar house motif using the new color palette. I ditched the ribbon border that was around the old logo, and I made the house more contemporary. I also decided to make the store name a part of the logo. The Gift House is a store that promotes gift-giving and caring for others, so I added the heart details to symbolize that aspect of the brand.
Low Fidelity Wireframes: Remarkable Improvement in Consistency, Standards and Minimalism
High-Fidelity Wireframes Outshine the Previous Web Design in Before and After Comparison
Before
After
Usability Testing Reveals Happy Shoppers that love the Plethora of Pink
The usability testing revealed satisfying results. I conducted a prototype test using Maze with 4 users. According to the survey questions, users were pleased with the color palette and overall aesthetic of the redesign. Nobody gave negative feedback about the pink-overload, so that was great news.
The heat maps did reveal one problem. When instructed to navigate to the full listing of products, 2 out of 4 users hit the Home icon/logo in the top right corner instead of selecting the Shop button. It was not intuitive to users that clicking the Shop button would navigate them to the full listing of products.
Next Steps: Additional User Testing
Do more user testing to see if users associate the logo at the top of the page with Home or Shop All products. Rename the Shop category Shop All and perform additional user testing to see if this eliminates the confusion.