Smart Threads
Greetings! I'm Drew
Junior UX Researcher/Designer
Made with

Smart Threads

Smart Wearables & Clothing E-commerce Mobile App

My team and I created a mobile e-commerce app prototype.

Smart Threads is a curated selection of the world's smartest wearables and clothing. 

  • The app was geared to millennials, exercise enthusiasts and athletes.  
  • We had 2 weeks to work on the project.
  • My primary role was UX Researcher, on a team of four.

Research

102%
Projected growth for smart apparel by 2020.
63%
Percentage of millennials who shop on their smartphone every day.
27
Billion dollars spent on the smart apparel industry in 2017.
2
Trillion dollars in total global e-commerce sales in 2017 .

Social Listening

”... the word ‘choose’ doesn’t exactly tell me what to expect ...when I click on the button I shouldn’t have to be guessing.”

~Jack Simpson www.econsultancy.com


“.. the design is simple, it’s highly visible on the page, and it’s placed in the right-hand corner which is where most customers know to look for a shopping cart or add to cart feature.”

~Joseph Putnam www.rejoiner.com

Problem Statement

Problem Statement

There is not one central online source for smart wearables.

Many ecommerce sites offering smart apparel have cumbersome and difficult to navigate shopping processes.

How might we reduce pain points and friction so that our customers are able to quickly find what they are looking for and easily purchase their goods in one central location?

Assumptions & Hypothesis

We Assume

People want to shop for all their smart wearables in one place.

Shoppers are frustrated by e-commerce checkout processes. 

Customers will download the app and use it to shop e-commerce (versus web, desktop, etc). 

We Hypothesize

We believe if we provide a centralized e-commerce platform that is easy to use, with a clear path to completion and delightful interactions, there will be an increase in sales and revenue. 

Heuristics

Smart Threads

Heuristics

Smart Threads was driven by these design principles.

  • Efficiency of Use

    Intuitive navigation, speedy check out 

  • Consistency & Standards

    Use same pattern, systems & language throughout

  • Modern & Minimalist Design

    Provide only necessary info in an elegant way

Best in Class Analysis

Smart Threads

The Mighty Amazon

The #1 e-commerce site in the world, Amazon, has a seamless check-out process that's done in 5 simple steps. 

We drew inspiration from Amazon and incorporated a speedy, intuitive check-out flow in Smart Threads.

Smart Threads

Competitive Glimpse

Moving further into our competitive audit, I identified Dollar Shave Club and Nike's use of elegant and easy to navigate product pages, as well as a simple navigation bar. 

I was also very impressed by Nike's sleek modern, edgy design and overall minimalism approach. 

Style Guide & Mood Board

Smart Threads

Style Guide

The team developed our style guide based on my best in class analysis.

We included a simple design of the navigation bar and forms, bold colors, as well as clear Call to Action buttons.

Smart Threads

Mood Board

A mood board is defined as a collection of assets and materials intended to communicate the style, voice, direction, and language of a particular design, brand, or project.

We created a mood board that elicits an emotional response. We wanted to show how a user would feel when using Smart Threads to shop. 

User Testing

Smart Threads

User Guidance

With my partners we conducted user testing at a community event. Pictured to the left is my partner interviewing a subject matter expert who owns multiple e-commerce businesses, all catering to millennials.

This gentleman provided us with the followng important qualitative data:

-he would like instant notifications

-he wanted to be able to check out with 1 hand 

-he'd like to receive SMS confirmations.

Smart Threads

Meanwhile in Millennialville

During user testing, we specifically targeted millennials, knowing they would be Smart Threads core users. 

We tested one version with the purchase call to action in the middle of the screen, and one version with it at the bottom. Through our users (8 out of 11 people tested) we found it was less aggressive as a sticky on the bottom of the screen. 

Based on that feedback, we kept the Buy Now button on the bottom. 

Information Architecture

Smart Threads

Site Map

Our Site Map was created in Sketch.  We focused on the checkout process, the shop, account and cart. The over-arching goal was minimal effort to benefit for users. 

Smart Threads

User Task Flow

Based on my competitive audit and our user testing, we created a task flow in Sketch with a 3-step check out process. Eat your heart out Amazon! 

Conclusion

Smart Threads

Smart User Experience

The biggest takeaway from creating Smart Threads with my team was the power of user testing. We received such insightful feedback early on in the process (at the wireframe stage), allowing for us to iterate on the fly, versus designing an entire app and then having to go back and make changes after the fact. 

I learned that to be a great UX Researcher and Designer, you must put the user at the heart of your design experience. When you do this efficiently, the design process is strengthened and the final product is more aligned to users needs, emotions and preferences.  

Smart Threads