VELA: Case Study

1. Overview

  • My Role: UX/UI Designer (from competitor analysis to final UI design)
  • Timeline: October 2017 - May 2018 (8 months in total)
  • Tools: Figma, InVision, Marvel, Zeplin, Balsamiq

VELA is a mobile application for water sports enthusiasts. It is an individual project conducted as a part of UX immersion course at CareerFoundry. In CareerFoundry's UX immersion course, all the students are given 4 project theme, and they have to choose one of those and design a mobile/web application by themselves, using the UX principles they have learned.

Here, I chose VELA, a weather forecast application, and in this project, I covered the whole UX and UI design process - from competitor analysis to final prototyping.

The main features of VELA are as follows:

  • Real-time weather forecast service, based on each user's location
  • Safety check service
  • Rating the safety of each region
  • Sharing water sports experiences & safety tips
VELA's mockups

2. Competitor Analysis

To play water sports safely, checking weather forecast of the day and information about water sports places is an essential thing. Thus, after deciding to make an application for water sports enthusiasts, I conducted competitor analysis regarding 3 existing marine weather applications - GPS Route Navigation & Weather, Yachting Weather and Buoyweather.

Through the analysis, I could learn the ways how each application is made to help users, and find the problems that the users are facing and need to be solved as follows:

  • Complicated weather graphs which may confuse users
  • Lack of onboarding pages, which makes users browse all the features and waste time
  • Lack of information or review about each place, especially about safety
Competitor Analysis

3. User Interview

After finding user problems on the existing applications, I conducted user interview to listen to the opinion of users in real-world. 3 people were interviewed with the goals as follows:

  • To understand how users feel about weather information graph
  • To understand the ways that users try to browse the application and know how to use it
  • To find the preferred location that users visit for watersports
  • To find out what sort of features that users want the most from VELA
  • To find out potential problems that users may face during they plan for watersports and when they visit watersports spots

After the interviews, I made affinity maps to analyse the results and organise the information I got during the interviews.

Affinity Maps

Through the process, I could learn what prospective users want as follows:

  • Graphs with animation
  • Option for metrics (e.g. Fahrenheit, Celsius, etc) and location
  • To be able to search both indoor(e.g. gym, swimming pool) and outdoor location(e.g. beachside, lake)
  • To provide contact information of each region(e.g. telephone number, email, etc)
  • To be provided in English
  • To show caution message when the weather condition is bad to play watersports, or if the spot is not recommended for beginners
  • To locate tutorials/direction within ‘Setting’ section, not to make users confused and give up to use the application
  • To show real-time information

4. User Personas

Based on the user research results, I created 2 personas - as prospective users. Through persona creation, I could reorganise the user problems and the things that prospective users want.

User Personas

5. User Journey Maps & User Flows

Based on each persona’s information, I created user journey maps. To look back user behaviours and provide solutions carefully, I covered all the stages - from preparation and each persona’s experience after playing water sports.

User Journey Maps

By user journey map creation, I could check expected user behaviours, and think of which one I should pick and make into core features and service of VELA - among the opportunities I got from user journey maps.

Based on circumstances stated on user journey maps, I set up 5 objectives that the users will have whilst using VELA:

  • To check weather information for free
  • To check weather forecast of particular periods
  • To change language option
  • To check safety rating
  • To check the detailed weather forecast

With the objectives, I also created user flows to set up each step in a user-friendly way.

User Flows

The user flows have become guidelines to design service and features of VELA, and I could think of methods to make the flows more convenient from users’ perspectives.

6. Information Architecture & Sitemaps

From the user journey maps and the user flows, I picked some related keywords, and had time to organise the keywords as a form of a sitemap. Card sorting tests were conducted in this stage.

It was an essential step before making a sitemap, as I need to check users' opinions at first - to make the organisation of each information more logical and easier to find from the viewpoints of users. After analysing the test results, I created VELA's sitemap as follows:


7. Low-Fidelity Prototype

Based on the sitemap, I initially created the wireframes of core features on papers. In this stage, I could effectively plan where to display each feature, and how to design the layout of each screen.

Low-Fidelity Prototype

8. Mid & High-Fidelity Prototype

Creating paper prototypes was strongly helpful to think of which feature can be displayed on which part of the application. In the next step, I needed to define the design and layout more in detail. Thus, I created mid-fidelity wireframes using Balsamiq, and a high-fidelity prototype using Figma.

As I focused more on features and interaction within each screen, I made the wireframes into greyscale in this stage.

Mid and High-Fidelity Prototype

9. Usability Testing & Iteration

With the first version of the prototype, I conducted usability testing with 6 people. Through the tests, I intended to look the interaction between the users and the prototype, and to find the parts in which revision is needed.

All the tests were held for 4 days. Based on the test results, I prioritised 4 issues, and made revision as follows:

Issue #1: The meaning of stars in Safety of Location is not clear

For this issue, I decided to change the rating method from stars to numbers to prevent users' confusion. I also let users express their feeling about each review, by tapping 'Helpful' or 'Not Really' button at the bottom of the review box.


Issue #2: It looks only weather-related tasks can be done on 'Weather Check'

In the first prototype, I did not separate weather-related and safety-related features on the home screen. However, during the usability tests, half of the participants could not even think that safety-related features would be available on 'Weather Check.'

As this issue is deeply related to usability and overall user experience, I decided to separate 'Weather Check' and 'Safety Check' on the home screen. Instead, as there was another opinion that 'Settings' and 'My Page' look duplicated, I combined 'Settings,' 'My Page' and 'About Us' features into only one menu, 'Settings.'


Issue #3: Extra information to be added to the detailed weather graph

Considering VELA is a weather forecast application for water sports enthusiasts, 2 participants suggested me to add extra information on the detailed weather graph - wind direction, and time of sunrise, sunset, high and low tide.

I concluded it would be helpful for users to decide whether or not go out to play water sports if the mentioned information is added. In addition, I slightly revised the form of the overall graph, to maintain balance within the screen.


Issue #4: Well structured, but too many steps and clicks

For this issue, I made the onboarding pages can be skipped if users do not want to see it anymore. Also, I let users move onto another screen by using the navigation bar at the bottom, saving their time with fewer steps to take.


10. Final Prototype & Lesson from the Project

Through the process to make VELA, I could learn how to handle all the steps to design a product with the better user experience. In addition, I could see users' feeling and the problems they are faced, and could have an opportunity to consider solutions from their viewpoints.

Final Prototype
view vela's design page