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.
Pen, Papers, Google Forms, Optimal Sort, Usability Hub, Skype, Keynote, Balsamiq, Adobe XD
User Research, Information Architecture, UX Design, UI Design, Usability Testing
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.
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.
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.
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.
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.
Based on the findings from the research, I was able to create the four user personas below:
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.
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.
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
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.
Get first feedback on clarity
of the design interface
Observe how users navigate
through the process flow
Measure the learnability
and errors evaluation
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
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.
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.
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.
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.
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.
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.
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.
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.
