Business Case
Under Armour, Inc. is an American company that manufactures footwear, sports and casual apparel. The company is now increasing its market presence in the Kids clothing space.
Problem
Under Armour realizes that parents are having a difficult time shopping for their kids. Boys and girls have different sizes and colors market it even more of hassle when you are looking for different items.
How can we create a solution that will provide our users with a seamless experience when shopping online for their kids?
Constraints
While I was able to be creative the solution had to stay on brand and not change the majority of the current navigation functionality.
Project Scope
Create a seamless experience for our users to shop for their kids
Learn how parents shop for their kids
Design Objective
Improve the shopping experience for parents shopping for their kids
Easy to use on brand top navigation that keeps users engaged
Results
I designed a new menu that helps our parent users find cloths for their kids more efficiently. Creating a seamless experience for our user increased sales of kids clothing by 5%.
My Role
UX Designer | User Researcher | Interaction Designer | Visual Designer
Methodologies
User Interviews, User Journeys, User Stories, Sketching, Persona development, Wireframes, Competitive analysis, Prototyping and User Testing.
Tools
Pencil and paper, Sketch, Excel, Axure, Marvel
Research/ Analysis
I conducted a competitive analysis of similar platforms and business who have a massive inventory such as Nike, Alibaba, Walmart, ect. I came to the conclusion that there wasn't a solution for the problem. What I need was a functionality that could handle a great about of items, the ability to quickly view and categorized sub categories such as various boys and girls sizing.
Who am I Designing for?
Going into user research I made no assumptions in how parents shopped for their kids. We quickly discovered parents leaned towards looking for the sizes first then looking for the product. The various sizes of multiple children in one family didn’t correlate to the standard age groups.
A child could be bigger or smaller for their age group which made shopping difficult for the parents. We also discovered that some products we offered for boy were colors that girls were interested in as well and vice visa creating more difficulty with option selection and sizing.
This was my “ah ha” moment and thought about how I could create a solution that would mimic the behavior of the parent searching behavior.
Personas
User Testing (Before)
We tested users that correlated with our personas with the current navigation.
User Testing (After)
After the design changes were made we interviewed the same parents.
User Flow
Competitive Analysis
In developing a solution, my process was to explore and see if there was already a solution to the problem we faced. Under Armour has hundreds of various products so I checked other companies who had a comparable inventory size.
Sketching and wireframes
In developing a solution I began with low-fidelity sketches on paper to get an idea how to go about making changes to the current information architecture of the navigation.
I divided these sections of the menu into step 1/2 because we read from left to right these are the steps parents took to search for their kids clothing. First by the size then by type.
I took the design a step further by placing indicators on the current part of the menu the user was on.
This is a sketch of a possible future design for the navigation to incorporate more call to actions and advertisements to increase sales.
Before
After
This is the current state of the live Under Armour site.
Interaction demo
Future Consideration
Right now for future considerations I would user test this to see if there is anything we might have missed. I have also taken the liberty to make some design updates.
Updated typography to for a clearer indicator between sizes on the left side of the menu
Added more CTAs to the bottom of the items to increase sales.
Increase the size of the entire menu to take up the full space because the current menu has already taken up more of the screens real-estate so I figured to maximize the utility of the space.