{"id":18592,"date":"2022-09-28T16:25:01","date_gmt":"2022-09-28T14:25:01","guid":{"rendered":"https:\/\/wp-production.careerfoundry.inbearbeitung.de\/en\/portfolios\/elvira-hellenpart\/"},"modified":"2022-10-04T14:49:04","modified_gmt":"2022-10-04T12:49:04","slug":"elvira-hellenpart","status":"publish","type":"portfolios","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/portfolios\/elvira-hellenpart\/","title":{"rendered":"Elvira Hellenpart's Portfolio Project"},"content":{"rendered":"

\"\"<\/p>\n

Throughout the\u00a0UX Design Program<\/a>, you\u2019ll build out a job-ready portfolio. Below is a breakdown of UX graduate Elvira\u2019s project, VELA, a surf weather forecast app.<\/p>\n

As a bonafide online marketing whizz, Elvira told us why she wanted to make a career change into UX:<\/p>\n

\u201cAs 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\u201d.\u00a0<\/strong><\/p><\/blockquote>\n

ABOUT THE PROJECT<\/strong>
\nVELA is a product that came to life during my UX Design Course at CareerFoundry. The objective of this project is a beautifully designed \u200bapp which provides \u200beasy-to-understand wind, \u200bwave,\u200b \u200band\u200b weather\u200b \u200b\u200bforecasts for\u200b \u200bsurfers at all levels. The app intends to help surfers to have fun and stay safe.<\/p>\n

The problem<\/strong>
\nExisting 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.<\/p>\n

My role<\/strong>
\nFor 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.<\/p>\n

APPROACH<\/strong><\/h5>\n

1. Discover<\/strong><\/p>\n

Problem Statement\u00a0 |\u00a0 UX Competitive Analysis \u00a0|\u00a0 Content Audit\u00a0 |\u00a0 User Stories<\/p>\n

2. User research<\/strong><\/p>\n

Surveys & Interviews \u00a0|\u00a0 Affinity Mapping \u00a0|\u00a0 User Persona \u00a0|\u00a0 User Journey Map \u00a0|\u00a0 \u00a0Mental Models \u00a0|\u00a0 User Flow & Task Analysis<\/p>\n

3. Ideate<\/strong><\/p>\n

Sitemap \u00a0|\u00a0 Low-fidelity Prototype \u00a0|\u00a0 Mid-fidelity Prototype \u00a0|\u00a0 Interactive High-fidelity Prototype \u00a0|\u00a0 Usability Heuristic Evaluation<\/p>\n

4. Usability testing<\/strong><\/p>\n

Test Plan \u00a0|\u00a0 Test Script \u00a0|\u00a0 Report Findings \u00a0|\u00a0 Recommendation for future design efforts |\u00a0 Preference Test<\/p>\n

5. Visual design<\/strong><\/p>\n

Evaluating the Design for Visual Design Principles \u00a0| \u00a0Evaluating the Design for Accessibility \u00a0| \u00a0Style Guide<\/p>\n

DISCOVER<\/strong><\/h5>\n

UX competitive analysis<\/strong>
\nI 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\u2019 products, as well as understand what the users might expect from my product.<\/p>\n

\"\"<\/p>\n

User stories<\/strong>
\nThe user stories capture feelings, needs and expectations of potential users toward diverse features.<\/p>\n

\"\"<\/p>\n

USER RESEARCH<\/strong><\/h5>\n

Surveys & user interviews<\/strong>
\nInitially, 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.<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

Affinity map<\/strong>
\nAfter collecting the information, I created an A\ufb03nity Map to get a better overview, which helped me to identify valuable insights.<\/p>\n

\"\"<\/p>\n

User personas<\/strong>
\nBased 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.<\/p>\n

\"\"<\/p>\n

Mental models and user journey map<\/strong>
\nTo understand better the challenges surfers are facing in di\ufb00erent situations, based on the needs and goals of my personas, I created Mental Models and User Journey Maps.<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

Task analysis & user flows<\/strong>
\nCreating 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. \u00a0After selecting the most important tasks, I created User Flows for the personas.<\/p>\n

\"\"<\/p>\n

IDEATE<\/strong><\/h5>\n

Sitemap<\/strong>
\nReviewing 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.<\/p>\n

\"\"<\/p>\n

Wireframing<\/strong>
\nAfter that I started creating wireframes with pen and paper. Having the hand-drawn screens, I made a low-\ufb01delity prototype putting them together to represent the user \ufb02ow.<\/p>\n

\"\"<\/p>\n

Prototyping<\/strong>
\nWhen scaling up to mid-\ufb01delity prototype, I started to use Balsamiq, but I wasn\u2019t able to \ufb01nd 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 \ufb01nished the high-\ufb01delity prototype and to make it interactive, I used InVision.<\/p>\n

\"\"<\/p>\n

USABILITY TESTING<\/strong><\/h5>\n

Goal<\/strong>
\nI wanted to observe and measure if users understand the app, its value and how to complete basic functions through testing the high-\ufb01delity prototype.<\/p>\n

Test objective<\/strong><\/p>\n