My Home Pros
Responsive Web Re-Design
My Home Pros is a home services site that helps connect users with home service professionals. It is used to drive traffic to Suited Connector's partner & advertiser surveys.
Overview
Goals
-
Bridge the gap between consumer and buyer engagement as we transition from B2B to B2C
-
Build up brand reputation
-
Increase conversions
Solutions
-
Give the home page a more friendly and approachable design
-
Create a more efficient user flow that brings users directly to the advertiser survey
-
Add multiple ways for users to get to the surveys on every page
-
Highlight our most trusted partners to build brand reputation
Skills
Competitive Analysis
Research
Wireframes
Prototypes
Illustration
Tools
Figma
Adobe Illustrator
Google Suite
Sketching
QA
Design Overview
Homepage
Before
After
Homepage
-
Placed focus on sub-verticals with the highest conversions
-
Made sure all CTAs take users on the most direct journey to the surveys to increase conversion rates
-
Added clear instructions with bold action items
-
Emphasized trusted partners to show brand reliability
-
Added multiple clear CTAs throughout the page
-
Updated page UI & imagery to a brighter and happier look and feel
-
Updated logos and icons
Home Improvements
Before
After
Home Improvements
-
Alphabetized sub-verticals making it easier for users to find the project they are looking for
-
Linked CTAs directly to the surveys instead of going to "learn more" blog posts
-
Added CTA block to "Join As A Pro"
-
Added our trusted partners to reinforce brand reliability
-
Made hero brighter and more welcoming
Subvertical Pages
Before
After
Sub-vertical Pages
-
Added hero with CTA to top of the page for a more immediate way to get to the advertiser survey
-
Embedded sub-vertical specific CTA block to break up text and give greater opportunity for conversion
-
Added our trusted partners to the bottom of every page to reinforce brand reliability
Research
To kick off this project I met with stakeholders to understand what their needs/goals were for the re-design. We talked in depth about previous testing done on the site to determine its strengths & weaknesses, as well as where there would be opportunities to grow.
Goals
-
Shift gears from a mainly B2B site to be more B2C friendly
-
Increase conversions (site was getting a lot of visitors but not getting customers into the surveys to convert)
-
Bridge consumer and Pro/Buyer engagement
-
Use updated branding for logo and site colors
-
Build up brand reputation
Challenges
-
Specific Aspirations - After meeting with stakeholders I could tell they had very specific ideas in their heads of what they wanted visually for the re-design. These ideas were inspired by other brands they liked, but weren't tied to their current brand identity.
-
Time - Due to a tight timeframe for delivery, there was not as much time for research as I would've liked so I had to keep a very narrow focus.
Competitive Analysis & Ideation
Stakeholders gave me a very clear list of brands that they liked and wanted me to emulate. At first they were really leaning towards a playful, hand-drawn feel, which I felt took the brand in a completely different direction and could be confusing to existing business partners. I was able to research other brands that I felt still had the playfulness that they were looking for, but felt closer to the current brand identity. After presenting my research to stakeholders they were more understanding of my pushback but wanted me to try both options.
Option 1: Hand Drawn Feel
For the first design option, I decided to fully embrace what the stakeholders were asking for and did hand-drawn illustrations that depicted the essence of the site. I decided to focus on the word connection and show that through my illustration. I made sure to add multiple ways for users to get to the surveys quickly.
Initial Sketches
Mock
Option 2: Playful Imagery
For option two, I wanted to use light and bright images to create a friendly atmosphere for B2C users, while keeping the brand identity closer to the original site for a smooth transition for existing B2B users. I also wanted to build brand reputation by including our trusted partners high in the fold. I made sure to include multiple ways for users to get directly to the surveys to boost conversions.
Initial Sketches
Mock
Option 3: Additional Hero
A third option was proposed due to some timing challenges. As I was working on the two initial designs, stakeholders tightened the timeframe and asked that I develop a solution that could be implemented immediately. For this option I decided to focus on brightening the hero image, including clear CTAs, as well as adding the trusted partners section to build brand reputation.
Initial Sketches
Mock
Iterations
After presenting the options to stakeholders, they agreed to move forward with option two, as it bridged the consumer buyer gap without straying too far from the original brand identity. Now that we had chosen a design, it was time to iterate!
Before
After
Homepage Updates
-
Updated to new logo & brighter versions of brand colors
-
Updated copy to be more clear and intentional
-
Moved top performing verticals above the fold
-
Made all vertical links go directly to the surveys
-
Removed Contractor image due to licensing issues and time constraints
-
Added back "Lets Help You Get Started" section with updated icons and additional CTA button
Implementation & QA
I was heavily involved in the QA process. Once I had stakeholder approval on final designs, I created detailed tickets in Jira with instructions for the development team to implement my designs in WordPress. As the site was staged, tickets were passed to me for QA review, where I made sure the site visually matched the approved mocks, tested the functionality, and ensured that all links directed users to the proper landing pages. After several rounds of QA we were able to get the designs implemented in the required time frame.
Future Steps
Since we were very limited on time, there were a few pages, including the "About Us" page and the "Project Digest" page, that were not in the scope of the re-design. The plan is to continue to iterate as we gather more data on how the site is performing in order to make further updates to these pages.