Client
AMEERA
Role
UX Designer
Tools
Figma, FigJam, Zoom, Useberry, Optimal Workshop
Timeline
April 2024 - May 2024
Problem
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.
Solution
A Streamlined Website That Reduces Friction and Keeps the Focus on the Brand
In the redesign, I focused on creating a seamless shopping experience that highlights AMEERA’s brand identity while making the site effortless to navigate. The new structure reduces unnecessary pages, ensuring users can quickly find key information without friction. Product detail pages were restructured to surface essential information more clearly, and the newsletter subscription was made more visible to encourage ongoing engagement. By simplifying navigation, improving searchability, and spotlighting the brand’s offerings, the new website aims to increase user confidence, reduce frustration, and ultimately drive conversions and engagement.
Project Kickoff and Site Audit
Understanding Business Needs and Current Usability Gaps
To start, I held a project kickoff with the client to understand AMEERA’s business goals, their vision for the redesign, and to set expectations around scope and timeline. From there, I conducted a detailed site audit, analyzing each page against Nielsen’s 10 usability heuristics. This helped identify where the site supported usability principles and where improvements were needed, providing a clear baseline for the redesign.
Competitive Analysis
Key Strategies Used by Comparable Fashion Brands to Attract Similar Target Markets
A competitive analysis was conducted on three fashion brands similar to AMEERA in concept, price point, and target market. The analysis focused on how these brands present their products online, offering insights into industry standards and effective site merchandising strategies.
Usability Testing
Establishing a Usability Baseline: 5 Target Users Evaluate AMEERA’s Website to Identify UX Strengths and Improvement Opportunities
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.
Analysis
Affinity Map Built from 5 Interviews to Uncover Common UX Themes and Pain Points
"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"
Prioritization
Identifying High-Impact Pages for the Redesign
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
Clarifying Navigation Through Hybrid Card Sorting
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.
Information Architecture: Sitemap
Defining a Streamlined Sitemap Based on Card Sort Results
The card sort results largely confirmed my hypothesis of how users expected the site’s information to be organized. Using these insights, I created a streamlined sitemap by consolidating pages, reducing noise, and keeping the focus on AMEERA’s brand and products.
Sketches
Sketching Page Concepts for User Testing
Key pages were sketched to test usability and gather feedback before moving into higher fidelity.
Home
Product Detail Page
About
The Ameeracan Newsletter
Custom Designs - Version 1
Custom Designs - Version 2
Testing
Validating Navigation and Layout Through Prototype Testing
Moderated Zoom user testing sessions were conducted with 3 returning participants while they navigated the basic prototype in Figma. Users were asked to complete 5 tasks and encouraged to talk through their thought process if anything was not clickable.
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.
High-Fidelity
Iterating Designs for Consistency, Readability, and Mobile Responsiveness
Home
Product Detail Page
About
The Ameeracan Newsletter
Custom Designs
Usability Testing
Measuring Improvements with 5 Users Across Desktop and Mobile Devices
I conducted five unmoderated usability tests using my Figma prototype linked through Useberry. Three participants tested on desktop and two on mobile. To balance perspectives, three were returning users familiar with the original site, while two were new to AMEERA. Each participant was asked to complete a set of core tasks to evaluate the redesign’s ease of use and accessibility.
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.
Final Screens
Two 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.
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.
1
Added a category landing page when users 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.
