stephanie ausfresser

 PEAKWEATHER

UX/UI Design

peakweather-banner-2500px.jpg
 

overview

The weather can change in an instant – especially in the mountains, which in addition can be completely different from the base to the summit. Multiple factors can determine if a hike is successful and with weather being a main factor, preparing for it is a must.

CHALLENGE

The user needs a way to view an accurate weather forecast five days in advance as well as immediately while on the mountain. By simplifying and organizing the data, this will help hikers to decide if it’s safe to venture out on the trail or make quick decisions when already on the mountain.

SOLUTION

I designed an app that focuses on the weather solely for mountains. The current, hourly, and 5-day forecast for base and summit elevations allow for the most accurate conditions and to be better prepared. In addition to the weather, other features offer details about the mountain and safety precautions including text messaging with GPS locations.

 

role

UX/UI Designer

CLIENT

Project for UX Course with CareerFoundry

TOOLS

Adobe XD
Photoshop
Illustrator

 
peakweather-mockup-intro.png
 

research

COMPETITIVE ANALYSIS

I conducted a competitive analysis of two weather apps specifically designed for outdoor adventure. I developed a marketing profile and UX analysis of each app. This assessment provided an insight to the expectations of a weather app as well as their flaws.

peakweather-competitive-analysis-2500px.png
 

INTERVIEWS

I conducted an in-person interview with three participants that were chosen based on their hiking experience and interest in weather. The goal was to understand a user’s process when planning for a hike, what information users rely on from the app, and how frequent users check the weather for a hike.

Findings & Insights

  • I created an affinity map to organize the responses from the in-person interviews:

  • Local day hikes were the most common and frequent type

  • All participants check the same data

  • Can’t rely on only one weather app for accurate data

  • A clean interface of simple icons and basic data for first glance will help to provide an overview of the forecast to read it quickly.

  • Weather specific to the summit of a mountain will give a more accurate indication for the entire hike.

 

PERSONAS

Two personas were developed to represent the young hiker with an interest in any kind of outdoor activity and the retiree who enjoys hiking and traveling. Although age and hiking interests were clearly different, there were many similarities that would be carried through each consideration during the development of the app to help prevent bias decisions.

 
peakweather-personas-2000px.png
 
 

user journey

I created a user journey for each persona to understand their thought process. Using the personas as a guide, each journey is a clear example of the approach Ben and Sam would take before a hiking trip and how they would use the app to assist in their preparation.

 
 
 

user flow

I developed a user flow for the persona of Ben. As a backpacker, his goal is to check the five-day forecast of the mountain’s summit in order to pack the right gear for multiple days. Tasks include: log in, choose mountain from favorites on home screen, click current summit weather, click five-day forecast.

 
 

build

CARD SORT & site map

I conducted a card sort to understand how others search for something based on how they grouped each topic. Using Optimal Workshop, I provided prewritten labels for participants to organize the cards into what they thought made the most sense to them.

 

WIREFRAMES & PROTOTYPE

After multiple iterations of the sitemap, I developed wireframes beginning with low fidelity hand sketches and refined them to mid and high-fidelity digital wireframes.

The goal was to minimize the amount of content while providing the most important information on the homepage. The internal pages with the high data content need to be simplified to read in full detail or scan quickly.

 
peakweather-wireframes-mid.png
 

testing

Usability Testing & Results

I moderated a usability test with five participants asking three scenario tasks.

Affinity Mapping & Rainbow Spreadsheet

After grouping the results by observations, errors, negative quotes, and positive quotes using affinity mapping, I then organized the results in a rainbow spreadsheet to view the similar feedback and consider possible solutions.

 
 
 

A/B Preference Test

Based on a comment during the usability test, I added a weather snapshot for each mountain on the home screen. A preference test was conducted for the best placement with three different options: bottom left, bottom right, and top left.

 
peakweather-testingAB-2000px-3.png
 

style guide

typography

 
peakweather-style-type-2000px.png
 

color

 
peakweather-style-color-2000px.png
 

icons

 
peakweather-style-icons-2000px.png
 
 

final designs

HOME

The design was created to be photo heavy with a simple layout using cards. The use of photography spans the page for a visually stimulating view but also helps to provide a sense of trust and validity for the content since the photos are from the specific mountain.

HOURLY WEATHER

The layout of the detailed weather forecast follows a design pattern seen in other apps which will be familiar to the user and make the learnability quick and easy.

TEXT MESSAGE

The text message feature allows the user to send their exact coordinates. Two methods offer the option to send a message immediately with their expected return date and time or set up auto which will send updated coordinates at the same time every day chosen by the user.

 
iPhone-7-Mockup-Scroll-Home.gif
 
peakweather-final4.png

retrospective

 

What went well

• Developed strong user personas based on interviews I conducted which helped tailor the app to the right audience.
• Designed a clean and easy-to-read interface

What didn't go well

• Designed several revisions of the sitemap even after designing the first round of low fidelity wireframe sketches
• Experienced technical issues while trying to record the interview for user testing
• Redesigned all pages in the wireframes in order to fit dimensions for InVision prototype
• Solution: Solidify the sitemap before continuing; Test equipment multiple times before the interview and have a backup option; Review dimensions required with any prototyping program and upload a few pages to test the size before developing all pages.

What can be improved

• Prototype lacked more realistic animation due to InVision's minimal capability
• Changed typography after researching the human interface guidelines for Apple's iOS.
• Solution: Learn and practice programs to create animation; Review HIG before beginning UI

 

NEXT PROJECT

Fitted