Buoy: UX Design DATA VISUALIZATION UX
BRIANA JACKSON | JANUARY 2019
OBJE CTI V E BUOY
CREATE AN APPLICATION THAT PROVIDES LIVE DATA FOR SURFERS. USERS CAN LOOK AT CONDITIONS AND JUDGE WHETHER HE OR SHE MAY GO OUT BASED ON THE DATA REPORTS
PE R SO N AS BUOY
Aaron Barn
Sierra Smith
Lucas Anderson
Marie Torrey
23 Miami, Florida
28 Waikiki, Hawaii
42 Seattle, Washington
17 Huntington Beach, CA
Loves to surf on the weekends with
Surfs 5 times a week to train for her
Teaches weekly surfing lessons to
Surfs occasionally with her friends at
friends as often as he can
surf competitions
young students ages 7-14
her local beach and is still a beginner
Aaron’s Needs
Sierra’s Needs
Lucas’ Needs
Marie’s Needs
Aaron needs an app that tells him which nearby location would be best to surf at with his friends on the weekend.
Sierra needs to know the best time of day to practice for her surf competitions.
Lucas needs an app that can tell him what the surf conditions are like before he teaches his surf students.
Marie needs an app that tells her what the conditions are like so it’s not too challenging for her since she is a beginner.
Surf Hobbyist
Professional Surfer
Surf Instructor
Amateur Surfer
1 USE CASES BUOY
2
As a surfer hobbyist, I want an app that can tell me what weekends and which nearby locations would be worth surfing on along the coast.
As a professional surfer, I want to check nearby locations for the area with the best conditions to practice and challenge myself.
3
As a surf instructor, I want to quickly check what the conditions are like before each lesson so I can better plan for my surf students.
4
As a surf student, I want to know if the conditions will be manageable for me at my level on a day that I am free to surf.
RE SE AR CH BUOY
MAIN QUESTIONS:
1
2
What important data types do surfers need?
How can we enhance the data?
• • • • • • •
Surf Height Swell Tide Weather Water Temperatures Sunrise/Sunset Wind Direction/Speed
• • • •
1 - 5 star ratings Color recognition Live Cams Recognizable charts/graphcs
3 How do we give user’s a better experience than current surf apps? • Allow the user to customize their experience with their preferences • Make the data visual and engaging
RE SE AR CH BUOY
COMPETITIVE LANDSCAPE
MAGIC SEAWEED Pros Magic seaweed has easy to read data displayed in a simple way Cons It can be more organized and visual to correlate with user’s preferences
LOCATION
DATA DASHBOARD
FORECAST
Magic Seaweed shows nearby locations and distances
Provides a data dashboard including a rating of the data
It includes an overview as well as a detailed forecast
RE SE AR CH BUOY
COMPETITIVE LANDSCAPE
SURFLINE Pros Surfline has a great live cam for surfers to see what it actually looks like. The data is very thorough in the detailed view Cons The data is messy and could provide an information overload for the user on the data dashboard
LOCATION
LIVE CAM
Surfline includes a live cam that pops up when the location is clicked on the map
The live cam can be viewed in full screen with the report below
FORECAST
DETAILED FORECAST
The forecast has detailed information on data points
The forecast can be viewed in even greater detail
THE STR ATE G Y BUOY
The app will focus on the user’s preferences and allowing them to easily visualize when conditions match their saved preferences (through color) and a rating bar at the top. The user is also able to easily adjust time forward and back to easily see what surf time is ideal for them.
1
2
3
Give users more control over time
Allow users to customize their preferences
• Users can adjust the time with a scrolling method on the bottom of the app
• Users can specify their preferred conditions • A rating system will correlate with their preferences
Provide users with easy to read and understandable data • Colors will dictate the quality of the data • Everything will be displayed on the dashboard with recogonizable graphs
FEATURES BUOY
1
Wave Height
5
Weather / Weather Forecast
2
Swell
6
Custom Preferences
3
Wind
7
Time Adjuster
4
Tide
8
Location Changer
U SE R FLO W BUOY
WEATHER
SIDE BAR
1
EDIT PREFERENCES
2
4
DATA DASHBOARD 5
LOCATION EDIT FAVORITE LOCATIONS
5
DATE
WAVE HEIGHT
WAVE INFO
Users can edit their prefered wave, swell, wind, tide, and weather conditions
2
Users can edit their favorite locations
WIND
SWELL
3
3
1
WEATHER INFO
3
CHANGE DATE
TIDE
3 SWELL INFO
CHANGE LOCATION
3 WIND INFO
Users can view further information including a forecast and a more detailed view of the data
4
TIDE INFO
Users can view more information on weather condicitions including the week’s forecast
5
Users can change the location or date of the data they are viewing
MOBILE SKETCHES BUOY
DESKTOP SKETCHES BUOY
1
2
4
3
5
MOBILE HIGH FIDELITY WIREFRAMES
7
BUOY
9
6
8
1
The user can click the 3 bars to edit their preferences and change their settings
2
The user can click on the location and date to change it
3
The day’s rating in relation to the user’s preferences
4
The water and air temperatures. The user can click to see a detailed forecast
5
The current/average wave height of the day
6
The current/average swell of the day (height and seconds)
7
The wind speed and direction
8
The tide pattern of the day and current height
9
The user can adjust the time of day to see the data at different times
1
2
4
MOBILE HIGH FIDELITY WIREFRAMES
3
5
BUOY
1
The user can click the X button to return to the data dashboard
2
The user can view more detailed information on the given data and scroll left and right to see more times
3
The user can see the forecast of the week
4
The user can see more detailed weather information
5
The user can see the forecast of the week
1 2
3
4
5
DESKTOP HIGH FIDELITY WIREFRAMES BUOY
6
1
Click to edit preferences and view settings
4
Weather information with water and air temperatures
2
Click to change date and location
5
Data information on wave height, swell, wind, and tide
3
This rating correlates with the user’s set preferences
6
The user can adjust the time of day
1 3
DESKTOP HIGH FIDELITY WIREFRAMES BUOY
2
1
The user can click X to return to full dashboard view
2
The user can click arrows to view forecast
3
The user can click on other data for a detailed view that will switch out with current detailed view
1
DESKTOP HIGH FIDELITY WIREFRAMES BUOY
1
If the user clicks on the weather symbol, it brings up a detailed weather forecast
Design Specs Web https://xd.adobe.com/spec/b8a49753-cc89-443d-a349-8b31977f3f2c Mobile https://xd.adobe.com/spec/7910e350-d377-4ec7-a133-a16d9963ed39
PROTOTYPE BUOY
Prototype Web https://xd.adobe.com/view/8828918c-f253-4fd5-a249-35487d4f7e78?fullscreen Mobile https://xd.adobe.com/view/62bf6638-3ae3-4d7d-bf07-afc63f38dfa6
THANK YOU Briana Jackson