Vela
Outdoor swimming app
Vela is an app created for those who need a safe and informed way to plan their trips for outdoor swimming.
This was a solo bootcamp project that I took part in from July to October in 2022 for my CareerFoundry UX Immersion.
Challenge
Outdoor swimming is an amazing way to exercise and connect with nature, but it can also be a risky hobby. Conditions can change and become hazardous, so swimmers need a way to view live and accurate wind, wave and weather conditions. Having access to this will help more people to safely and successfully plan trips for outdoor swimming.
Solution
To solve this I created Vela, a mobile first app that uses live weather, wave and wind conditions to allow users wishing to participate in open water swimming to safely plan their activities. The app also allows swimmers to discover new places to swim, and comment with others who have the same interest in the hobby.
Outcome
More outdoor swimming hobbyists can now use Vela to safely plan and take part in trips to locations that are reviewed and rated by other users. They can also trust that they will be kept up to date with all water and weather conditions to make sure they are safe and able to have the best experience.
My Role
-
UX design
-
UX research
-
Visual Design
Tools
-
Miro
-
Figma
-
Pen & paper
Project Summary
Discover
Interviews
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.
Define
Personas
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.
User Journey Mapping
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.
User Flows
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.
Ideate
Sketches & Wireframes
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.
Design
Usability Testing
I 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.
Brand and UI Design
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.
Material design
Working with the Material Design Guidelines, I went through my screens and applied changes where necessary to ensure they followed Material Design principles.
Design System
Final Designs
Figma Prototype
Future Plans
1
I would love to explore the social aspects of the app in more depth, specifically around the groups and events. This will most likely be the focus of my next round of testing and iterating.
2
I would also like to explore the use of animation and motion within the UI and user interactions. This is an area I will be doing some further learning and experimenting around.
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.
Learnings
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!
Thank you for reading my case study!
Want to work with me? Feel free to contact me! Or just say hello on my social media.
