Ski Conditions APP/WEB
The Ski Conditions APP/WEB is based in the united states. The goal of this app is to inform the user of the current ski conditions.
Role: Lead UX designer for hypothetical product
The Problem
Customers buy a ski ticket and later realize they don't like the ski conditions.
The Solution
Inform the user of the ski conditions in their area.
UNDERSTANDING THE USER
User Persona
Sean has a family and wants to know the ski conditions because he doesn't want to spend much money if the ski Conditions aren't good.
Age: 40
Education: Bachelors
Hometown: Winchester MA
Family: Wife, Son, Daughter
Occupation: Sales
Pain Points
Research Summarization
I conducted interviews to get a better picture of the users that I was designing for. After the interviews, I got a good idea of the processes and the pain points they experience when planning a ski trip.
Starting the Design
Story Board
I created a storyboard to visualize how the user would successfully figure out the ski conditions. Creating this also helped me get a broad idea of what to include in the WEB/APP.
Site Map
The layout allows the user to get the information that they want quickly. From the start page, the user has the option to get mountain specific information or regional information.
Paper Wireframes
When wireframing, I kept my research participant's wants, needs, and pain points in mind. I put together a list of features and objectives to keep in mind when sketching the paper wireframes. One of the main goals was to add a lot of visuals to help quickly guide the user through the interface.
Digital Wireframes
Adding large navigation cards helps the user quickly navigate to their region. Once the user clicks on a region, all the ski mountains will be shown on a map. The map design gives the user the ability to quickly compare the different ski mountain conditions.
Low Fidelity
To prepare for usability testing, I created a Low Fidelity prototype to show how a user will go about making a table reservation.
key Pages
page 1: Used to navigate to a region
page 2: Figure out regional conditions
page 3: Figure out specific mountain conditions
Page 4: Used to make a conditions report
page 5: Filter used to input conditions
Usability Study
After creating wireframes and a prototype, the next step was to do an unmoderated usability Study. I asked 4 participants to complete different tasks in the app. From the test, I gained valuable information that helped me improve the APP/WEB.
Main Findings From Usability Study
Need a guide for the conditions icon
Need a way to get back out of the filter
Need more descriptive text
Refining Design
Mobile Design Changes
What Changed?
I added an icon that will allow the user to implement the map layer changes. Also, a back button gives the user the option to go back to the map screen without making changes.
Before Usability Study
After Usability Study
Web Design Changes
What Changed?
Adding a question icon will help explain each condition's meaning to the user. I added titles for each section to give the user a better idea of what they're looking at. Also combining the user review elements into one card helps give the page a cleaner look.
Before Usability Study
After Usability Study
Phone Screen
Desktop Screen
High Fidelity Website Interaction
This video visually demonstrates how a user would interact with the Website.
High Fidelity APP Interaction
This video visually demonstrates how a user would interact with the APP.
Impact:
Users thought that the app could be very informative. “ I liked how you can get an honest opinion from skiers on the mountain.”
What I learned:
I learned that it is important to keep each feature's layout in mind. Also, to think about what the customer wants to get out of the experience when choosing a certain layout.