magpie industries | e-commerce website redesign

Redesigning the e-commerce platform of a boutique shop to improve users’ browsing and check-out experience

overview

For this project, I was tasked with redesigning the website of an e-commerce shop local to my neighborhood.

Magpie is a boutique shop known for featuring local artisans and they are frequented by visitors looking for unique gifts.

My goal was to improve user’s shopping experience through reorganization and redesign of the website, and thus increasing conversions and sales.

timeline

2 weeks

role

Sole UX researcher and UX/UI designer

tools

Figma, FigJam, Google Slides, Google Sheets, Zoom, Pen & Paper

1

what’s the problem?

While Magpie Industries is notably successful with it’s in-store sales and experience, their website unfortunately exhibited poor design, which negatively impacted user experience.

In a contextual survey, 3 users noted the following primary navigation and website feature challenges on Magpie’s website:

100% users did not know what the category “sundries” meant

After scrolling through a category search page, 67% users gave up and used the search bar

100% users were not able to access the “sort-by” function

let’s dig in to some research!

I conducted a comprehensive site audit, utilizing a comparative and competitive analysis and heuristic evaluation using LEMERs found above. Using these methods, I uncovered some major usability challenges of Magpie’s original website, including…

a. primary navigation challenges

b. website feature challenges

Key action takeaways:

Change the primary navigation categories to more understandable and intuitive categories
Shorten the header so that it does not overlap with the page content
Make sure each category contains available products
Create the ability to buy more than one item on the product page

Next step was creating and distributing a user survey, targeting individuals who have visited a boutique shop or occasionally buy gifts. I discovered major reasons and platforms for gift- giving in this survey. 5 people were then recruited for user interviews, where I retrieved deeper information into gift-giving habits and reasonings.

User interview takeaways:

Users appreciate quick and efficient check-out processes
Descriptions, reviews, and photos are helpful in making a purchase
Special gifts are unique, memorable and relevant to the gift receiver

Finally, synthesis of my comprehensive research data lead to the following problem statement:

User needs an efficient and reliable website to send local and unique gifts to their friends and family.

Taking information from these user interviews and the problem statement, the user persona Adelyn was born in order to direct my project’s direction and next steps for the target audience.

“A special gift is one that’s memorable, personalized, and something the receiver can’t find anywhere else”
-Adelyn

2

3

tackling the challenge

Given the research and problem statement above, the following solution hypothesis was created:

Redesign a website that includes efficient navigation, product reviews and recommendations, and personalization options.

4 people were requested to card sort 75 of Magpie’s products and determine their own categories and subcategories. After interviewing each tester to understand their thought process and reasoning, I created a site map that would hypothetically be most organized and efficient means of discovering Magpie’s products. Once the site map was finished, I began iterating an a user flow that followed a task of buying a mug.

And now onto… design!

Using pencil and paper, I sketched several outlines and ideas of a redesigned website while researching website designs and navigations of relevant competitors and comparators. These iterations led to my grayscale wireframes that reflected user ease-of-use, while maintaining the minimalistic aesthetic that the Magpie brand portrays.

Usability tests of the grayscale wireframe were then conducted through Figma. The testers were given the following scenario:

Imagine that your friend’s birthday is coming up. She recently created an instagram for her coffee passion, and you want to buy her two pink mugs— one for her, and another to share with her husband. In order to personalize this gift, you want to add a note as well. How would you go about this task?

4 users were given this task, and the charts below represent the usability test results, ultimately revealing improved efficiency of the site navigation. Yes!!

100% of testers successfully navigated the primary and secondary navigations
80% of users selected the correct product color on the first try
100% of users successfully checked out multiple products on the first try

Quoted feedback from testers:

tada - the final product!

Using data and feedback from the usability tests, I designed the high-fidelity prototype of Magpie’s website redesign through Figma. Below, you may find specific design features and elements that have been redesigned from the previous website.

Watch the high-fidelity prototype video below for a closer look at completing the check-out process. Be sure to take note of the updated primary navigation, efficiency in selecting objects, new options of choosing colors or multiple items, as well as a minimalistic and muted design.

4

5

what’s next?

Thanks for joining me on this journey! However, nothing is perfect as is— there is always room for growth and ideation. Here are some thoughts of how I’d change my process or what I would work on next.

Conduct more usability tests for different user tasks, such as creating an account, selecting different products, gift wrapping items, etc.
Start research on conducting a secondary user persona
Incorporate filter and sort-by options most relevant to the product items
Design check-out page with appropriate features