E-commerce Redesign
Overview
Before-Noon is a wellness brand established in 2019. Both founded and owned by women, it provides the tools to cleanse, ground and unburden your mind so that you can discover your unlimited potential, navigate the BS life throws at you, and just make yourself feel better.
Problem
While the original site was designed and developed by an agency, basic e-commerce design patterns and best practices were missing from the site. My primary objective was to update the user experience to better meet the business’s needs (increased sales) and the user’s needs (to better understand the brand and explore product offerings).
Solution
-
Homepage: Design a more shoppable and branded homepage so customers understand the brand and can view offerings immediately.
-
About page: Better highlight the brand essence on the About page to connect the user to the company, subconsciously enticing them to shop at Before-Noon.
-
Events page: Build more engaging interactions and provide better organization of information on the Events page, so users feel more inspired and committed to participate in brand events.
Role
I was the sole designer who worked on this redesign, I needed to design within the confines of an established style guide and ensure my designs integrated seamlessly with existing UI elements and themes of this site. My responsibilities included client meetings and communication, building wireframes (low to high fidelity), testing interactive prototypes, providing deliverable pixel-perfect visuals to the engineer, and conducting A/B testing.
Prototype
Homepage
The redesigned homepage was the most important and required the biggest overhaul.
Problem:
The existing homepage wasted a lot of real estate and did not accomplish any of the key business goals. Users would often click on the static hero image trying to interact with it, but it was just a jpg. The only place to shop the site was from the hamburger menu in the navigation.
The other glaring issue that perplexed visitors was that they had no idea what the business sold. From the way the homepage was designed, they didn't understand that this is a wellness e-commerce brand. The complete lack of storytelling made the customer feel lost.
Solution:
To address the miss in shoppability, I designed three other places to enter shopping from the homepage.
-
First, the interactive homepage slider, that replaced the static hero image. This slideshow allows the business to highlight key products, include more copy for context and provides increased interaction for the user to explore the product offerings. t also helps explain what the brand sells, both visually and through text.
-
I also included two additional shopping category cards for customers to explore and shop products.
-
To address the lack of storytelling I also incorporated more brand copy and, at the client’s request, included the logo submark in stylistic features.
All of these adjustments better service the business and the customer.
Before
After
About Page
The goal of redesigning the About page was to highlight the brand’s story and point of view, in turn connecting to customers and leading to increased sales.
Problem:
The existing About page needed to be more dynamic to engage the customer. Users are incredibly visual and need more stimulation to keep their attention. Having only text on this page was a miss, but it was an easy fix to breathe life into the brand and create a connection.
Solution:
Information hierarchy was low hanging fruit to improve on, by adjusting font size and the use of the two different fonts instantly made the page more visually appealing and digestible. The brand already had beautiful photography that was incredibly well curated on their social platforms, so highlighting this on the site was a no-brainer. The images have such a strong esthetic that simply including them was a powerful boost to the storytelling of this About page.
Before
After
Events Page
The existing Events page was flat and uninspiring with little organization. This redesign focused on understanding how the user would interact with this information, leading to higher attendance and participation in events.
Problem:
Giving users a list of events with no organization proved frustrating when trying to find an applicable event to attend. There was no way to filter or properly search for an upcoming event; the best the user could do was scroll until they saw an event listed in their city. There were no pictures or features that promoted attendance or excitement for an event.
Solution:
Adding filter features for finding a relevant event was key. While the brand is small it does participate in 3 key markets which is how I organized the search filter. Now, a simple dropdown allows the user to only view events in those three main geographical locations. Once the user picks a location they are presented with Upcoming and Past events. Events are presented in a card format inclusive of a photo, icons indicating where and when the event is, as well as share and add to calendar features. Including 'share' and 'add to calendar' features encourages users to commit to and remember the event, leading to increased attendance. Keeping this information in a card clearly distinguishes events from each other and allows the user to scan events offerings quickly.
Before
After
Results
A/B Testing Results
This client specifically asked that I follow up with data showing the results of the sites optimization. I used Crazy Egg, an online application that provides eye-tracking tools such as Heat map, Scroll map, Overlay, and Confetti to track a website's operation. I compared the snapshots of the old site to the new, and put together a report which I presented to the client.
The main takeaways and overview of my analysis are as follows:
-
All new shoppable elements that were added to the homepage are in the top 10 most clicked elements
-
Shoppable elements (i.e. slideshow) is placed in the highest impression areas of the site for maximum conversion
-
Users know how to interact with the homepage now and want to explore the sites offerings.
-
New site shifts focus from social to sales conversion
The List Report displays all of the elements that have received clicks on the page in a tabular format. From this report you can see that the most clicked elements on new page are:
-
Menu Icon
-
Slideshow right scroll arrow
-
Incense Card
-
Tool Boxes - second slide in slideshow
Before
After
The Scrollmap Report shows how far visitors scroll on the web page and where they start to lose interest. From this report you can see that the old site immediately looses the user at the top of the page where the only shoppable elements are. Instead the user focuses on the Instagram feed which doesn't convert to sales.
On the updated homepage (both on Mobile and Desktop) the new slideshow element and CTA are in the "Sweet Spot," the spot that most of the users scroll to for maximum conversion. The shoppable category cards also popular among users.
Final Takeaways
Main Challenge & Lesson Learned
The biggest learning from this project was deciding on how to make compromises on design decisions based on budget and resources. Since I was brought on to this project to optimize an existing site in a custom built Shopify theme, the client also needed to hire a developer to implement design updates. Therefore, we needed to prioritize what we could accomplish based on budget as well as importance, and not every feature could be implemented. So I worked with the client to determine which optimizations were crucial to the business and which features would be nice if not necessary. Through this experience I was able to keep the businesses KPIs in the forefront and work collaboratively and openly with the client.
Next Steps
For future iterations of this website, the client wanted to implement a community blog component. Not only does this build connection and community but it creates content and increases SEO. I did design the pages for this flow of the site, a landing page, filter options, and an article template, but based on budget constraints, this addition was not a priority for the business at that time, so we decided to bank it until resources were less scarce.
