Graph and list view of weather forecast
Informative surf
spots information
spots information
Surf spot recommendation
Surf plan creation
Design an app that makes surf easier for surf lovers
UX Strategy, User Research, Information Architecture, Wireframing & Prototyping & Testing
4 month, Jul – Oct 2020
Figma, Miro, Optimalworkshop
The mobile app concept was my final deliverable of my Bootcamp immersion course. I was given a project brief to start with, and build the idea upon real research, ultimately designed a research-driven, mobile solution for surfers who travels.
Days on the water are meant to be fun and chill, away from stress. Checking the weather forecast should be made effortless to enhance surf safety and surf enjoyment. However, existing surfing apps fail to display weather data in an accessible, easy-to-comprehend way.
Understand include understanding the user and understanding the market. With the problem in mind, I conducted an initial research of users, and the results informed the following competitor study.
The project brief I was given pointed out one problem with the surfing apps - unintuitive weather forecast. To uncover more problems surfers might have with surfing, I started with the user survey. The goal of the user survey was to understand surfers needs, goals, frustrations and surf habits in general.
From the valid returned survey, I contacted 3 people for further user interviews. My goal in this stage was to get to know surfers more in-depth, such as their daily routine, and how they plan a surf trip etc. After the interview, I used the affinity map to organize findings. The following was the final insight from the user interview.
After user research, I conducted a simple feature comparison of the competitors, to get a sense of the surfing market, their core offering and potential differentiation opportunities for Vela.
Next, I performed a UI and functional assessment of competitors. This process helped me understand how their apps were laid out, structured and designed.
To visualize who I would be designing for. I synthesized my findings from user research into 3 personas, wrote user stories, and created user flows.
After exploring different user journeys and user flows, I decided the main features of Vela and move to design
After identified key features of Vela, I still not entirely sure how different screens should be like, so I created a sitemap to map out the information architecture and moved on to wireframing.
* The hi-fidelity wireframes are placed at the end of this case study.
Creating a sitemap forced me to visualize every step a user would take to navigate the app.
For low-fidelity wireframes, I focused on function and structure, and this low-fi work allows me to quickly test ideas out. After satisfied with my design, I moved on to mid and hi-fidelity wireframes, to flesh out more of the ideas.
After several rounds of ideation, I turned the hi-fi wireframe into an interactive prototype and tested it with 6 potential users. To do that, I set out test goals, test objectives, and test script.
I used affinity maps and rainbow spreadsheets to synthesize my findings. Affinity Map allows me to break down information to see the connection between elements. Rainbow Spreadsheet helps me to keep track of information and prioritize findings.
Based on usability feedback, I prioritized top 5 issues that need to be refined the next round of iteration, 2 of which are listed below.
Description:
Participant not sure whether the forecast changed in real-time
Change:
1. Add relevant time
2. Replaced ‘Find surf spots near Socorro’ with ‘Find surf spots worldwide’
Rationale:
1. The lack of time can cause immediate confusion for the user
2. Reduce duplicated information and encourage user to explore more surf spots beyond their current location
Description:
Participants mentioned that there was not enough differentiation between different filters
Change:
Create subgroups for filter
Rationale:
Creating a clear filter based subgroup can reduce the cognitive load for users and enable faster filtering
After testing with potential users, I already have a relatively solid design. The last step before the final deliverables was peer critique, where I shared my hi-fi prototype on Slack platform and refined my design based on their valuable feedback, and the following section is the final design.
Before surfing, a quick 2-3 mins check is all you need for an accurate weather information
Crowds and safety information, local vibes, surf facilities, we cover every information you need for a surf spot
By answering 5 surf-related questions, find your perfect match instantly
To make the create surf plan process as easy as possible, users can either start their surf plan from scratch, or they can create from the spot page, and link further facilities into a surf plan
It is important to find the real problem rather than the symptom of the problem. I first started this case study with the solution, and that resulted in designing for myself rather than the user.
Without constraints, it easy to get lost in our thoughts and going deep into unnecessary designs. As I put together this case study, I found myself over-designed the restaurant page.
Reach out to your target audience and receive solid research answer. I only know 1 person who knows surfing, so I try to find people in the surf interest groups from Facebook and Reddit. I sent out my post but received only a few replies.
To provide clear guidance to my participants during the interview, be able to come up with good follow-up questions and minimize the awkward moments with my participants.
Spend more time to synthesize the data and understand the problem, done this right, the design itself became much easier and it also brought more clarity in my work.
Set constraints right from the beginning. In real projects, there will be time constraints, budget constraints, tech constraints, trade-offs need to be made to ship a product in time. For study projects, we can also turn this into a mindset that embedded in our design.
Instead of asking, give first. Don’t just post your needs out there and leave, be polite and engage in people’s conversation. Ask group organizers’ confirmation before post. Knowing that people will ignore you, write sincere messages so that people who do interested are also more likely to take your survey seriously.
Well prepared before the interview, know ins and outs of your test script. The more ready you are, the more confident you will become. Also, keep in mind that it will get easier with practice.
