ocean.jpg

Vela

Outdoor swimming app

iphone14.png

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 course.

Challenge

Our users need a way to view up to date and accurate wind, wave and weather conditions for their swimming destinations because they need to be able to avoid dangerous or unsuitable conditions for open water swimming. We will know this to be true when we see users of our app successfully plan their trips to make the best use of current weather conditions.

Solution

Implementing a user centric design methodology to create an all-in-one app for wild swimming that allows users to plan outings, attend them safely, and engage with other users who wish to do the same.

Outcome

Vela is 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. They can find exciting new places to swim using our extensive database, and can connect with others that share their hobby all directly through the app.

My Role

  • UX design

  • UX research

  • Visual Design

Tools

  • Miro

  • Figma

  • Pen & paper

My Design Process

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

  1. To learn about the social aspect of outdoor swimming, how users connect and participate with others within the hobby.

  2. To learn what features users would find most valuable in planning and partaking in their trips.

  3. 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.

pqdrVqze6CEc3uYl.jpeg
 
Screenshot 2022-10-28 at 23.36.04.png

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.

xLQ4YaBAH1HLP7Gg.png
 

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.

swim spot.png

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.

Final Designs

all screens (1).png

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.

TITLE OF THE CALLOUT BLOCK

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.

Death_to_Stock_Tactile_4.jpeg

Like what you see?

Let's chat.