Overview
My Role
User Research, User Interviews, Wire framing, Usability Testing, Hi-Fi Mock Ups
Tools
Sketch, Axure, Invision, Otter,
Pen and Paper
Team
Solo Project
Sprint
2 Weeks
Objective
The main objective for this project was to add more functionality to Expressions by adding an Ecommerce feature to give customers an opportunity to buy online.
Thoughts & Feelings
I had just moved to the city and had no idea where anything was located. I was excited to get started but also nervous. Being the only designer on this project, I had to make sure to manage my time well.
Problem
Solution
Expressions shoe store currently has no way to buy merchandise off their website. Customers need a way to order shoes and apparel online because they want a more convenient and easy way to buy products
By creating an online store, customers would have better accessibility and selection of shoes and apparel
About The Store
Expressions is a popular athletic shoe and apparel store based in Boston and it has 30 locations in Massachusetts.
Their website was extremely outdated and not functional. It was primarily being used to showcase merchandise linked to their social media (Instagram).
Beginning My Research
I started my research by visiting one of their most popular stores located at Downtown Crossing in Boston, MA. After speaking with the manager and some patrons I was able to determine the identity of the brand and overall flow for the shopping experience based upon how the store organized it's items.
User Research
I created an online screener survey to qualify possible interview candidates and identify the frequency they purchased footwear and what characteristics the user valued the most.
Interviews
I interviewed 8 users total and while doing so, transcribed with Otter to highlight key insights.
“I like to shop by style...I usually sort them out by relevance like which are popular”
“I like finding deals because I feel like I won something...I’m on a budget”
“I normally stick to a particular brand….Reebok I’ve used for years and they’ve always been a comfortable shoe for me ”
Results
-
Users were often loyal to a brand
-
Shopped by style
-
Wanted to save money without sacrificing comfort
Card Sorting
I developed a card sort through Optimal Sort to better understand how users categorize shoes and apparel. After interviewing each user, I requested them to complete a card sort.
When testing 5 open sorts I discovered that although the users were familiar with the Brands, they were unable to categorize them any further. When asked if they would like to be able to sort by style they said yes.
This lead to 3 closed sorts where the participants would organized by style/ type (Running, Basketball, Casual, Boots, Training, Accessories, Clothing). I found that this yielded more accurate results.
Persona
Element Analysis
Competitive Analysis
I ran a competitive analysis to determine the current market for similar companies that my users considered competitors. During that time I viewed elements in their designs to see how we could enhance the overall experience of the website. I later implemented these characteristics into my design process.
Navigation
Website Guidelines
I had to redesign the homepage due to the fact that it lacked a navigation bar and had a lot of broken features. I wanted to include common elements that my users thought supported the brand and the industry.
-
Simple, to lessen the feeling of being overwhelmed
-
Easy, to navigate
-
Visual, include multiple pictures
-
Options, give the user multiple ways to arriving at a choice
Old Site
Site Map
Expressions homepage had almost no depth due to the fact that is was mainly used to market their instagram account.
I wanted the navigation to reflect the users experiences while shopping in store, so all types of users could easily find the item that they wanted naturally.
Breaking it down by how a store is traditionally built- Mens, Women's, Kids. Further breaking those down - Shoe Style, Clothing, Accessories.
Designing The Shopping Experience
Sketches
When sketching I wanted to retain a lot of the same elements that the previous website had but expand on them to make it more functional.
I moved the position of text, pictures, labels, and buttons to recreate the shopping experience. The data from my interviews and card sorting became my navigation.
Customer Service and Social Media were the biggest elements of the Expressions old website.
Home Screen
Dropdown
Product Page
Product Select
In my research I discovered that shopping for a shoe or clothing is a very visual act. I kept this in mind when developing the main screen. To support that discovery, I included a large pictures so users could see newly featured items.
Below it individual pictures for the Brands. Further down I provided pictures for shoe and clothing styles. The idea behind this was to make each picture clickable to provide a shortcut for a quicker shopping experience.
Incorporating faceted filters was also a huge game changer when it came time to zero in on a specific search.
Wireframes
Product Select
Check Out
Usability Test
I conducted 2 rounds of testing with 8 people. Each round I iterated on my design to improve functionality based on my users responses.
2
Rounds
8
People Tested
Iterations
Hi-Fi Mockup
Next Steps
I really enjoyed this project because it allowed me to work through the entire design process. It taught me time management and having a project plan are key for completion and I discovered my love for information architecture.
Going forward, I would like to make my wireframes Hi-Fi and test with more users that are regular shoppers at Expressions..
