Source: Google Analytics showing the performance of the Find My Water Section
The Wellness Enterprise
Transforming a 221-page e-commerce website and blog that supports and enhances healthy lifestyles.
Overview
The Wellness Enterprise is an e-commerce company with 11 years on the market that distributes wellness products and specializes in Structured Water Devices. Unlike other wellness stores, they seek to provide their customers with unique products, often new to the market. Therefore, they have become a hub of information where people can learn about these new products and lifestyles.
Process
Heuristic Evaluation
Competitive Analysis
User Journeys
Sitemap
Style Guide
Hi-Fi Wireframes
User Testing
Role
UX/UI Designer in a team with developers, SEO researchers, and copywriters.
Tools
Miro
Adobe XD
Figma
Elementor
WordPress, Woocommerce, and other plugins
Google Drive, Search Console, Analytics & Adwords
Ahrefs
Jira
Microsoft Clarity
Zoom
Problem
The client‘s business was overgrowing, and they wanted to expand their offering in terms of products and content. Their current structure was not supporting that growth, and adding new information, especially on mobile devices, was becoming hard. Additionally, their design was outdated compared to their competitors. They wanted to restructure and redesign the website to improve the user experience, facilitate adding new lines of products and articles, and elevate their brand presence.
Solution
After conducting a heuristic evaluation, competitive analysis, and extensive keyword research, I restructured the information architecture and redesigned the 221 pages of the website, ensuring responsiveness on tablet and mobile devices. Six months after launch, I analyzed the data and user feedback to iterate the design and improve the user interface and information flow.
Duration
UX/UI Design and research: 5 months
User testing: 6 months
Discovery & Research
Project First Stages
In the kick-off meetings, the clients walked me through several pain points users and stakeholders were having with the website and highlighted the importance of understanding the market regarding user interface and keywords.
Additionally, in the meeting with the development team, creating a detailed sitemap of the current website became a priority to avoid broken URLs during the restructuring process. This was also very helpful in mapping the full extent of the website’s content for improvements in information architecture.
Competitive Analysis
Through extensive secondary research, I evaluated several competitors from different lines of products, especially their site architecture, functionalities, and user interfaces, to gain a deeper understanding of the industry’s best practices and identify opportunities for The Wellness Enterprise.
Heuristic Evaluation
Based on the usability heuristics developed by Jacob Nielsen, I reviewed the website's most important pages and flows, including the home page, product pages, product archives, blog posts, blog archives, and affiliate pages for desktop and mobile devices. A few of the most important findings were:
Excessive use of white space
Inconsistencies across several elements of design, especially in photo size and typography
Lack of information regarding the visibility of system status
Difficulty in following a content hierarchy
Tricky sections that appeared to be buttons but weren’t.
Ideation
User Stories
To further categorize the information, I organized the user stories per section and used different colors to keep an inventory of old and new functionalities, so the client could visualize what things would be replaced by new implementations and the ones that would remain the same. This was key to ensuring the expectations were aligned, and the work was as effective and efficient as possible.
Site Map
With the user stories and the previous sitemap, I had a lot more clarity on the site structure and how the information architecture should be. In a meeting with a client, we defined the content pillars for the general website and each section. With this in mind, I created a new sitemap based on my extensive keyword and SEO research, and I led a team of copywriters in creating and editing the website’s content.
Design
Moodboard
After the competitive analysis, I had a clearer idea of the market, so I searched for imagery and UI inspirations for creating a mood board that would help me shape the Style Guide.
Iterations and Design System
Before designing all the screens, I created 3 high-fidelity screens using Elementor. I discussed each variation with the client and how the other screens would follow each particular graphic style. After a few sessions, the user interface was defined, and I documented the decisions and created the Design System in Elementor.
High Fidelity Screens
This was a hybrid process between designing most of the screens with Elementor and using Figma to create Hi-Fi wireframes for the development team so we could implement more complex features and functionalities. In both cases, I also designed the mobile versions to ensure a seamless web experience throughout devices.
Testing & Redesign
User Testing
We launched this website in December and started to receive immediate feedback from the users. I created a ticket system using Jira to track all the user feedback, and we categorized the priority level using a scale of Blocker, Critical, Major, Minor, and trivial issues. Additionally, we implemented Google Analytics and recorded the user’s screens using Microsoft Clarity, so we could see first-hand the user interaction with the website and identify pain points in desktop and mobile devices.
Test Results
After six months of data and user feedback, we gathered important insights that helped the CEO and me to make important decisions regarding the website structure and functionalities. Among our most important findings, we discovered:
The “Find your perfect water” didn’t appeal to the customers, and the conversion rate was low.
Users were abandoning the articles halfway because they had to scroll a lot.
People had to click 3 times to access the products.
The blog section users decreased since it was not listed on the navigation menu.
Manu users expressed they enjoyed the product landing pages and wished they had quicker access to the information.
Redesign
Based on the test findings, we iterated several elements of the website, and some of the adjustments we made were:
Remove the “Find your perfect water” section, and replace it with the landing page of the Aqua Energizer (the best-seller product).
Adding a “Learn” section to the main menu gives more importance to all the articles and blogs.
Adjusting the design of the blog posts to reduce scrolling.
Adjust the navigation bar to highlight the products.
Create a mega menu to reduce clicks to access products and articles.
Improve the design of the home page to facilitate access to products and featured articles.
Project Results
Overall, the project was very successful. We were able to improve user engagement, increase by more than 50% recurring and new users, and report an important increase in the number of sessions. The customers reported the website was intuitive, and the reports indicated growth in sales through mobile devices. As a result of the website redesign and improvements, the company reported a growth in revenue of 56.33%.
Source: Google Analytics. This graphic shows data from the website before the redesign and a year and a half later
Reflections
Biggest Challenge
This was a big project. Not only for the number of screens and details that needed to be taken into account but also because it involved several stakeholders and team members. After we launched the website, we decided to change the development team, and it was a big challenge to support that transition by training new developers on what we were doing. As a result of this endeavor, I was promoted to Senior UX/UI designer and website manager.
Biggest Success
Being able to work on a long-term project is amazing. Because errors are inevitable, but with time and data, it’s possible to learn, recover, and, better yet, thrive. I had the opportunity to continue to evolve this e-commerce website and participate in the addition of several other functionalities, like user reviews and user accounts, to name a few. So the most significant success, more than the revenue growth for the company, to me personally, was the possibility to grow along this product.