Client
AMEERA
Role
UX Designer
Timeline
April 2024 - May 2024
Introduction
Redesigning a Fashion Brand's Website to Improve Business Growth
AMEERA is a modest fashion brand with e-commerce as the primary channel to reach consumers. Established in 2021, AMEERA is a fairly new brand looking to grow brand awareness and increase its customer base. I partnered with AMEERA to redesign the current site in hopes to increase site traffic, conversions, and newsletter subscribers.
Research
Understanding the Current State
First, I held a project kickoff with the client to understand the business’ goals, what they envisioned for the site redesign, and set expectations around timeline and scope.
Then, to understand the current structure of the site, I performed a site audit. I analyzed the site page-by-page against the 10 usability heuristics and noted areas of the site that met the definition of the principles as well as areas where there could be improvement.
Researching the Competition
Competitive analysis was performed on 3 brands that are comparable to AMEERA in fashion concept, price point, and target market. This helped me to understand the market and how brands targeting a similar target market displayed their products on site.
Establishing a Baseline for the Existing Website
In order to determine a baseline of usability of the existing website, I needed to conduct usability testing of the current website. 5 users, women aged 27-32 with disposable income who enjoy shopping were interviewed using Lookback. 3 users were familiar with the AMEERA brand and had seen the site before, while the other 2 users were not familiar with the brand and had not seen the website before. All users were asked to complete 10 tasks and answer follow up questions to understand the current user experience of AMEERA’s existing website.
Browse the site
Add a denim skirt to your cart
Rent a corset maxi dress
Ask a question
Purchase a leather bookmark
Find the return policy
Learn more about AMEERA
Subscribe to the newsletter
Read about the modest looks from Fashion Week 2022
Request a custom design
Insights
Difficult to Navigate
Poor categorization and confusion around some navigation labels. Users also expected clear product categories instead of organizing products by collection name.
Product Browsing
Frustration with excessive scrolling to access product details, especially on mobile, and illogical “Complete the look” suggestions.
Form Improvements
The email subscription sign-up form and custom design request form need improvement to require less effort from the user.
Accessibility and Hierarchy
Readable fonts, but white text on hero image is hard to read, and there is an opportunity to improve text hierarchy.
Analyze
Finding Themes
In order to visualize patterns and themes from my user interviews, I created an affinity map.
"I expected to have options for clothing categories in the navigation bar"
"To subscribe to the newsletter, it's not obvious you have to enter your email and the subscribe is supposed to be a button"
"There's a lot of stuff on the site and it's hard to sort through"
Problem Statement
Users landing on the AMEERA site are unable to seamlessly navigate the site and view product offerings due to the current information architecture structure and product page layout. They often find it unclear what to expect upon clicking on navigation options or how to efficiently navigate the product detail page to locate necessary information, leading to frustration during the shopping process. Moreover, users may not easily notice the availability of the AMEERA newsletter or how to subscribe to it for further brand engagement. Enhancing the user’s shopping experience and increasing brand recognition positively affects the user’s decision to continue engaging with the site, increasing their probability of becoming a purchasing customer.
Redesign Prioritization
Pages Prioritized for Redesign
Pages prioritized for redesign were based on user feedback as well as my UX site audit assessment.
Must Have
Homepage
Navigation
Newsletter signup form
Product detail page
About
The Ameeracan Newsletter
Custom Designs by AMEERA
Should Have
The Sisterhood - Rental Program
Could Have
Reviews and testimonials
Will Not Have
Ambassador program
AI widget on the Custom Designs page
Information Architecture
Card Sort
A hybrid card sort was conducted with the same 5 users interviewed for user testing since general feedback uncovered that the navigation bar labeling and categorization was unclear. I added in cards that users had mentioned during interviews, like categories of clothes, and renamed columns to be more intuitive.
Sitemap
Generally, the card sort affirmed my hypothesis of how users envisioned the information architecture of the site. Below is the sitemap that was created based on a combination of the card sort results and using my design skills to consolidate pages. I chose to consolidate pages to streamline the navigation process and reduce the noise on site to ensure the focus of the site is on the brand and its products.
Design
Sketching Based on User Insights
My next step in the process was sketching each of the pages I prioritized for redesign. I constantly kept the knowledge gained from my research at the forefront and sketched with the aim to ensure the AMEERA site is easy to navigate, the info is conveniently searchable, and reducing the number of pages to keep the website uncluttered while maintaining emphasis on the brand and its offerings. The sketches are more polished because I planned to use them in user testing and wanted to leave less imagination for users in order to receive accurate and high-quality feedback.
Home
Product Detail Page
About
The Ameeracan Newsletter
Custom Designs - Version 1
Custom Designs - Version 2
Testing My Sketches
The sketches were then used in user testing with 3 individuals who had participated in usability testing of the original website. Moderated user testing sessions were conducted with the 3 participants over Zoom while they navigated the basic prototype in Figma. Users were asked to complete the following tasks and encouraged to talk through their thought process if anything was not clickable.
Browse the site
Note product details
Learn more about AMEERA
Subscribe to the newsletter
Request a custom design
Insights
Clear Navigation and Discovery in Browsing
Users expect intuitive navigation with well-defined categories in the “Shop” menu. The featured collection button on the homepage hero banner aids in discovering content that might otherwise be overlooked.
Accessible Product Information Enhances Decision-Making
Having detailed product information—such as model specifics, size charts, and care instructions—on the product detail page significantly helps users make informed purchasing decisions.
Comprehensive and Cohesive "About" Page
The consolidated "About" page with various topics is well-received, as users find the content relevant and logically organized, providing a clear understanding of AMEERA.
Simplified Newsletter Subscription Process
Users prefer a more intuitive email subscription form, with placement in the footer seen as convenient. There’s also an opportunity to engage users with featured content on the newsletter page.
Improved Custom Design Page
Users had no issues navigating to the "Custom Designs" page, but clearer navigation is needed to highlight this option on the existing site. The clean layout, clear process, and straightforward form were appreciated, leading to faster task completion.
Iterations
High-Fidelity, Mobile Responsive Designs
With the feedback I received from testing my sketches, I replicated the screens in Figma. I then iterated on the designs to ensure layouts on each page were consistent and text was readable like in the hero section.
The high-fidelity screens were also designed for mobile responsiveness as that was the second most popular device users use to shop on the AMEERA website.
Home
Product Detail Page
About
The Ameeracan Newsletter
Custom Designs
Usability Testing
The goal of this usability test was to determine if the site redesign of AMEERA is easier to use and more accessible to users. 5 unmoderated usability tests were conducted using my Figma prototype I linked to the Useberry testing platform. 3 of the users tested on desktop while 2 users tested on mobile. 3 users were familiar with the original website and helped with testing previously while the other 2 testers have never seen the site or helped with testing previously. All users were asked to complete the following tasks.
Browse the site and add a collection item to cart
Learn more about AMEERA
Subscribe to the newsletter
Request a custom design
Insights
Navigation Challenges and Mobile Friendliness
Users struggled with site navigation due to non-clickable category links and lack of feedback for the 'Add to cart' button. However, mobile users appreciated the streamlined navigation and product detail menus.
Visibility and Usability of Custom Design Form on Mobile
While most users were satisfied with the custom design form, some missed it due to issues with scrolling on mobile devices.
Positive Reception of the 'About' Page Layout
All users easily accessed the 'About' page and appreciated its clear, well-organized layout.
Newsletter Subscription Layout and Accessibility
Users favored the layout of the newsletter page and found the footer subscription option convenient and easy to use.
Changes Made Based on Usability Testing
Improved the "Process" section on the "Custom Designs" page
This change was made so users don't mistaken this section as the end of the page and end up not continuing to scroll down to the form. It also creates more consistency of the layout across pages.
Before
After
1
Updated to match the "Sustainability" section on the "About" page
Addition of a Category Landing Page to Lessen Confusion in the Prototype
The category landing page was added since users were confused the category links under "Shop" were not clickable during usability testing.
Before
After
1
Added a category landing page when uses click link under "Shop" in the navigation bar
Learnings
Next Steps
Conduct another round of usability testing with the updated live website. In the next round of usability testing, I would ask users to complete the previous usability testing tasks using the updated live website instead of my prototype. Using the live website would be less confusing for users since everything is clickable. I would time the user and compare their time on task results to that of the time on task metrics from initial user testing using the pre-redesigned website. These results will allow me to compare metrics and analyze whether the redesigned website is truly an improved version.
Key Insights
Think about the project in more of a holistic view. Having this mindset from the start of the project ensures each method carried out and the metrics of the success considered during testing are thought out more intentionally.
User testing results are better the closer you can get to providing users with a realistic prototype. For this project, rather than presenting my sketches to users during initial user testing of the redesign and asking them to use their imagination, I created a basic prototype for my sketches in Figma which enabled users to click through from page-to-page. The experience was more clear to the user and therefore the feedback they provided was higher quality.
