Elvira Hellenpart's Portfolio Project
As a bonafide online marketing whizz, Elvira always felt like she was destined for something more. She enrolled in our UX Design Program and graduated in June 2019.
What drew her to UX design? In her own words:
“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”.
Featured below is her project that was created as part of the UX Program: “Vela.”
UX/UI Case Study: Surf Weather Forecast App
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.
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.
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.
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
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
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.
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.
After collecting the information, I created an Aﬃnity Map to get a better overview, which helped me to identify valuable insights.
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 & USER JOURNEY MAP
To understand better the challenges surfers are facing in diﬀerent 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.
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.
After that I started creating wireframes with pen and paper. Having the hand-drawn screens, I made a low-ﬁdelity prototype putting them together to represent the user ﬂow.
When scaling up to mid-ﬁdelity prototype, I started to use Balsamiq, but I wasn’t able to ﬁnd 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 ﬁnished the high-ﬁdelity prototype and to make it interactive, I used InVision.
+ USABILITY TESTING
I wanted to observe and measure if users understand the app, its value and how to complete basic functions through testing the high-ﬁdelity prototype.
~ 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 ﬁnd information about weather and location
~ Determine if the existing features and structure helps users to achieve their goals with ease and satisfaction
Both in-person and remote moderated usability tests were conducted. The test included a short brieﬁng 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 surﬁng 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 Aﬃnity 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.
Issues with high severity should be ﬁxed 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 signiﬁcant investment of time and eﬀort and could raise user satisfaction.’
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 diﬀerent 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 diﬀerence 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
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.