Ensemble
Discover
Research to find user needs and frustrations and validate assumptions.
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.
Methodologies
-
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.
A new metric of success is how well companies survived the impacts of the COVID-19 pandemic.
Free shipping, easy returns, and accurate product details are top concerns for users.
E-commerce makes up 38.6% of all apparel sales.
Nearly half of shoppers research products on social media platforms.
There is a new demand for "at-home" solutions since remote working is a new normal.
Millennials and Gen-Z are the top online shopping group.
Born-on-web businesses are growing faster than bigger enterprise companies.
Smartphones are the most popular devices for online shopping.
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 videos and took notes. This also helped me to see how I was perceived by the by the participants.
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 on post-it notes.
I grouped similar themes 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.
Research Insights
After reflecting on the notes, observations, affinity diagram, I was able to pinpoint the overlaps in the primary research and the user insights to find key needs and pains.
Needs
Confidence in size and quality of products being purchased.
Reviews with customer provided images and body type info
Organized and uncluttered layout and user interface
Find what they are looking for quickly and at the best value.
Pains
Inability to feel the texture or check the fit when shopping online.
Spending a lot of time researching about sizing.
High shipping costs and long wait times.
Inefficient navigation, cluttered layouts, and unnecessary clicks.
Define
Setting our goals and priorities to solve the problem.
Persona
I took the insights from the affinity diagram as a basis for developing this persona. Most participants were female, worked, and had children. The mid 30s is the median age of the target user. All of this formed the traits of Sara Wilson.
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.
Similarity Matrix
The similarity matrix shows how frequently different items were sorted the same way.
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 take this further and 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 task flow depicts a singular path to accomplishing a specific task. The critical task 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.
Wireframes
I began designing the interactions, starting with sketches for ideation and to have a clear direction before beginning in Figma. These were mid-fidelity for an easier transition into adding in the real content and UI elements, using components and styles.
Sketches
Quick ideas drawn up before digitizing.
Desktop Wireframes
These pages were created in Figma based on the sketches and one user flow.
Responsive Wireframe
Screens for tablet and mobile for the homepage.
Logo
Part of the design brief and 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, while not being too modern. 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 bright and happy lifestyle images. I went with sans serif for legibility and broad appeal.
UI Designs
Wireframes provided the structure for the site pages, and the UI elements were plugged into the structure to show real content.
Test
Building a prototype, usability testing, and revisions based on results.
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 recruited similarly to the user research interviews, though they were different participants, to avoid pre-existing bias or familiarity.
After the scenarios were completed, I asked a series of follow-up questions, in a conversation style. As before, I later watched the videos to take notes on behaviors and answers given.
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
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".
Feedback Grid
The approach was similar to the affinity diagram in that it had existing clusters based on themes, and filled with observations and notes. This helped to prioritize revisions.
Key Findings
These are the main points taken from the usability test and feedback grid.
Apply button on filter menu was not clicked by 4/5 participants their first try and 2 said it was odd.
Some users said they would filter on size first as a general rule.
Brand felt generic but trustworthy and family friendly, for 4/5 participants.
Some users would have scrolled the home page and used other navigation options.
Brand is good for decent quality and low prices.
Brand could use some visual improvement with colors and designs to feel less basic.
Priority Revisions
Analyzing the usability tests gave me common issues people faced, and I prioritized resolving those problems.
Remove apply button on filter dropdowns.
Hide the target item for the scenario to require filtration by the user.
Add more home page navigation options.
Increase body text size, minor component alignment changes, and icon resizing.
Final Prototype
After usability testing analysis and defining priority revisions, I implemented the changes into the final version of the prototype.
What I Learned
The main thing I learned here was how assumptions are easily disproven when we get real end users involved. What might seem obvious is simply not the case for someone else, and vice-versa.
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 didn't feel like I was that far off when comparing.
My favorite aspect of the entire cycle is the visual design of the UI and branding. I had quite a lot of fun discovering the look and feel of the brand, as well as how to make clear and on-brand UI elements and components.
A close second favorite 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.
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 decided it was the perfect time to understand those powerful features from the beginning and develop good habits.
With extra time and budget, I would iterate further on a couple things. First, I would put more into the information architecture with another card sorting exercise. It would be a hybrid sort with some preset categories that are common, but still allow for the participants to create their own if needed. Also, a larger card amount and participant sample size would be helpful to get better insights.
Second, I would explore adding in some extra design elements to give it a slightly less basic look without cluttering the interface and overwhelming the user.
Finally, I would add in the searching user flow to the prototype, since that is a common method for users.