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
4 weeks
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.
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 .
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.
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.
Ages: 18 - 24
Gender: Female
Ages: 18 - 24
Gender: Female
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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 PrototypeBefore 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.
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.
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.
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
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.
