BUOY
UX Strategy | Monica Shehata
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Competition Magicseaweed MSW is the oldest, most popular and most detailed free long range surf forecast on the web. The Magicseaweed mobile app provides long range surf forecasts for thousands of spots around the globe. The forecast includes: surf height; swell height, period and direction; wind speed and direction; and air and water temperatures. Through the MSW app users have access to: • Over 150 surf cams worldwide. • Swell, wind, period and pressure charts • Live buoy and wind data • Real-time surf reports • MSW editorial features and the latest surf news • Surf spot/beach local business directory
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Competition Swell Navigator Swell Navigator is a surf forecasting app based on the spots and the conditions that the user prefers. Through the app users can: • View surf forecasts around the world • Create personal surf spots • Discover surf spots all around the world • Set ideal surfing conditions • Add surf alerts
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Competition BROOU Broou surf forecast and reports is a tool that shows the surfer how’s the forecast of the surfing condition in the exactly moment on his favorite surf spots and now it also has a feed of reports from other surfers that are already on the spot, so that you can decide if the surf is good or not to go out. This app includes: • Surf reports from other surfers • Wave size range • 5 day surf forecast with the most important information detailed: • Wave height with range • Swell direction • Peak wave period (seconds) • Wind direction and speed • Tide charts • Weather, air and water temperature • Sunrise and sunset times • Moon phases
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Strategy App Strategy The strategy for this app is to create a sleek and modern interface that is both intuitive and appealing to the surfing community as well as other outlier users. Since a variety of people would find use in this app, from pro surfers to beginners, the aim was to create a data visualization system that people can comprehend at a glance. This way, the app would accommodate all levels of experience and expertise. Based on research, the most important surf data cross various surf platforms and applications seem to be : wave height, swell data, wind, and air and water temperatures. This is why I choose to show this data on the dashboard, and then within each data point’s detail screen, a lot more information and other smaller data points are included. For example, within the swell height detail screen, there is a swell map which indicates which areas would be affected by the different swell heights. The App would also provide users with autonomy through the interactive charts that they can drag to get information on certain data points at different times during the day. Additionally, users can customize their ideal surf conditions, that the app then uses to notify the user of when they exist. The app would also warn the user when there are dangerous surf conditions, such as storms, hurricanes, etc.
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Personas Mark Brody: The Surfer
Demographics • From Santa Cruz, California • Recently married • Competitive surfer • Travels the world to compete • Goes out to surf everyday— rain or shine • Likes to make and collect surfboards • Enjoys surfing at sunset Needs • Needs a surf forecasting app so that he knows how to better be prepared for the waves • Needs an app that notifies him when with his optimal surf conditions are present
Julia Stein: The Triathlete
Demographics • 59 years old • From Florida • Married • Has 3 grown children • Competes in Triathlons all around the world • Likes to practice weekly • Enjoys swimming in the ocean Needs • A forecasting app with a quick view of the surf conditions so that she knows the best and mellowest conditions for her to go out and practice swimming for the triathlon
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Personas Molly Lu : The Student
Demographics • 19 years old • From Idaho • Has never been to the coast before college • Goes to school in California • Lives in an apartment by the water • Learning how to surf from her friends • Practices surfing every weekend Needs • A straightforward app with self explanatory and easily comprehensible data so that she can understand the surf forecast easily • A warning system that warns her of extreme conditions
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Use Cases • As a user, I need a straightforward forecasting app with self explanatory and easily comprehensible data so that I can quickly make sure that there is great surf before I head out on last minute surf trips with my friends
• As a new surfer, I need an easily navigable application with simple language so that I can get to the information I needs easily without having to learn surf language and terms • As a casual surfer, I need an app that warns me of extreme surf conditions so that I stay safe and out of harms way • As a pro surfer, I need a surf forecasting app that notifies me when my optimal surf conditions are present so that I can go out and train. • As a triathlete, I need a forecasting app with a quick view of the surf conditions so that I know the best and mellowest conditions for me to go out and safely practice swimming long distance for the triathlon, without being unexpectedly affected by high waves or other rough water conditions
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 User Flow
User is in the data dashboard
Wave height detail screen
Swell height detail screen
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Wind detail screen
Air & water temp. detail screen
Project 01 Low Fidelity Wireframes 1
Mobile Wireframes
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Desktop Wireframes
Project 01 Low Fidelity Wireframes 2
Mobile Wireframes
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Desktop Wireframes
Project 01 Mobile Wireframes 1
3
2
Dashboard 1 Clicking on the hamburger menu would open the app menu 2 When the user clicks on this arrow, a menu with the user’s favorited spots unfolds with an option to look for a different surf spot 3 This indicates that the user has notifications and on clicking, a notification drop down opens 4 This shows an overview of the current conditions at that specific location 5 This takes the user to the details screen of Swell Height 6 The user can swipe to view the next slide 7 This is an indicator of which slide the user is on
4 5
6
7
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Prototype: Click here
Project 01 Mobile Wireframes
Dashboard 1 This takes the user to the details screen of Wind 2 This takes the user to the details screen of Air and Water Temperature 1
2
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Prototype: Click here
Project 01 Mobile Wireframes
Detail Screen 1 The user can drag this to find out specific temperatures 2 The user can click on this button to return to the overview screen
Prototype: Click here
1
2
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Desktop Wireframes 1 6
7
2
3 2
4
4
5 3
5
Dashboard 1 2 3 4 5 6 7
This (Current screen) takes the user to the overview screen/dashboard This takes the user to the details screen of Wave Height This takes the user to the details screen of Swell Height This takes the user to the details screen of Wind This takes the user to the details screen of Air and Water Temperature By clicking here, the user can change/choose the surf spot By clicking on the settings button, the user can customize the criteria for the best surf conditions
Prototype: Click here
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019
Project 01 Desktop Wireframes
2
3
1 1
Detail Screen 1 The user can drag this to find out specific temperatures 2 This gives an overview of the current temperatures 3 This provides the user with information on the warmest conditions of the day
Prototype: Click here
Project 01 | UX Strategy | Monica Shehata | Art 488 | Winter 2019