Ensemble
Responsive e-commerce apparel site and rebranding.
Overview
Ensemble is a fictitious clothing store, for all ages and styles at low prices. They’ve had success offline with stores, but are expanding into eCommerce and need a responsive website and modern logo redesign. I needed to find a way to make it broadly appealing and still modern. This was my first UX design project.
Timeline
10 wks
Role
UX/UI Design, Branding
Discover
Researching the problem space and finding user needs
Research Goals
-
Find common pain points for users.
-
See why users choose online or in-store.
-
Learn who our users are and their needs.
-
Understand existing user habits and expectations.
Methods
-
Secondary research
-
Competitor analysis
-
User interviews
Secondary Research
I began with a Google search about the industry from sources such as this article on and this blurb. Below are some key points I came across. I wanted to know shopping trends, habits, and attitudes from all demographic groups.
Key Insights
-
Free shipping, easy returns, and accurate product details are the top concerns
-
New demand for "at-home" solutions with remote work being a new normal
-
Surviving the impact of COVID-19 is a new measure of success
-
Millennials and Gen-Z are the top online shopping groups
-
eCommerce makes up 38.6% of all apparel sales
-
Nearly half of shoppers research product on social media
-
Smartphones are the most popular device for shopping
-
Born-on-web businesses are growing faster than big enterprise
Competitor Analysis
I looked into the competition for design patterns and business practices. I found affordable apparel businesses from sources such as this article and this list. I did an in-depth competitor analysis of available features and policies to understand user expectations.
User Interviews
I recruited participants and engaged in active listening to gain insights from target users on their pains and delights when shopping online for apparel. Right after the interviews, I wrote up a research debrief to summarize my first impressions. Then, I watched the video recordings and took notes on the answers, but also was able to see how I could improve upon my delivery and interviewing skills.
Participants
-
4 female and 2 male
-
Ages 26 - 51
-
Shops at least every 3 months
Interviews
-
5 remote and 1 in-person
-
Recorded for analysis and notes
-
15-30 minute duration
It did not say in the description that they were stretch denim…why did they not disclose this important thing? And their sizing is unreliable.
Even though I like their products, I avoid it because browsing is so annoying. Unless there is something specific I want.
There is no guarantee that it’s gonna be what I think it is unless there are a million reviews, and a ton of pictures, and somebody with my exact body size and shape has tried it.
Affinity Diagram
I went over the interview notes and the research debrief and wrote out user comments and answers, grouping the similar ideas under a label to form clusters. Some notes could actually go in more than one spot, and to track that I used smaller and different colored post-its with numbers signifying the links. I would only do this on a physical board again if I was in a group setting, as it takes a lot longer alone than just doing it digitally.
Research Insights
After reflecting on the notes, observations, affinity diagram, these were the main discoveries.
Gains
-
Confidence in size and quality of products
-
Reviews with customer images and body type info
-
Organized and uncluttered layout and interface
-
Finding what they want quickly at a good value
Pains
-
Inability to feel the texture or check the fit online
-
Spending a lot of time researching about sizing
-
High shipping costs and long wait times
-
Inefficient navigation and clutter layouts
Define
Setting our goals and priorities to solve the problem
Persona
I took the insights from the research to shape this persona. Most participants were female, worked, had children, and were in their mid-30s.
Empathy Map
When making the empathy map, I tried to imagine any scenario Sarah Wilson might come across on any given day, while consulting the persona on how she might react to situations.
Project Goals
I identified the intersection of user needs, business goals, and technical considerations by cross-referencing the design brief and user research insights.Technical considerations were informed by what I've learned about web development.
Feature Roadmap
With established goals, a persona, and a competitive feature analysis, I began to prioritize feature rollout in phases, focusing on the essentials for a minimum viable product (MVP).
Design
Ideation and design of structure, user flows, wireframes, and UI elements
Card Sort
I began with creating a list of items to be organized into categories. The items ranged across a variety of apparel items. I analyzed the groupings and standardized those similar in name or function. I was surprised by how differently people organize information on a seemingly "obvious" list. Some items were easily grouped and others were less clear. For example, some users organized by season and look, while others organized by what the garment itself is. I believe a larger sample set would really have helped make this less ambiguous.
Sort Details
-
Remote via Optimal Sort
-
6 participants
-
30 cards
-
Open card sort
-
participants created their own categories
-
no pre-made categories
-
Sitemap
I made a sitemap to visualize the page structure like a blueprint. I used the card sort final categories as a starting point, and then filled in the blanks with pages and categories not captured in the card sort.
Task & User Flows
The critical task flow for this project was to find and purchase an item. The user flows show all the paths, choices, and interactions that a user may take within the product. This served as a basis for designing the wireframes.
Sketches
I began designing the screens and interactions, starting with sketches for quick ideation and to have a clear direction before working in Figma.
Wireframes
Based on sketches, the mid-fidelity wireframes were created as a skeleton for what would eventually become full UI designs. I used components and styles even at this stage for easy global changes if needed and to help with future UI styling.
Desktop Wireframes
I completed the desktop first to have a larger canvas to work with to see all possible elements.
Responsive Wireframes
Screens for tablet and mobile for the homepage.
Logo
A business goal for Ensemble was to have a modern logo design that would still appeal to a broad audience. I made sure it was easy to understand and simple, at all sizes. I wrote out a wordmap to help design the desired feeling.
List of adjectives describing the brand.
Fast exploration of logo design ideas.
List of adjectives describing the brand.
Style Guide
I wanted Ensemble to feel friendly and approachable. I chose trustworthy blue, optimistic orange, and well lit lifestyle images. I went with sans serif typography for legibility and broad appeal.
UI Kit
This document contains user interface components, colors, and typography used in the project.
UI Designs
Wireframes provided the structure for the site pages, and the UI styles and elements were plugged into the wireframes to show real content, or created and adjusted as needed.
Test
Building a prototype, usability testing, and revisions
Prototype (V1)
I referenced the user flows from earlier in the project and applied the interactions to the hi-fidelity UI screens. There were a few iterations to the prototype needed during and after the usability tests.
Usability Tests
I tested my designs from new participants to avoid pre-existing bias or familiarity. I followed the test plan and script, taking them through the scenarios. After the scenarios were completed, I asked a series of follow-up questions, in a conversation style. I later watched the videos to take notes on behaviors and answers.
Participants
-
4 female and 1 male
-
Ages 24 - 63
-
Shops at least every 3 months
Interviews
-
2 remote and 3 in-person
-
Recorded for analysis and notes
-
15-30 minute duration
Feedback Grid
I made a feedback grid, divided into sections and filled with observations and notes. This helped to prioritize which revision to do first.
Key Takeaways
These are the main points taken from the usability test and feedback grid.
Pains
-
Apply button on filter menu didn't work as users expected
-
Some users said they would filter on size first as a general rule
-
Some users scrolled the home page looking for navigation options
Gains
-
All participants completed the scenarios
-
Brand felt trustworthy and family-friendly
-
Brand is good for decent quality and low prices
The apply button just felt like...really, I have to press another button? Just go!
I felt like I was actually going to order something on accident.
It does definitely give off family brand vibes. It's not a site that I would immediately say "nope".
Priority Revisions
Analyzing the usability tests gave me common issues people faced, and I prioritized resolving those problems.
-
Removed the "apply" button on filters and changed to auto apply
-
Added more home page navigation options and added women's page
-
Hid the target item in the scenario so users had to filter to find it
-
Increased body text size across the whole design
-
Minor component alignment changes
-
Changed icon sizing of the heart on product images
Final Prototype
Here is the result after I implemented the changes into the final version of the prototype.
Reflection
Thinking back on lessons learned and future plans
What I Learned
The main thing I learned here was how assumptions are easily refuted when we get real end users involved. What might seem obvious is simply not the case for someone else, and vice-versa.
With it being my first UX project, I had some uncertainty about whether I was conducting the research and interviews properly, but after I watched an example video by a seasoned designer, I felt I was doing pretty well. There were some growing pains with Figma during all of this, with it being a new tool for me and its recent wave of updates to auto-layout and variants. I committed time to understanding those features and develop smart processes early on.
My favorite was the visual design of the UI and branding. A close second was the interaction design with the task and user flows, and then translating them into the wireframes and prototype. It is probably because all of those things are visual ideation.
Next Steps
With extra time and budget, I would first improve the information architecture with a hybrid card sort with a larger card amount and participant sample size. Second, I would add in the searching user flow to the prototype, since that is a common method for users. Finally, I would explore adding in some extra design elements to give it a slightly less generic look without cluttering the interface and overwhelming the user.
