Elvira Hellenpart's Portfolio Project

Throughout the UX Design Program, you’ll build out a job-ready portfolio. Below is a breakdown of UX graduate Elvira’s project, VELA, a surf weather forecast app.

As a bonafide online marketing whizz, Elvira told us why she wanted to make a career change into UX:

“As a marketer between the product and the users, I learned how important user experience is. I was interested in investigating why people would lose interest in the product, which led me to realize the importance of product improvement and reflecting on possible solutions. This is what I want to do: create meaningful products and help companies to get there”. 

ABOUT THE PROJECT
VELA is a product that came to life during my UX Design Course at CareerFoundry. The objective of this project is a beautifully designed ​app which provides ​easy-to-understand wind, ​wave,​ ​and​ weather​ ​​forecasts for​ ​surfers at all levels. The app intends to help surfers to have fun and stay safe.

The problem
Existing ocean forecast apps do not meet the goal of displaying complex weather data in an accessible, straightforward way to people who regularly engage in watersports. Also, these forecasts are usually meant for a wider group of ocean goers and are displaying data for different types of watersport activities, overwhelming surfers with unnecessary information. Without much experience, it is even more challenging to read these reports, although they are meant to help surfers to better prepare for a safe and enjoyable day outside in the water.

My role
For this project, my role was to explore ways to take a weather report app to the next level through research, analysis, and best practices in UX design. I wanted to figure out ways to encourage users to get in the habit of checking the app before heading out to the water. Furthermore, I wanted to make the interface attractive for the users.

APPROACH

1. Discover

Problem Statement  |  UX Competitive Analysis  |  Content Audit  |  User Stories

2. User research

Surveys & Interviews  |  Affinity Mapping  |  User Persona  |  User Journey Map  |   Mental Models  |  User Flow & Task Analysis

3. Ideate

Sitemap  |  Low-fidelity Prototype  |  Mid-fidelity Prototype  |  Interactive High-fidelity Prototype  |  Usability Heuristic Evaluation

4. Usability testing

Test Plan  |  Test Script  |  Report Findings  |  Recommendation for future design efforts |  Preference Test

5. Visual design

Evaluating the Design for Visual Design Principles  |  Evaluating the Design for Accessibility  |  Style Guide

DISCOVER

UX competitive analysis
I chose two potential competitors and built their marketing profile, SWOT profile and conducted a UX analysis of their products. The goal was to identify what type of problems users face with competitors’ products, as well as understand what the users might expect from my product.

User stories
The user stories capture feelings, needs and expectations of potential users toward diverse features.

USER RESEARCH

Surveys & user interviews
Initially, I was running a survey which turned out to be a tremendous information-gathering tool. It helped me to gauge in-depth insights into the world of surfers, including their attitudes and concerns. Based on the results, I could formulate specific interview questions to find out more about their needs before going out to the water.

Organizing the interviews was the most challenging part of the user research process – but conducting them was highly exciting. Listening to surfers talk about their passion, desires, and challenges helped me to understand their needs and goals and further refine the problem statement.

Affinity map
After collecting the information, I created an Affinity Map to get a better overview, which helped me to identify valuable insights.

User personas
Based on the generative user research I conducted, I created user personas that capture the essence of my target group. Marco and Andres helped me to always keep the needs of the users at the forefront.

Mental models and user journey map
To understand better the challenges surfers are facing in different situations, based on the needs and goals of my personas, I created Mental Models and User Journey Maps.

Creating Mental Models and User Journey Maps were a great way to empathize with future users, getting a clearer idea about pain points and what support would they expect from the product.

Task analysis & user flows
Creating Mental Models and User Journey Maps helped to understand what types of actions my users would like to take and why they would take these actions.  After selecting the most important tasks, I created User Flows for the personas.

IDEATE

Sitemap
Reviewing my personas and user journeys and having certain features in mind, I started to think about the structure of the app. I had a rough idea of keeping the structure simple with co-existing hierarchies, since there is a great deal of overlapping information and wanted my users to have easy access from one page to the other.

Wireframing
After that I started creating wireframes with pen and paper. Having the hand-drawn screens, I made a low-fidelity prototype putting them together to represent the user flow.

Prototyping
When scaling up to mid-fidelity prototype, I started to use Balsamiq, but I wasn’t able to find the weather icons that are crucial for this project. I decided to do it with Illustrator and choose the icons by myself. Using Illustrator, I finished the high-fidelity prototype and to make it interactive, I used InVision.

USABILITY TESTING

Goal
I wanted to observe and measure if users understand the app, its value and how to complete basic functions through testing the high-fidelity prototype.

Test objective

• Observe if users are able to check the forecast without having to create an account
• Determine if onboarding provides users with all necessary information before deciding to create an account
• Observe how users navigate and how easily they find information about weather and location
• Determine if the existing features and structure helps users to achieve their goals with ease and satisfaction

Methodology
Both in-person and remote moderated usability tests were conducted.  The test included a short briefing and task performance with the VELA mobile app. 5 participants took part of the usability test. 3 of the 5 participants are surfers I conducted the interviews with and whom my personas are based on. 2 participants have never been surfing before. I wanted to see how intuitive the app is for a wider group of people.

Usability test results: findings & insights
After collecting the information, I created an Affinity Map which helped me to get a better overview and identify valuable insights.

A total of 5 usability tests were conducted. All participants agreed that the app is uncomplicated and simple to use, including mainly only necessary information and buttons, and the forecast report is easy to understand even for non-surfers. Working with an incomplete prototype was challenging for 2 of the testers. Tasks were completed by 3 users with ease. I collected, listed and prioritized the main challenges and errors experienced by the participants in a rainbow sheet.

Conclusion
Issues with high severity should be fixed at this stage of the developing process. Furthermore, the ideas, inputs and missing information or data should be added now as well. Thus, the upcoming usability testing will show us already if further changes or improvements are needed. Making the changes for Onboarding and Forecast report cover most of the discovered errors and issues. Fixing the issues with mid severity don’t require a significant investment of time and effort and could raise user satisfaction.’

Preference test
I completed the Preference Test using Usability Hub. There were 10 participants, both surfers and non-surfers, including the people I conducted the interviews and usability tests with. I decided to test two different pictures for the introduction screen. Since I use the same picture for the login and signup screens, I felt that showing them together let users get a better overview. The difference of the two pictures was mainly the color and dynamic.

This gave me clear feedback that the second design was more appealing to potential users and has become the basis of the introduction, login & signup screens.

VISUAL DESIGN

Visual design principles

Color palette
The VELA color palette consists of two colors: tradewind and white. The colors are harmonious with ocean vibes. Tradewind is the core of the brand identity and symbolize the sea; while different shadows of white represent the foam.

The VELA palette consists of three colors chosen to create associations and demonstrate weather conditions. These colors should be used only for design elements representing the weather forecast.

Designing for accessibility

1. Login Screen 
In the first version, the text field for email address and password didn’t have clear boundaries and form label disappeared when users started to write.  I added placeholders with form labels. The label tells users that this is an email address input field while the placeholder gives an example of an email address.

2. Main Navigation Tab
Instead of coloring the icon,  the current location will be highlighted with darker background. This will help our older users and users with visual impairment to better identify where they are within the app.