Pathway Design Build

Mobile-First Responsive Design

Pathway Design Build Hero Image

Project Overview

Challenge

Pathway Design Build specializes in luxurious custom home remodeling. The company rebranded and wanted a mobile-first responsive design.

Objectives

• Develop a mobile-first responsive design

• Develop the brand to be consistent with the experiences of previous clientele as well as reach and acquire new clientele with a fresh experience

• Plan and develop the content strategy

Project Scope

Mobile-First Responsive Design, Branding, Content Strategy

Role

UX Designer (Research, UX Writing, Visual Design, Interaction Design, User Testing)

Team

Developer, Project Manger, Stakeholders, UX Designer (Me)

Sector

Construction, Trade Industry

Client

Pathway Design Build

Tools

Adobe XD, Illustrator, Figma, OptimalSort

Duration

Two Months

Research

Research Plan

Research gives me a greater understanding of the needs, hopes and goals of users. It reveals motivations, frustrations, limitations and expectations users may be experiencing when interacting with a product.

A research plan was created in order to keep the project on pace and guide design decisions.

Secondary Research

Heuristic Audit

Since this company was rebranding their identity it was necessary to conduct an audit of the previous brand and its image held in the market to eliminate any prior obstacles the company may have had as well as enhance any available opportunities.

Market Research

I wanted to get an aerial view of the market beginning with market research. It is important to get a pulse on who the audience is as well as recent trends and motivations. Information collected from market research will help identify essential questions to ask in interviews.

Home Remodeling Trends

•An annual increase of 58% was reported inn leads for home remodeling professionals in June by Houzz, an online home remodeling platform

•The biggest increase in demand came to those working on outdoor spaces, with pool and spa professionals being searched 3x more than what they were a year ago

•Kitchen and bath renovations has always been the most popular remodeling choices saw a 40% jump in demand in June compared to a year ago with more people cooking at home now more than ever

•Home extensions and additions increase by 52%

•Home security, home privacy and repairs boomed 166%

•Home owners saw their equity rise significantly in the United States with just over 15 million residential properties were considered equity-rich in the 2nd quarter of 2020, meaning mortgages on those properties were 50% or less than the value of the home according to ATTOM Data Solutions

Demographics

•Over three in four, 76%, of homeowners in the U.S. completed at lease one home improvement project in 2020

•As many as 82% of millennials, 79% of Gen X and 56% of baby boomers carried out at least one home improvement project in 2020

•Remodeling projects increased across all age cohorts, but Millennials spent the most, averaging $10,000 to achieve their desired home remodeling projects

•According to Bank of America 70% of Americans tackled home improvement projects

•Homeowners spent on average, $13,138 on home-related services in 2020, up from $9,081 from 2019

Motivations for Home Improvement

•25% of homeowners said the top motivator for a home remodeling project was that they “finally having the time”

•”Adding value to your home” was reported by 21% of homeowners

•Having their “home feel more cozy” was motivation for 21% of homeowners

•16% of homeowners said they were “adapting to new lifestyle under COVID”

Competitive Analysis

It was critical to evaluate direct competitors within a close proximity to assess their products to collect insights about their strengths and weaknesses. The insights gathered would provide valuable information to address specific features Pathway Design Build could offer to meet user needs that might be missing from competitors.

David & Goliath Builders Logo

Strengths

• Longevity in the community
 
• Demonstrates experience and credibility

• Provides multiple services for a variety of needs

Weaknesses

• Congested and user unfriendly site

• Information overload

• The experience is more about them than the user

Wise Design Builders Logo

Strengths

• Ample examples of  work

• Strong staff and credible testimonials

• Straight forward and easy navigation

Weaknesses

• Poor demonstration in highlighting work history

• Cluttered pages

• Poor mobile site

Kurber Construction Logo

Strengths

• Clean layout and design

• Great examples of previous work history

• Gives user opportunity to share more about inquiry 

Weaknesses

• No descriptions with examples of work history

• Overbearing “About us” page

• Poor overall design and layout to site with little consideration to user

Primary Research

User Interviews

Having a basic understanding of the market and its audience, I needed to connect with real people using the products and services to obtain insights first-hand.

I created, organized and facilitated the user interviews to hear their stories and learn more about their experiences. My assumptions would either be validated or invalidated.

Research Synthesis

Empathy Map

I constructed an empathy map to synthesize the qualitative data compiled from the user interviews. This would be essential in identifying patterns across users such as pain points, desires, goals, frustrations and needs.

Insights

• People want peace of mind

• People want information relevant to them

• People want a clear step by step process

• People want to be dealt with honestly

•People rely on the opinions of those they trust

•People want to see finished projects for comparison

User Persona

Now that I have discovered pertinent information about the people using the services and products along with key insights to their needs and goals I produced a user persona. The user persona will serve as a representation of the target audience I am designing solutions for.

User Persona-HeatherUsability Report Title Page
Ideate

Defining the Problem

Taking the insights and needs from the empathy map I generated statements and questions. The statements will assist me in ideating goals and the questions will help support possible design solutions.

Insights

People want peace of mind
 


People want information relevant only to them.



People want a clear step-by-step process.





People want to be dealt with honestly.



People rely on the opinions of those they trust.




People want to see finished projects for comparison.

Needs

People need trust to be established
 

People need information relevant to their search.



People need to know what to expect.





People need trust and transparency.



People need confidence and assurance for their investment.



People need to view examples of previous work.

Statements

People need to have trust established because their peace of mind is essential.
 
People need access to information relevant to them because their time is essential.

People want to have a clear step-by-step process because knowing what to expect is essential.



People want to be dealt with honestly because trust and transparency is essential.

People want to hear from trusted opinions of others because confidence and assurance in their investment is essential.

People want to see finished projects because viewing example of previous work is essential.

Questions

How could we establish trust so that people have peace of mind?
 
How might we present the most useful and relevant information to people?


How could we demonstrate a clear and concise process for people to follow that is easy and exceeds their expectations?


How might we convey trust and credibility with honesty and transparency?


How could we communicate trusted opinions of others?




How could we display previous projects that provokes confidence and assurance?

User Persona-HeatherUsability Report Title Page

Brainstorm

At this point I brainstormed solutions around the questions below. I spent some time answering these questions in an effort to help me empathetically connect with my target audience.


• How could we establish trust so that people have peace of mind?  

• How might we present the most useful and relevant information to people?

• How could we demonstrate a clear and concise process for people to follow that is easy and exceeds their   expectations?

• How might we convey trust and credibility with honesty and transparency?

• How could we communicate trusted opinions of others?

• How could we display previous projects that provokes confidence and assurance?

Product Goals

Summarizing the business goals from the stakeholders along with the user goals resulted in a simplified outcome with deliverables. This would serve as a guide for the future development of the product and a rubric when determining which features to include.

Product Goals

User Stories

Taking the deliverables from the product goals I created a user story. The user story is attached to the user persona and represents the collective voice of the target audience as well as connects business objectives held by stakeholders. The statement below will guide design decisions throughout the iteration process toward the needs and goals of the users.

"As a homeowner who wants to make some renovations I need relevant information I can trust from an experienced contractor so that I can have confidence in my decision."

Product Roadmap

I constructed a comprehensive product roadmap with a list of product features. It was categorized by how well it can help accomplish business and user goals.

The product roadmap not only prioritizes the most important features throughout the development cycle, but also instills the project goals into the product.

Iterate

Information Architecture

The research, insights, user needs and product goals were systematically arranged and labeled to inform the structure and flow of the sitemap.This will be used to further iterate and designate design solutions for the product.

Site Map

I devised a clean and simple sitemap to visualize the relationship between the content and survey the hierarchy of the structure for the mobile app.

Task Flow

Task flows were created to identify and focus on key components users will navigate through to complete a task. This will help me process each step a user takes to maneuver through to reach their desired destination or goal.

User Flow

I diagrammed user flows to expand on the task flow. This allowed me to process the feelings, decisions and actions of users even more.

Wireframes

Mid-Fidelity Wireframes

Responsive Wireframes

Using the sketches as a foundation for the visual direction I created mid-fidelity wireframes before designating styles. During this process I added more detail to the design and incorporated elements that addressed the frustrations, motivations, need and goals of users directly.

To keep a cohesive experience for users across various devices I designed responsive wireframes for mobile, tablet and desktop devices.

Homepage

Mobile

Mid-Fi Responsive Wireframe- Mobile

Tablet

Mid-Fi Responsive Wireframe- Tablet

Desktop

Mid-Fi Responsive Wireframe- Desktop
Build & Test

Mid-Fidelity Prototype

I linked the mid-fidelity wireframes I designed in Adobe XD to create a mid-fidelity prototype for usability testing. Since the mobile and desktop version had a slightly different visual layout I created and tested both prototypes. Conducting usability testing early in the design process allows me to expose usability issues in the information architecture and flow of the design before concentrating and applying more visual details.

Tasks include:

• Task 1: Find the page that provides more information on Pathway Design Build's process.
• Task 2: Fill out the contact form to receive an estimate for a kitchen remodel.

Usability Testing

Executing Usability Test Plan

I composed a usability test plan to cover the subject, test objectives, methodology, scenarios, tasks and rubrics so that I could gauge and project results before conducting the usability test.

I expected to have a 100% completion rate since the tasks were simple steps to achieve. I also anticipated an 85% error-free rate because the prototype is not fully functional or finished.

Usability Test Results

Mobile and desktop devices were used to evaluate the usability and functionality of the design. The usability testing, both moderated and unmoderated, was conducted remotely using Skype. Jakob Nielsen’s error severity rating scale was used to evaluate the design to either validate or eliminate usability issues. Several adjustments were made to the design following the testing.

Visual Design

Branding

I collected various ideas to create a mood board from the characteristics listed below. These qualities best described Pathway Design Build and targeted the audience they were trying to reach.

• Confident: Pathway Design Build strives to provide clients with confidence. 

• Elegant: Pathway Design Build wants to differentiate themselves from competitors through their elegant design.  

• Excellent: Pathway Design Build is adamant clients experience excellence throughout the entire process. 

•Innovative: Pathway Design Build desires to be on the cutting edge of innovative design.

Logo

I inherited the logo designed for the company. However, I made some slight adjustments to the color of the icon for the logo to enhance its aesthetics.

Logo Icon - #E5B548

Logo Icon - #DEB65B

Style Tile

To help establish the visual style of Pathway Design Build I developed a style tile document incorporating the characteristics, logo design, color palette, typography and imagery into the Brand so that it may steer the UI design.

Responsive UI Design

I infused the style tile into the responsive UI design to establish the visual design for the product.

Homepage

Mobile

Pathway Design Build Homepage- Mobile

Tablet

Pathway Design Build Homepage- Tablet

Desktop

Pathway Design Build Homepage- Desktop

Project Page

Mobile

Pathway Design Build Project Page- Mobile

Tablet

Pathway Design Build Project Page- Tablet

Desktop

Pathway Design Build Project Page- Desktop

About Page

Mobile

Pathway Design Build About Page- Mobile

Tablet

Pathway Design Build About- Tablet

Desktop

Pathway Design About Project Page- Desktop

Contact Page

Mobile

Pathway Design Build Contact Page- Mobile

Tablet

Pathway Design Build Contact- Tablet

Desktop

Pathway Design Build Contact Page- Desktop

UI Kit

The UI Kit is composed of current UI elements used for collaborating future design objectives. With any and all iterations to the design the document will need to be revised.

Final Product

With all of the high-fidelity wireframes designed I linked them together using Adobe XD to build a high-fidelity prototype for a final presentation to the stakeholders. Since then it has been replaced with the final product currently used by the company, Pathway Design Build.

view Product
Review

Conclusion

I signed on for a two month contract with Pathway Design Build. I finished with my responsibilities for the project in six weeks. I set aside a week to evaluate and revise my work on the project. At the end of the week I walked the stakeholders through a presentation of the product. We pre-launched the product a week early to a small focus group for further evaluation and revision before its debut.

Learnings & Future Considerations

Communication between the stakeholders and design team could have been better. I think establishing certain expectations concerning communication from the beginning could have alleviated some of the issues faced during the development cycle of the product. This would have lead to greater productivity and better work environment.

View More Work

Savages

End-to-end design for mobile application

RESEARCH/CONTENT STRATEGY/PRODUCT DESIGN

The Tile Group

Responsive Web Design

UX/CONTENT STRATEGY/WEB DESIGN
WelcomeResearchIDEATEIterateBUILD & TESTreview