Odd Jobs
Odd Jobs
Overview
Odd Jobs is a e-commerce responsive website designed to provide individuals with a reliable and secure way of hiring suitable contractors for their residential projects. This was a research heavy project that was handed off to developers with a comprehensive design system, which allowed users to purchase a service and rate their contractors.
Role:
UX/UI Designer
Team:
2 UX/UI Designers
4 Web Developers
Methodologies
Kanban | Luke Wroblewski’s Best Practices| Lean UX | Hyper Island Ideation| IBM Design Thinking
Sprint:
3 Weeks
Problem
Odd Jobs is intended to achieve a user-friendly website to assist customers with choosing the best contractor for their at home projects.
We observed that customers are finding it difficult to hire a reliable contractor for their project, good quality and customer support, which cause the company to issue significant refunds and receive poor reviews.
We plan to achieve improved customer satisfaction by implementing thorough background checks, verify professional references and provide photo upload feature for customers and professionals. We will measure our success by tracking revenue, monitoring user reviews and customer referrals.
Framework
These phases guide us through a process that provides best practices for developing a digital product for an efficient user experience.
Educate
In this phase we educated ourselves with information from our competitors, the users and data analysis to decide our heuristics and UX strategy.
Competitive Audit
We research and observe how our competitors are currently servicing their users and take key features to implement in our website.
These are a few of the 15 companies we reviewed which showcased some best practices.
The Big Takeaways:
Provide clear CTA’s on the homepage and primary nav to guide users
Give users the ability to choose directly from the most popular projects
Reassure users of company standards and expectations
Display only one task at a time before allowing users to move on by disabling more options
Give users an alternate source of finding their most suitable contractor by providing a list view and map view
Show impartial reviews directly from satisfied customers
Provide example text in input fields and show error messages when information is entered incorrectly
Allow users to chat with contractors and upload photos of their project needs
Show a progress bar to guide the user and give them a status of where they are in the hiring process
Social Listening
Reviews from current users of our competitors who voiced they wanted reliable contractors, great customer support, and quality work.
Survey Data
The survey consisted of 38 respondents ranging from age 20 - 65.
Of Surveyors stated they currently hire contractors or would hire a contractor in the future.
This information validated the need for Odd Jobs!
Of surveyors preferred to hire a contractor by a referral from a friend.
These results are why we chose reviews as one of our KPI’s and considered our MVP!
Of surveyors overwhelming mentioned they would usually hire a house cleaner and mover.
This guided us in creating the most suitable persona.
Breakdown
During this phase we determined our product users and the journey they would embark by identifying the goals, objectives, and strategy for the UX/UI.
Personas
Our personas were created based on our data from the survey responses. Nicole best fit the age criteria of surveyors and Thomas is the seniors demographic group that would benefit from Odd Jobs.
User Journey/MVP Session
The User Journey is a very important process in the development of a website. We collaborated with the web development team to generate ideas and features for Odd Jobs by allowing each person to write down on post-its which features they assume were necessary for the user workflow. We also considered how the user would feel using these features.
Once we generated enough features we began the MVP Session where we voted on the best features with stickers previously given to the Product Manager, Designers and Developers. We then discussed the importance and value of each feature and the effort it would require to implement it.
KPIs - Key Performance Indicators
Revenue, Referrals and Reviews were notably our Key Performance Indicators, and how we measured our success for Odd Jobs.
MVP - Minimal Viable Product
Having a refer a friend page was the most important feature to have on the Odd Jobs website, because it would generate revenue and create continuous positive reviews.
Sitemap
Describes the flow of the website and where each page is displayed
Rough Draft….
First version of the sitemap sketched on post it paper to easily move them in to the right order.
Lo-Fidelity
Sitemaps provide a visual overview of the website
Allows us as designers to have guidance when entering the creation phase
Hi-Fidelity
UX Strategy
Are keywords that we base our website on to solidify the purpose of Odd Jobs.
What we stand by…
Odd Jobs guarantees around the clock support for customers and contractors, valuable testimonies from actual customers, verified professional contractors and always provide secure payment transactions.
Create
The phase that inputs concepts for the design of the website, which enter feedback loops and validate ideas and assumptions.
Paper Sketches
Lo-fidelity designs of website ideas and features.
Wireframes
Gray scale digital designs of the final paper sketches. The first testing of wireframes printed for peers to provide feedback to confirm our user flow.
Homepage
Our initial digital design begins in this phase as wireframes. My partner and I each designed our own version and after our repetitive testing from our peers, 5/5 decided that it would be best to mix our design ideas. We went with a big hero image in the 1st module with a google search bar on the left side of image and no carousel, popular odd job CTA tiles in the 2nd module and four testimonials in the 3rd module with no company recognition’s.
List or Map view
Provided on the contractor results page is a toggle view of results to give the user control of their preference on how to view their prospective contractor. 4 of 6 testers thought the map view was a cool display which showed hover states on contractor locations.
Moodboard
Sets the mood of the website. It assists developers with understanding the style, font, color scheme and icons used for the mockups.
Mockups
This task is honestly the most fun and intriguing because we are able to apply a color design system to wireframes to integrate a complete product for user testing.
Validate
Phase that allow users to test wireframes and mockup prototypes to ensure usability, flow, patterns, iconography, color schemes and design systems and provide feedback.
Prototypes
An interactive clickable example of the prospective website that we used to test with the public before making iterations.
Wireframe CTA
1st version of wireframes with a CTA in the 2nd module with hover state selection.
Wireframe Primary and Secondary Navigation
2nd version of wireframes with a primary navigation selection displaying a secondary navigation with hover state selection.
Registeration
Users are required to register before hiring a contractor to ensure business is managed within Odd Jobs.
Hover States
Hover states guide the user when making a selection. 4 out of 5 testers felt that the “Hire to Hired” hover state shown on the contractor profile page was confusing and wasn’t sure if hovering over the button meant they officially hired the contractor. This feedback enforced me to change the button to just “Hire”.
This prototype also shows locked task panes to ensure the user chooses a selection from the current subject before being able to move forward to prevent important information being skipped.
User Testing
The Home Depot “The Orange Life”
Early one morning I entered Home Depot and located two employees from the Pro (Contractor) Desk who were willing to test my wireframe prototype. They were very excited to see a website in development related to their career field.
The Train Test
Met this gentlemen on my commute who mentioned that he is moving to North Carolina for a job. Asked him if he is hiring a mover, he said YES! So I asked if he he didn’t mind being a tester for my wireframes.
Highlight Features
Sticky Nav
Our homepage shows a persistent primary navigation bar which allows user to have full control during their experience on the Odd Jobs website.
Sticky Filters
Our results page shows a persistent task pane that give users the ability to filter contractor results inclusive of price, experience, ratings and services.
Modify
Iterate mockups and prototypes by prioritizing feedback so as to ensure we capture the complete user journey.
Input Fields
Gave the user guidance in input fields by providing placeholder text with an instructions as an example. Also, created error messages to inform users when they have entered information incorrectly.
Implement
User Flow Annotations
Shows where the users of Odd Jobs begin to find their contractor to when the project is completed and refer a friend.
The Hand Off
Unified Source of Truth
This google doc was shared with the development team to ensure they had access to all assets, for the development of Odd Jobs.
Design System Manager (DSM) is a tool within Invision that provides easy access to mockup details for web development.
CSS Code was used to design the aesthetics of Odd Jobs. Here is an illustration of the developers using our mock to implement our design system.
Conclusion
Users appreciated the ability and simplicity, to screen professional contractors prior to hiring them, while ensuring they have financial security when making online payments. This in turn, provided consistent referrals, increasing Odd Jobs overall revenue.
Collaborating with my development team to build this product has taught me the importance and value of each team member’s role and contribution to the UX/UI process. Together, we created a platform that demonstrates strong organizational design principles within product design.
Preserving a growth mindset throughout this experience reinforced my commitment to continuous learning and innovation. The benefits of this perspective will provide limitless possibilities and opportunities to grow, adapt, and deliver impactful solutions