Steez Project Overview


Steez is a new iOS app for people that are looking to purchase any snowboarding gear or equipment. Because of the increasing demand in online shopping nowadays, they are planning to integrate an AR feature within the app to give customers a better online experience.


UI/UX Designer - Research, Interaction Design, Visual Design, Prototype, Testing


Design Steez's app that allows users to view a catalog of snowboard gear and equipment, including an option to view them in AR.


Sketch, Adobe Illustrator, Adobe Photoshop, InVision


  • Design an end-to-end application for Steez
  • Design a prototype with the implementation of AR
  • Design their logo and brand identity


4 weeks

Final Prototype



  • Research Plan
  • Secondary Research
  • Provisional Personas
  • Primary Research
  • Empathy Map


  • User Persona
  • POV Statements
  • HMW Questions
  • Business/User Goals


  • Brainstorming
  • Product Roadmap
  • Application Map
  • UI Requirements
  • User & Task Flows
  • Low Fidelity Sketches
  • Mid-Fi Wireframes


  • Mid Fidelity Prototype
  • Usability Testing
  • Affinity Map

Visual Design

  • Logo & Branding
  • High Fidelity Prototype


Research Plan

To start off on how I can help Steez, I needed to gain a better understanding about the current snowboarding market, how AR is used in online shopping, and user's experience in purchasing snowboard gear or equipment. I outlined a research plan to state the objectives and methodologies on how research will be conducted.

Research Goals
  • Identify a target demographic
  • Understand the online snowboarding market
  • Understand how AR is used in online shopping
  • Identify the direct/indirect competitors
  • Find the customer goals, needs, frustrations, and motivations
Research Methodologies
Secondary Research
  • Market Research
  • Competitive Analysis
Primary Research
  • Have purchased their own snowboard gear
View the full Research Plan here

Market Research

Through market research, I developed a better understanding on what the current snowboarding market was like, as well as statistics on AR. This allowed me to gather important information on the target market, trends, and other statistics regarding snowboarding and AR .

Snowboarding Statistics

  • 80% of Interviewed people have age range from 21 to 30 years (2019 Snowboarding study).
  • Millennials represent the largest group of snowboarders and skiers.
  • While quality remains at the top of the list for consumers, brand identity increasingly influences millennials’ purchasing decisions.
  • More shoppers are looking for one jacket to conquer the mountain and the office commute on a Monday morning.
  • Baby boomers (aged 52-70 in 2016) and those 71 and older have steadily become a smaller share of the visitor base as they’ve aged.
  • In 2016, there were approximately 7.6 million participants in snowboarding in the U.S., down from 7.68 million the previous year.

AR Statistics

  • More likely to buy when there is an AR tool allowing shoppers to see an image of themselves in the garment.
  • AR can help customers to have a more accurate understanding of how a product is going to look and feel in their space.
  • 61% of consumers say they prefer retailers with AR experiences
  • 40% of consumers say they would pay more for a product that they could customize in AR.
  • Due to the closure of retail shops and malls amid the pandemic, the trend of online shopping and e-commerce has seen exponential growth.
  • It was expected from the retailers to spend around $1.5 billion on the development of AR and VR technologies in the year 2020.
  • Online shoppers tend to order multiple sizes and colors, with the intent of sending back the items that don’t fit or aren’t the right color.
View the full Market Research here

Competitive Analysis

Once I gained a better understanding on the market on snowboarding and AR, I began to look for direct and indirect competitors to understand their strengths and weaknesses. This allowed me to gain more insight on how Steez can be designed as a stronger competitor.


  • Large catalog of items users can search and look at
  • Home screen gives you a list of categories which makes it easier to initially search


  • Top nav is crowded
  • Doesn’t show recent searches


  • Well known with many stores in the U.S.
  • Gives suggestions and recommendations on the home screen based on recent searches


  • Text spacing in form boxes are not all consistent


  • Very well known sporting goods retail company
  • Has a feature to connect with a user’s iPhone health app to earn points


  • Cluttered information and items on the home and shop screens
View the full Competitive Analysis here

Provisional Personas

Using the findings gathered through market research, I needed to identify the target users to search for before conducting interviews. Based on the target demographics and top trends, I was able to create 2 provisional personas that would guide me in who I potentially needed to look for.

Conserving Purchaser

Ages: 18 - 24
Gender: Female

Mindful Purchaser

Ages: 18 - 24
Gender: Female

  • Durable and dependable snowboard gear
  • Find good reviews on products
  • Make sure the snowboard is made well to carve in
  • Spending a lot of money
  • Uncomfortable and unreliable snowboard gear
  • Align with the values of the brands they’re buying from
  • Conveniently shop for gear
  • Make sure reliable research is done before purchasing
  • Not buying anything after commuting to a store
  • Products are not what they expected

User Interviews

To start the primary research, I referenced the provisional personas and gathered 7 participants to interview. All participants have purchased snowboard gear or equipment and interviews were all conducted remotely. This allowed me to gain a better understanding on the users' goals, needs, motivations, and frustrations when purchased snowboard gear or equipment.

View the full Interview Findings here

Empathy Map

Using the interview findings, I created an empathy map to synthesize, organize, and understand all the findings. This allowed me find patterns within the observations, which led to insights and needs.

View the full Empathy Map here


User Persona

Introducing...Aaron! He is the user persona that represents Steez's target users. Aaron is based on the gathered findings from the secondary and primary research. He will be referenced throughout the whole design process.

POV Statements & HMW Questions

After defining our target user, I created POV statements using Aaron, which would identify what our end goals were. HMW questions were also created to began brainstorming potential solutions. This was based on the insights and needs gathered previously.





Users want to purchase snowboarding products at the best price.

To be able to know the best price of the snowboarding product.

Aaron needs to know the best price of the snowboarding product because he wants to purchase snowboarding products at the best price.

How might we help Aaron know the best price of the snowboarding product?

Users like to show off a cool fashion style while snowboarding.

To be able to know what styles are popular.

Aaron needs to know what styles are popular because he likes to show off a cool fashion style while snowboarding.

How might we help Aaron know what styles are popular?

Users want to know that the snowboarding gear and equipment they’re getting is a good fit for them.

To be able to know the exact details of the snowboarding gear and equipment.

Aaron needs to know the exact details of the snowboarding gear and equipment because he wants to know the gear and equipment he’s getting is a good fit for him.

How might we help Aaron know the exact details of the snowboarding gear and equipment?

Business & User Goals

With users goals defined, I needed to slightly switch focus and define the business goals and see where it overlapped with the users. This helped in understanding the solution choices needed to move forward.



To begin the ideate phase, I started out by doing a personal brainstorming session using the HMW questions. I did a rapid mind mapping brainstorming activity that allowed me to gather a number of solutions in a short amount of time. I timed myself 3 minutes per round and there were 2 rounds per question. Within the time limit, the goal was to come up with as many potential solutions to each question.

View the full brainstorming documents here

Product Roadmap

After brainstorming solutions, a product roadmap was created to prioritize key features and screens for the app. These were all prioritized based on how well they met the needs of my user persona as well as their feasibility within this project.

View the Product Roadmap here

Application Map

Using the features/screens that were prioritized in the product roadmap, I created an application map that outlines the Steez app's information architecture. I first determined the main navigation and screens then placed the sub screens and features where it fit best within the structure.

UI Requirements

Now that I have an application map that shows how the app will initially be laid out with the screens and features, I created a UI requirements document that states the essential elements and features in detail for each screen. While continuing to use the goals, needs, frustrations, and motivations from Aaron, I created 3 tasks to understand what pages, features, and elements will be needed exactly.

Task 1: Aaron wants to add items that qualify with Steez’s given offers to his cart.
Task 2: Aaron wants to favorite a trending item he is interested in.
Task 3: Aaron wants to see the height of the snowboard when placed next to him.

View the UI Requirements Document here

Task Flows

Using the tasks created in the UI requirements, I created 3 task flows that shows the specific steps and screens Aaron would need to go through to complete each task. This helped in understanding whether the tasks were logical and straightforward to complete.

View all of the Task Flows here

User Flows

To understand more specifically on how decisions might be made when navigating through the app, I created 3 user flows using Aaron and laid out how he would make decisions in certain scenarios. This helped in understanding the user's behavior on how they might interact with the screens and features within the app.

View all of the User Flows here

Low Fidelity Sketches

Now that I got an understanding of how a user will interact with the app as well as how the app will be organized, it was time to start sketching out some ideas of how the screens will look. I sketched out screens while continuing to refer to the UI requirements, task/user flows, persona, and competitor apps.

View all of the Low Fidelity Sketches here

Mid Fidelity Wireframes

After I was set on the general idea of how the app will look, I continued to use my sketches and created mid fidelity versions of the wireframes. This allowed me to focus on the visual hierarchy and placements of the layout before adding in all the UI elements.

View all of the Mid Fidelity Sketches here


Mid Fidelity Prototype

Using the mid fidelity wireframes, I created a prototype via InVision to began the usability testing with participants before the high fidelity version. This was to observe how participants will interact with just the organization and layout of the site.

Mid Fidelity Prototype

Usability Testing

Before the testing was conducted, a usability testing plan was created to outline the objectives, methodology, participants, and tasks. Using this I was able to conduct a moderated remote testing with 7 participants. The think aloud method was prompted and all observations were documented.

Testing Objectives
  • Identify the overall ease of use in navigating through the Steez prototype.
  • Understand the efficiency in users completing each task.
  • Understand the approach users choose to complete each task.
  • Identify any frustrations, confusions, and misunderstandings.
Testing Findings Overview
  • # of Participants: 7
  • 4 Males & 3 Female
  • Ages 22 - 37
  • 100% completion rate
  • 97.7% error-free rate
View the full Usability Testing Plan here

Affinity Map

With the findings gathered from the usability testing, I synthesized all the notes and observations into an affinity map. This was to identify any patterns, insights, and recommendations for the prototype. This allowed me to understand and prioritize more clearly on what updates are needed to the prototype.

View the full Affinity Map here

Visual Design

UI Kit

With wireframes tested and updated, the visual design was now the next thing to do. With the branding, I came up with 5 brand attributes that would best describe Steez. The attributes are minimalistic, reliable, trendy, innovative, and inspiring. Using Pinterest, I created a mood board based on those attributes to guide the visual direction.

While continuing to reference the brand attributes and mood board, I sketched out logos that could best represent the branding. Once I decided on a logo to use, I then created a style tile that would present the color palette, typography, and imagery.

To gather every UI element, including everything stated on the style tile, I created a UI kit. This is created in order to maintain the consistency between the brand and the site as it gets updated.

View the full UI Kit here

High Fidelity Prototype

Once the branding and revisions done to the wireframes were completed, I added all the UI elements to the mid fidelity wireframes and created a high fidelity prototype via InVision.

Final Prototype

Reflection/Next Steps

As a person who enjoys snowboarding every winter season, working on this project was fun to do. I was able to learn more on how businesses and brands sell and market their snowboarding products online. With that knowledge, it helped me to understand better on how AR could be implemented in snowboard shopping. Projects like this remind me of how much technology is advancing and the convenience it can bring to people if used correctly.
A takeaway I got out of this project was to not overthink the design. Because Steez is a brand new app, it is best to give it room to grow and not design more than I am supposed to.

Next steps will include:
  • Usability testing with the high fidelity prototype.
  • Explore VR capabilities.
  • Continue to update, iterate, and maintain product.