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.