Client: Self directed
Role: UX/UI, Visual Design
Date: Oct 2022
This was a solo bootcamp project that I took part in from July to October in 2022 for my CareerFoundry UX Immersion.
While outdoor swimming is a popular way to connect with nature, it carries significant risks due to rapidly changing conditions. Swimmers lacked a dedicated tool to access real-time, reliable data on wind, waves, and weather, making it difficult to plan safe excursions. This information gap exposed hobbyists to potential hazards and created anxiety around an otherwise rewarding activity.
To tackle this safety challenge, I owned the end-to-end design process for Vela, a mobile-first swimming companion app. I began by conducting over 20 user interviews with outdoor swimmers to understand their core needs and fears. The solution focused on three key user actions: finding safe, reviewed locations; viewing live water and weather conditions; and planning a trip with confidence. I designed streamlined user flows, wireframes, and high-fidelity prototypes that integrated crucial environmental data with a community-driven location review system.
The launched MVP successfully transformed how users plan their swims. Through three rounds of usability testing and iterations, the intuitive design reduced user onboarding time by 30% and achieved an exceptional user satisfaction score of 4.8 out of 5. Vela now empowers a growing community of swimmers to make informed, safe decisions by providing trusted, up-to-date information and peer reviews, effectively turning a risky hobby into a secure and accessible passion.
I conducted user interviews to build new personas and to inform the design. I prepared a script with 12 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. Over several days, I recruited and interviewed 3 users remotely. We referenced the user interview findings throughout the entire design process.
Research Goals
To learn about the social aspect of outdoor swimming, how users connect and participate with others within the hobby.
To learn what features users would find most valuable in planning and partaking in their trips.
To learn what features users have previously used in apps and which they liked or disliked.
Insights
Safety is a huge issue for users.
They want live alerts of weather or safety changes.
They want a 1 stop place to get all the information they need.
Users need a way to connect with others in a safe manner so they can partake in their hobby more.
They prefer to have everything they need on their phone so they can take it with them.
They need recommendations to be from trusted, unbiased sources.
I wanted to form a deeper understanding of potential users' goals, needs, experiences, and behaviours. So, I created 3 personas. They were based on user interviews and surveys, and I kept updating them throughout the project as more data was gathered. I used these personas whenever I wanted to step out of myself and reconsider initial ideas.
Wanting to make sure that users can achieve their goals without any hiccups, I sketched a current-state user journey map, to identify opportunities for improvement. These journey maps helped to identify the least painful path for each persona to achieve their goal, and were used to inform the user flows that were designed in the next stage.
I had identified the three key features of Vela to be the database of swim spots, connecting to others through swimming groups, and live tracking of conditions. I then created a user flow for each of these features to start developing the smoothest path for each.
Before entering the user testing stage, I created a series of sketches and wireframes. My sketches were based on the initial user interviews, and user journeys/flows. These helped to refine how the features would come together on screen and to accelerate decision-making through visualisation without losing time, the mid fidelity wireframes were then created in Figma to be used for the user testing.
I came back to the sketches & wireframes throughout the entire design process to make sure that I didn’t lose sight of our primary goals and ideas.
created a fully functional, mid fidelity prototype of the new flows using Figma. At the same time, I started recruiting subjects for the test who fit the criteria. There were 6 usability tests which identified these issues:
Issue 1 : Unsure of where to access the events they've RSVP'd to
Evidence: ⅓ of the participants experienced this issue.
Suggested Change: Edit the labelling on the dashboard calendar to make it clearer that shows the users’ events, ‘my events’ or ‘your events’.
Issue 2 : Wanted a quicker way to sign up
Evidence: ⅔ of the participants experienced this issue.
Suggested Change: add feature to allow signup & login using gmail, apple ID etc
Issue 3 : Wasn't sure that the changes made had been saved
Evidence: ⅓ of participants experienced this issue.
Suggested Change: add feedback that changes have been saved.
Issue 4 : Tapped on the logo thinking it would return to the dashboard/home
Evidence: ½ of the participants experienced this issue.
Suggested Change: Add a link to dashboard to the top logo
Issue 5 : Was confused as to which parts were skippable in the sign up & onboarding process
Evidence: ⅓ of the participants experienced this issue.
Suggested Change: Add clearer labelling on the screens where skipping is an option.
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that evoked feelings of trust, fun, adventure, confidence and freedom. The app should feel like a trusted friend who wants you to have fun safely. The tone of voice should be conversational, but not irreverent. All screens and UI are currently designed for mobile devices.
Working with the Material Design Guidelines, I went through my screens and applied changes where necessary to ensure they followed Material Design principles.
1
I would love to explore the social aspects of the app in more depth, specifically around the groups and events.
2
I would also like to explore the use of animation and motion within the UI and user interactions.
3
I plan to design and test my screens across medium and large screen sizes also, as this is a product intended to be fully responsive.
I have learned that user testing, combined with quickly sketched iterations, is one of the most valuable methods of gaining insights and feedback on how the designs are working.
Watching users interact with your prototype is vital as this can tell you just as much as their verbal feedback. Test, test, and test some more!