Project Overview

 
 

The Problem: 

To reevaluate a design framework from a disbanded team and implement a design system to accommodate for a new code base developed for the Weather Underground app.

The Solution: 

Create a design system that gives the ability to move away from old APIs and to incorporate new privacy laws and compliances. This would also allow for the team to easily implement iterative and new feature changes.

My Role: 

User App Flows, Interaction and Visual Design, Design Audit

TOOLS: 

InVision (Prototype), Sketch (Wireframes, Visual Design, UI/UX Deliverables), UserZoom (User Research)

Team:

Timothy Bernas (Product Manager), Carol Bales (UX/Consumer Insights Researcher), Randy Fussell (Director, Mobile Dev), Derell Pigram (iOS Dev Lead), Amit Gundewar (Android Dev Lead), Kristian Tumangan (Product Designer);
Defunct Team: David Boulanger (Product Manager), Prooshat Saberi (UX Designer), Mike Tiscareño (UI Designer)

 
 

Discovery

 

Design Audit

 

Since my team inherited a code base and design framework from a defunct team we decided to audit the work that was passed down to us. I was responsible for auditing and reevaluating the design system that was established. I then created a presentation to stakeholders on what motivated the design decisions of the previous team and recommendations to further enhance the design framework for users.

 
 
 
 

After the audits we decided as a team to continue with the established design system but to iterate it based on the results of the user testing we conducted.

 

User Testing

With the UX research team we came up with a two-phase user testing plan to retest the v6 designs against the v5 app design. This allowed for us to gauge the expectations users have, the readability of data with the v6 design, and learn more about our users’ needs when interacting with our app. During this step I was responsible for creating the prototypes and mocks we would be using during user testing.

 
 

Goal + Methodology:

Goal: To gauge the findability of weather data, readability of the home screen, preferences between new and current UI, and to identify the features and weather information valuable to users.

Methodology: Methods consisted of A/B testing and usability testing with tasks written out to be followed by users.

User Testing Tasks:

Task 1: Where would you look for more info about the weather currently and throughout the day?

Task 2: Where would you change the location for weather you are looking for?

Task 3: Please Tap on areas you find confusing or difficult to read.

Task 4: Here you see three versions of the Weather Underground home screen. Which do you prefer?   

 
 

Research Test and Deck created by Carol Bales (Sr. User Insights Manager and UX researcher)

To view the entire research deck, please contact me.

 
 
 

Key InsightS

Based on the results of the testing here are the important insights:

  • Establish a hierarchy for weather data to help users identify the differences between the potential sources for more weather information.

  • Radar is important to Weather Underground users. Users were receptive to the new design and strongly preferred the version with radar.

These insights reinforced that we would iterate on the established design system and begin adding severe and radar features after the launch of the MVP.

 

Design System

 

With the insights gained from the user testing I documented the different iterations of the design system. The documentation laid out specifications and interactions for the development teams. I maintained these specifications throughout the project and also applied the foundation of the design system to new features that were also requested from the project management team. Below are just some of the documentation and deliverables I provided for both the iOS and Android teams.

 

Bringing It All Together

 

We not only applied a defined foundation with a card-based design system to the MVP, but we were able to apply severe weather, radar, and subscription features that resulted from each product review cycle during the duration of the project.

 

iOS design system implementation

Android Design System Implementation

 

Outcomes

 

Always consider everyone who is working/previously worked on the project. Since we picked up a lot of work that was dropped from a defunct team, I learned that I have to consider the needs of everyone that was involved in the project. Even though I had plenty of ideas, I had to sometimes step back and consider if they were realistic with the development team’s time and the restraints on code bases that we were migrating out of or built from scratch.

Next Steps:  

  1. Add map to the Current Conditions card at the top of the home screen.

  2. Apply the severe Hurricane card within the Home screen Feed.

  3. Iterate upon the usability of the weather graphs within the app. The documentation and research are currently in progress; below is the preview.

 

View More Projects