UX / UI Design

VELA

2019
15 min read
Context

As part of my UX Design course at CareerFoundry, I designed VELA.
A mobile native app that allows water aficionados, of all level, to read a weather forecast in a user-friendly app and discover new spots around him/her.

Tools

Pen, Papers, Google Forms, Optimal Sort, Usability Hub, Skype, Keynote, Balsamiq, Adobe XD

Roles

User Research, Information Architecture, UX Design, UI Design, Usability Testing

discover
Problem statement

Our users need a mobile app offering intelligible forecasts, real time conditions along with detailed spots recommendations to practice their favorite activities based on their profile preferences as well as geolocation.

Potential solutions

An app that recommends where and when the user can practice their favourite water activities, in the function of accurate weather forecasts, his geolocation and his level of practice.

This app offers most of the basic features for free and doesn’t pollute the interface with unnecessary ads.

The interface will be clear and visually pleasant serving both newbies to experienced water aficionados.

Competitor analysis

The marketplace is already well established in this field. We can see an app like Windy claiming themselves as the No. 1 professional weather app, but results often, of an overwhelming app. Or web service such as PredictWind that provide a high level of forecast accuracy with, unfortunately, poor design interface. 

I conducted a competitor analysis that includes key objectives, market advantages, marketing profile, SWOT analysis and UX analysis. 
The full competitor analysis can be found in the source section.

emphasize
User research

In order to examine my first assumptions on what user’s goals and needs are, I have conducted two user research methods which are interviews and survey

Thanks to both methods, I was able to gather multiple insights from different participants which help me to identify some behaviours, needs and frustrations.

Key takeaways

Functionality

Water aficionados want to get recommendations on spots around them based on weather conditions. They would like to have a visually pleasant interface to read weather forecast quickly. 

Outdoor Experiences

Water aficionados love the feeling to practice sports in an outdoor environment. They want to have fun and push themselves. 

Reliability

They expect to have trustful and precise information because this will impact the spot they will go and the materials they will bring. They are checking weather predictions for safety reasons and almost every time before going in the water.

Community

Users found important to be part of a group sharing a similar passion. However, they can feel frustrating to practice in a crowded spot. 

Payment

Waterboard sports aficionados are used to get information about wind and waves conditions for free. 

User personas

Based on the findings from the research, I was able to create the four user personas below:

ideate
User journeys

I created users journeys and task flows for my personas to put myself in their shoes. From this, I was able to discover the basic functionalities my app will need to support to satisfy their needs

Empathy is key.

Information architecture

After getting a deeper understanding of my future users and how they would interact with the app, I was able to create the first version of the sitemap (see below).

I conducted an open card sorting composed of 20 labels that 6 potential users had to group in order to evaluate their mental model. The analysis can found on the source section below. This exercise allowed me to validate, simplify and update my site map architecture.

Design & Prototype

At this stage, I am feeling confident with the information architecture and user personas in mind. It was time to transform concept to reality. 

First, in the physical space armed with pens and papers to design low-fidelity wireframe for the main features of the app by using different methods such as the crazy 8’s exercise. 

Second, in the digital space using online tools like Balsamiq for low fidelity wireframes and Adobe XD for medium to high fidelity wireframes and prototype. 

Low fidelity

Mid fidelity

High fidelity

test
Usability testing

After finalising my prototype, it was time to evaluate how real users will interact with it.
In order to uncover problems in the design, discover opportunities, learn about user’s behaviours and preferences.

Goals

Get first feedback on clarity
of the design interface

Observe how users navigate 
through the process flow 

Measure the learnability 
and errors evaluation

Test objectives

We determined if the participant could:
- Find a spot through the search functionalities (search bar and/or interactive map)
- Add a spot to favourite
- Set up a customised alert
- Find and read easily the forecast data for a given spot

Methodology
1st round of testing
5 Participants
Moderated remotely
1 Participant
Moderated in-person
2nd round of testing
3 Participants
Moderated remotely
Affinity map

The map helped me to quickly identify and visualised similar patterns or unseen information across the participant’s comments.​

For a detailed view of my affinity map, refer to the sources link.

Rainbow spreadsheet

Once the affinity map completed and sorted, I structured my observations into clusters that helped me to analyse the results with more hierarchy. For a detailed view of my rainbow spreadsheet, please refer to the source link. 

Analyse & iterate

Then, I prioritised six errors and/or issues that were identified during the usability test for the next iteration of my prototype. Here below are two of them, the rest can be found on the source section.

implement
Style guide & accessibility

Lastly, I went through all my work to update and rectify any errors or inconsistency. Then, I created the style guide below as final exercise to wrap up this stimulating project.

Source: Style guide
conclusion

Thank you for having taking the time to consult my work.

This first project helped me to put a first foot into the UX/UI Design world. I cannot wait to improve further my user research, information architecture and design skills.

What didn't work

Too many features to implement - During the site map creation, I had many ideas I wanted to implement in my app. Unfortunately, I quickly realised it will cost me a lot of time and struggle to add all the features.

Spending time on unnecessary detail at the wrong stage - This point was probably the main struggle of my design iteration journey. I spent too much time designing details feature during the low-fidelity wireframe process or pushing pixel around.

What went well

Rapid learning by doing process - Not so long ago, I didn’t know barely anything about the UX Design world in general. I am proud of the knowledge, tools and process I have mastered.

Presentation skills- Thanks to my previous professional and educational experiences, I could confidently present my project with good structure and storytelling.

What could be better

Improve interview skills to avoid bias - For future reference, I will try to not jump too quickly to help the participants and let them work the problem around to avoid bias feedback.

Automate and improve visual design skills - Since I do not have a background in graphic design/visual design, I needed to spend extra effort on my UI skills.

Please click on the interactive Adobe XD link below to access to my polished prototype that resume the work you just went through.

contact

Success is best when it's shared.

GET IN TOUCH