In 2020 I decided to enrich my knowledge and gain more skills on practicing User Experience Design. For that, I followed the CAREERFOUNDRY UX IMMERSION program. During this program I took the challenge to create a weather webapp that offered an experience beyond just forecasting. In the sections below, I describe the design process starting from finding and defining the need of a weather app that includes forecasting and location information for specific sports. The result is a webapp that helps beginners learn about forecasting through well crafted interactions and at the same time provides the accuracy needed by more experienced sea sport enthusiasts. On a personal level, this project helped me understand how to use UX methodologies in action and what challenges can come along.
Tasks
Conduct User Research, Concept Development, Prototyping, Prepare & Conduct Tests, Create the UI and Style Guide
Tools
Adobe XD, MIRO, FIGMA, Adobe CC, Google forms, Balsamiq, Lucid Chart, Optimal Sort, cameras, stationery
Roles
UX Research | UX Design | UI Design
Client
CAREERFOUNDRY
Scale
9 Months

PROCESS OVERVIEW

By combining the Design Thinking and Agile Principles we created a LEAN UX method with our USER’S needs as a main focus throughout the whole project.

(Keep scrolling to see each step of the design process in detail)

1. UNDERSTAND

Keywords: Problem Definition | Competitor Analysis | Business Requirements | Target Group | User Stories

Problem Analysis

A first deep dive into the world of seas sports helped in understanding the need of this market for such a webapp but also to state a hypothesis of a possible problem that worked as a initial reference point throughout the project.

Competitor Analysis

It contributed in finding and improving solutions that already are out in the market and understanding the weaknesses and uniqueness of existing webapps. It started with 20 competitors (weather forecasting webapps in general) and 3 main competitors whose solutions were the closest to our hypothesis (Problem statement) were chosen for further analysis.

Each of the three competitors were analyzed by:
  1. Marketing Profile (how they position themselves and attract customers)
  2. Competitors Profile (their way of presenting and USP)
  3. UX Analysis (the features they offer and overall experience of their webapp) .
  4. Finally, all the information collected from each of the three competitors was added into a SWOT Diagram.

All three competitors varied in the approach from open source to a more ‘Pro‘ subscription based membership. The similarities found were the amount of features and their detailed yet not so compatible mapping systems. All of them provide detailed customizing options for the type of forecasting (massive list). Having a more open source character (WINDY.COM) and examples like WINDYAPP were more minimal in their design with reduced steps in their navigation. Furthermore, their user interface could definitely be refined and improved in terms of experience.

The final and main observation from this analysis is that...

“ …the experience  in all three competitors’ apps were lacking in ways
                          of enhancing the learnability of users about weather conditions. “

                                                           &

“...none of the competitors though really helps beginners get an idea on
                             how to read or make an evaluation out of the features provided. ”

CLICK HERE to see the complete Competitor Analysis

Requirements

Even though VELA is a case study I wanted to understand what such a solution can mean for a business. For making the approach more realistic, we created possible business objectives using the S.M.A.R.T Method (UX related). Also, my background in Branding got into action by thinking of possible risks and opportunities and by setting a mission not only for me (the designer) but for all stakeholders.

Target Groups (User Stories & Functional Requirements)

CLICK HERE to see all the User Stories & Functional Requirements

What did I learn from Phase 1. (UNDERSTAND)

2. OBSERVE

Keywords: UX (Generative) Research | Interviews |  Surveys | Affinity Mapping

UX Research

A combination of qualitative (interviews) and quantitative (surveys) provided data that initially would contribute to confirming whether our initial hypothesis (problem statement) is valid or not. Furthermore, the collected data is meant as the core source of inspiration for the ideation part that comes afterwards.

Interviews

This was one of the parts I enjoyed the most as connection with real users is created. It is the exciting phase where I ‘dived’ deeper into understanding the feelings and emotions of the users, understanding better the lifestyle or sea sport aficionados. Being Dutch born and raised in Crete so finding people related to seas sports was easy. Five people were interviewed who are related with sea activities (any level) in order to gather information about their needs, goals, frustrations, experiences and any other qualitative data that seemed appropriate for the project. The methods used were a Matrix Wall first and Empathy Maps afterwards.

The Matrix Wall all the interviews

Empathy Maps

Surveys

The surveys (Google Forms) contained 15 questions based on the research goals. This quantitative data provided more clearance regarding our possible users’ needs and a reference point in order to revise and compare with the results of the interviews. The response from the applicants was very positive as all 45 of them answered and completed the survey.

CLICK HERE To see the complete Survey Results

Survey Key Findings:

80% of the applicants practice a sea sport all the year through.
Pros use more than one app in order to evaluate the weather.
Simplicity is very much appreciated and helps with evaluating the weather conditions.
There seems to be no app offering information whatsoever about specific locations (geomorphic).
There is great importance in location information provided by other users (locals).
Users did not seem very excited to collaborate with local data scored low though.  They must get something in return in order to keep them motivated (?)
The overall experience of current weather apps scores low (baseline).


Generating Insights (Data Analysis):

Both qualitative and quantitative results were compiled by using the Affinity Map Method. The topics, points and other information that was used during this process were chosen based on frequency, urgency and emotional response of the participants. I started intuitively to group and create categories of issues and topics and slowly the insights started appearing.

Insights

What did I learn from Phase 2. (OBSERVE)

3. POV

Keywords: Design Personas | Journey Map | Task Analysis | User Flows

Design Personas (Journey Maps & User Flows)

The insights and information gathered during the research were summed up in three Design Personas. This process helped in gaining clarity by forming an overview of the information surrounding the users’ needs such as characteristics, tasks, context and the users’ profiles. That gave a boost of confidence to define their goals, objective and possible constraints in the form of Journey Maps. The most magical moment came when the features we thought of in the early stages appeared as solutions (almost naturally) that I could break down into User Flows for each task towards them.

Other Personas

Click on the image to see the details of this Design Persona (Panos)

Click on the image to see the details of this Design Persona (Gonzalo)

What did I learn from Phase 3. (POV)

4. IDEATE & PROTOTYPE

Keywords: Site Maps | Card Sorting | Foundation | Wireframes | Prototype | Balsamiq | Adobe XD | Figma

The Personas, Journey Maps and User Flows created a hypothesis that could be put on a test in the form of a high fidelity prototype. The initial step was to see how users understand the content and themes used on our app. For that, Card Sorting Sessions were held that gave us additional insights for the development for the first Site Map of our webapp.

Sitemaps

Ideation (From low fidelity wireframes to a testable prototype)

The first site map of our webapp that was challenged through ideation phases on low- and mid-fidelity ideations.

Early stage iterations

Latter iterations toward the high fidelity prototype

Ideation process of other features

That stage of ideating provided a better understanding of what is possible and feasible until a great milestone was reached: a High Fidelity Prototype (3 basic features) ready for the first usability tests.

What did I learn from Phase 4. (IDEATE & PROTOTYPE)

5. USABILITY TESTS

Keywords: Evaluative Research | Affinity Mapping | Rainbow Diagram | A/B Preference Testing | Reporting

A snapshot from one of the live conducted tests

After creating a High Fidelity Prototype it is time to face a great challenge: Figuring out how and what should be tested. Preparation and accurate communication with the participants, seems to be everything! The task here is to challenge our developed features with respect to our hypothesis. That decision also defined the research goals, objectives and methodology.

Preparation (Test Plan & Test Script)

CLICK HERE to see the complete Script

Usability Testing (Process Overview)

The sessions clearly revealed issues. Still, there was an overwhelmness of (qualitative) results that had to be tackled with the use of Affinity Mapping and a Rainbow spreadsheet.

CLICK HERE to see the complete Affinity Map   
 &    
CLICK HERE to see the complete Rainbow Spreadsheet

First Upgraded Version

Prototype's Main Dashboard modified based on the results

Preference Testing

The quantitative confirmation of the results came through a Preference Testing session that was used as a second approach. Its results offered a secured feeling about the prototype to be taken for refinement in the next stages.

What did I learn from Phase 5. (USABILITY TESTS)

6. REFINEMENT

Keywords: Gestalt Psychology | Layout | Style Guide | Visual Principles | Peer Review | Accessibility Design

Gestalt Psychology and other visuals principles

The tested prototype is ready to get a more defined UI. The main challenges here are how color palette, typography and UI elements can be defined by enhancing users’ engagement.

Evolution of the concept based on visual principles

Making the Style Guide

The changes from the Gestalt principles came along with the challenge of how to document our design and its details for communication purposes. In other words, a style guide that can be shared with Developers, Marketing / Branding Specialist and UI designers.

CLICK HERE if you want to see the complete Style Guide

What did I learn from Phase 6. (REFINEMENT)

Further Improvements (Peer Reviewing & Accessibility)

Showing my design  to experts for peer reviewing helped even more in refining. I asked three experts (A Senior UX Designer, A Front-End Developer and a UX/UI Designer) for advice and possible improvements based on their experience. There was some positive feedback as well as some points. There have been similar comments (improvements) between the reviewers mainly on UI and stylistic issues such as lack of contrast and text size (readability) and consistency in the style (like e.g. in the iconography used). These were mainly issues of accessibility. And therefore, we upgraded the app and made the corresponding changes based on the rules and principles of Accessibility Design.


The most fascinating part is that such reviews can be a start for a good conversation where tips are shared but also sources of information or material such as stock material and other apps to get inspired from. Overall, the reviewers shared very excited reactions about how interactive a weather app can be!

Current Version

CLICK HERE to see the current version VELA

Examples of Features

Desktop Version

CONCLUSION AND FUTURE ACTIONS

Concept Evolution (Overview)

Example No.1: The Main Dashboard

The main dashboard had its major leaps during usability testing and refinement phase. There have been a variety of concepts during the early stages (low fidelity). Eventually, the idea of the circular scroll stayed throughout till now mainly because it received very exciting feedback during the tests and reviews. The main challenge was to fit all this information that needed to present simultaneously for the users to evaluate the weather. Now, as I look back to the process, I can say that this challenge has mostly affected the position of features such as ‘Saved Locations‘ and ‘Map Settings’ (now placed in the main menu) and the content in text form. Furthermore, for the forecast of the whole day there have been many iterations on presenting with the horizontal scroll being the chosen way so far.

Example No.2: Activity Forecast

Activity forecast reveals more information about a location based on a specific type of sport. In the beginning, it started as a separate page. Later on, it seemed more reasonable to include it to the main dashboard. That made the sitemap smaller and reduced the steps without affecting the overall experience. Later on, adjustments on grouping took place with the help of visual design principles. There have been changes in the size of the content especially when rules of accessibility were applied to the design.

Example No.3: Onboarding

The first idea behind the onboarding, was to add a question mark option in the main menu as a help. From the tests results it seemed more reasonable to add small popup messages that would inform the user about each feature. However, the final concept was inspired by the Human Interface Design by Apple. There, the information of the features is titled as ‘What’s New‘ and pops up right after the visitors sign in. The topics are being refreshed in every new sign in (think of how slack does it).

Future actions

As a possible future action I suggest further development of features (Agile) mainly based on testing results. There are three major points that need to be iterated on and tested. Each one of them has its own reasons and hypotheses to be tested so let’s take a look at them separately.

What did I learn from this project:

A great experience that helped dig in the meaning and role of UX Design within the Agile process.
The research in the early stages was my favorite part but also the part that defines the flow of the whole design process.
Due to my Product Design background I had an idea about UX design but with the course I managed to get a better understanding of the process and get a feeling of when I can use every methodology.
One of the greatest values of such processes lies on the flexibility to look back and iterate without severe costs.
Let the ideas of your designs be expressed fast yet carefully tested.
As designers, we owe to define the notion of User Experience as it evolves through time. It  is one of our greatest missions: to help our customers understand the responsibility and value behind every design decision taken ethically for other humans.


Let's get in touch

Have a project in mind? Let's build something great together!

Contact Me