My role
UX/UI Designer
Job summary
The client-facing side of the UX/UI redesign project for Donna Bella website, providing a scalable, responsive, easily maintained web component library and content management system, tailored to the needs of the brand and user. Accompanied by a design system.
Challenge
The scope of this project was focused on providing the brand with a stable, responsive, and accessible website. The website had been live for a couple of years, so I was able to revisit the project, analyze data, and see what improvements could be made.
1. Conversion rate optimization
A website is difficult to navigate, it is not visually appealing. The loading time is higher than normal. There is not enough information about the company and it was not properly organized which was causing a lack of trust. Based on quantitative data received from Google Analytics the major problem is drop-offs happening at the beginning of the user interaction with the website;
2. User retention
To increase user retention, it's important to focus on creating a positive user experience, providing value and relevance to the user, and continuously updating and improving the website.
Questions we asked ourselves
- How can we efficiently provide Donna Bella hair extensions with a web presence?
- How might we optimize the brand site to increase engagement and conversion?
- How might we empower brand to manage their own content?
Hypothesis
Intuitive navigation = More conversions
Navigation is an important aspect of website design because it can greatly impact the user experience and the overall conversion rate. Navigation that is clear, easy to use, consistent, responsive, and accessible can help users find what they need and complete the desired action on the website, leading to more conversions.
Clear and efficient pages structure = Increase in retention
A clear and logical layout can make it easy for users to find what they are looking for, leading to a better user experience and increasing the likelihood of retention. A clear and logical layout, the use of headings and subheadings, white space, images and videos, consistent design elements, clear calls to action, a consistent navigation menu, search bar, and footer can all help users find the information they are looking for, leading to a better user experience and increasing the likelihood of retention.
Process
Defining and understanding the problem
The first step in identifying the problem set and the scope of work was stakeholder interviews. Based on this qualitative research I was able to get a vision and expected results from a business standpoint. After I was granted access to platforms like Google Analytics, I conducted quantitative research and analyzed the weakest parts of the website based on the dropoff rate and conversion rates of specific funnels. Competitor analysis and user personas were created at this step as well.
My upfront research covered:
- Business needs & goals;
- The "weakest" parts of the current look and feel of the website;
- Blockers impacting the key growth KPI - Conversion.
Business needs
The Donna Bella Hair brand spans a broad spectrum of catalog size, creative asset availability, and target demographic, so any solution would need to be flexible and easy to personalize to reflect the brand's offering. Developing a strong online presence was one of the goals for this project so the brand can reach a wider customer base and make it easy for customers to purchase products. This includes creating a user-friendly website, implementing a secure payment gateway, and offering fast and reliable shipping options.
User needs
I had a wealth of data from a year's worth of fortnightly testing on end users in the brand's demographics, access to the feature request, and bug report tickets that had been raised. During this discovery phase, I found that users wanted a unique and modern look that reflect their creative direction. Brand executives wanted the ability to publish and edit their own content to support product launches and campaigns. To enable all of them to achieve this, designers and developers needed to have enough component variants available so that each new component could have its own look and feel, and consistency in design and code for easier maintenance.
Main pain points:
- Unclear and inefficient navigation;
- Confusing page structure;
- Inconsistent look due to the lack of design guidance;
- Slow loading times;
- Not enough guidance for a consumer in the selection of the right type of an extension;
Concept creation
Information architecture
The goal of information architecture was to organize and structure the content and information in a way that makes it easy for users to find what they are looking for. The main purpose of IA in e-commerce is to create a user-friendly experience that makes it easy for customers to navigate and find the products they are looking for.
User Flow
The goal of the user flow for this project was to create a seamless and efficient experience that guides users through the process of finding and purchasing products. User flow plays an important role in e-commerce by guiding users through the process of finding and purchasing products in a seamless and efficient way. It helps to improve the user experience, increase conversion rates, and enhance the mobile experience. Additionally, it helps to reduce friction points, and provide clear feedback and error messaging.
Wireframing the solution
Lo-fi wireframes were created to test the new layout and structure of the web pages with internal time. Also to visualize and communicate the basic structure and layout of a website before moving on to more detailed, high-fidelity designs.
Hi-fi wireframes were made to help stakeholders visualize the new look and feel of the pages and provide feedback on the layout, functionality, and user flow. It's also worth mentioning that the Hi-fi wireframes helped in the optimization of the page for Search Engine Optimization (SEO) as well as conversion rate optimization (CRO) by highlighting key elements that need to be on the page and the content that needs to be presented to the user.