4Quote.ca
Role: Lead Graphics & UI/UX Designer
Status: In progress
Problem
Paying 411.ca business users want more than just a premium business listing.

Goal: Help existing 411.ca business users get more leads - by designing a web interface that matches customers with local professionals.

 
Research & Planning
Thousands of businesses born & die throughout the year. The chart below shows how many Canadian businesses appeared & disappeared in 2017. Construction & professional services lead all categories with the most births. [1] Canadians spent $77.7 billion last year on home renovations in 2017. [2]

Next - We looked at sites offering a similar service. 411.ca is home to 20,000 verified home professionals across Canada. Homestars is the leading competitor, with sites like Handy & Jiffy on the rise, 411.ca has opportunity to contend with a better offering.

 
Branding & Identity
As a subproduct of 411.ca - We were tasked with creating a complimentary brand identity for this new offering. We needed: names, logos, icons, typefaces, color palettes & more to compliment the existing 411 brand. After meets with stakehlders & product managers, we started with the name, logo then rest of supporting elements to start.
   
User Personas
Next - We created 2 user personas: Influencers (looking for professionals services) & paying 411.ca business owners (looking for work). Each persona was generally based on user research and incorporates the needs, goals, and observed behavior patterns of both audiences.

 
User Task Flow
Next we outlined the flow of how each user persona completes their task. The goal of the task flow is to optimize the users ability to accomplish a task with the least amount of friction.

 
Sketching
Before creating pixel perfect mockups - I had to sketch each part of the user flow for both groups to get buy in from Product Management. Keeping in mind - these pages will need to be responsive & adhere to the 12 column bootstrap grid system.

 
Mockups
After getting the sketches approved - low-fidelity wireframes were created, followed by high-fidelity made with Adobe Photoshop + Illustrator. Below is an illustration of the user flow from start to finish.  

 
Prototyping
After getting high-fidelity mockups approved, we began to prototype for actual user testing. We created a prototype for both user groups using InVision - making a complete interactive experience of how 4Quote is intended to work.

Janet's Journey: View prototype here.

Michael's Journey: View prototype here.