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 is as follows:


  • Real-time weather forecast service, based on each user's location

  • Safety check service

  • Rate the safety of each region

  • Share water sports experience & safety tip

2. Competitor Analysis

To play water sport 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: 


  • Complex 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





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. 

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.

5. User Journey Map & 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. 

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.

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

On the user journey maps and the user flows, I picked some related keywords, and had time to organise the keywords and information as a form of a sitemap. Here, to check users' viewpoints, I conducted card sorting tests, and 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.

8. Mid & High-Fidelity Prototype

To define the design and layout more in detail, I created mid-fidelity wireframes using Balsamiq, and a high-fidelity prototype using Figma. At this stage, the prototype was made in greyscale. 

Regarding iconography and images, I got icons from Flaticon and images from Pixabay.

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

As 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 information above 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.




Thanks for watching!

© 2018 YESEUL SEO. This website is optimised for desktop.

This site was designed with the
website builder. Create your website today.
Start Now