Helping building owners find the right roofing system for their needs.

Year

2021

Client

Firestone

My Role

Experience Designer

Teammates

Julian Escobar
Sophia Robbins
Kylin Johnson

Methods

Competitive Research
Comparative Research
Expert Interview
User Flows
Alternative Design
Wireframing
Prototyping
Visual Design
Guerrilla Usability Testing

FS_Intro_1
RF_WF_Q1

Overview

Firestone's Building Products division specializes in commercial roofing. Their existing and prospective customers experienced frustration on the Firestone website while navigating roofing options, and internal sales reps faced challenges generating leads. Firestone needed a way to guide users to the right products and improve customer interactions. 

At
Razorfish, our team set out to design 'Roof Explorer,’ a product recommendation tool. We focused on creating a user-friendly experience, simple design, and strategic entry points.

My role

My role as an experienced designer allowed me to lead various aspects of the project, including competitive and comparative research, user flow development, ideation, wireframing, interaction, high-fidelity prototyping, and presenting. Working alongside our team's visual designer, I collaborated in finalizing the design.

imagegrid_15

The challenge

How might we guide customers to the roofing solution that meets their unique building requirements while streamlining the lead generation process?

Establishing design principles

We formulated design principles to guide our decisions, ensuring consistency and alignment with the objectives that our product is intended to achieve for our users.

  • Make it understandable
    Information and functionality must be clear and immediately understandable at first glance, ensuring the product is easy to understand and use.
  • Keep it simple
    Design for the user's primary goals. The design should be as little as possible, remove distractions, and concentrate on the essential aspects.
  • Strike a balance between reactive and proactive
    When users are ready to receive a recommendation, they ask the product for it. The product is easily discoverable and contains clear call-to-actions.
  • Be transparent
    Users can determine the purpose of each question and why the recommendation is being provided.

Diagramming the user's flow

By mapping out the expected user journey, we could creatively plan each part of the experience and understand how our design fits into the broader system. We created three easy-to-find entry points and streamlined the assessment by including only essential questions. The results page features a contact form and allows downloading the results.

Recommendation-Tool_Diagram-Round-1.2-1

Wireframes

The wireframes underwent several stages and changes, starting with paper sketches and moving to digital format. We used "guerrilla-style testing" and "speed-dating" methods to test usability due to the project's timeline. Our team had daily standups, cross-functional feedback sessions, and client reviews to secure approval on the wireframes.

RF_WF_1

Bringing the Roof Explorer to life

Guided by our design principles and inspired by survey design patterns gathered in comparative research, we designed for time savings and a thoughtful experience.

RF_1.2
RF_2_1.1-1
RF_3_1.1
RF_4_1.1

Each building type was represented by an icon with Firestone's signature red color integrated into the roof designs to align with the brand's identity.

Frame-54

Displaying results

The challenge was to create an aesthetically engaging display that featured climate zone details and a curated range of products dynamically extracted from an extensive spreadsheet.

RF_12

The primary call-to-action is placed in a fixed position and allows users to contact a sales representative.

RF_Mobile_R1.png
RF_Mobile_R2.png

The contact request form is a bottom sheet with the ability to exit the form. Users receive a descriptive confirmation message after submitting.

RF_6
RF_7

Optimizing entry points

We created and tested multiple entry points to enhance discoverability and position them where users would logically expect to find them.

RF_P_2_1.1
RF_P_2.0
RF_P_3_3

Reflecting on lessons learned from this project

Faced with tight deadlines, our team was challenged to work fast while maintaining our focus on the user and design principles to ensure we designed the right solution. Paper and digital wireframes allowed us to learn and iterate quickly.

Working closely with developers from the beginning was crucial to understanding feasibility and setting design constraints.

Building a team culture based on collaboration and a shared purpose enabled us to develop a user experience that would make a positive difference for our client and their users.

Nick Santoro

UX | Product Designer

Based in San Francisco Bay Area

View