LeadShop - best leads store for craftsmen

LeadShop is a platform where craftsmen can select and purchase customer leads. They can set up their preferences, skills & profile. They have a choice between buying leads per unit or getting a monthly subscription.

Client
Lokale Handwerker
Services
UX/UI Design
Deliverables
Fine designs & interactions
Year
2018

About the project

Finding a right craftsman for a house renovation project can be really challenging. Same goes for the craftsmen to find the right jobs matching their skills, location and preferences.

Here, LeadShop comes with a help! Once the craftsman registers, and sets up his/her profile, they can browse through the list of open jobs, and purchase leads directly online. They can select an option to pay for individual leads, or get a monthly subscription. The platform lets them connect with the right customers thanks to filtering options by region, service type or job size.

My role

In this project, I designed the entire customer flow on mobile from logging in into a platform, setting up an account to selecting leads & making purchases.

The objective was to create the best possible customer experience on mobile based on the desktop version that has been already designed. Mobile version should be intuitive and easy to use for people without advanced technical skills.

The challenge was to keep it simple & clear on mobile, having to deal with quite a complex flow & feature set.

LeadShop - Mobile & desktop version

It all starts with a pen & paper

After the initial research & competitors benchmark have been done together with my team mates, I then sketched low-fidelity wireframes of how do I envision the mobile version of a LeadShop.

I focused on the following parts:

  • log in into the platform
  • account setup
  • lead shop (core part)
  • checkout flow
  • settings & preferences
Low-fidelity wireframes - LeadShop

Once I received feedback from my team, I then sketched high-fidelity wireframes in Sketch. After a few iterations, and sketching the flow, it was the time to start the visual design.

Designing over 60 various screens

Designing a tool completely from scratch is a lot of fun because of the freedom, and possibility of being creative. However, it can also be quite challenging as you need to sketch multiple flows, think of loading states, error case & possible UX shortcomings.

Initially I focused on sketching screens for our main flows and covered only "happy scenarios".

After that phase was ready, we asked few of our existing customers (craftsmen) for feedback. We tried to find out what are their feelings about the tool, and whether they see any major usability issues.

Selection of mobile LeadShop sketches

Craftsmen feedback

After showing the initial sketches to craftsmen, we saw that we were on the right track. :-) In general, they really appreciated the idea of a LeadShop and said they could definitely envision to use it.

From our talks we derived a list of possible improvements, and features that could be added in the future.

Some of our craftsmen feedback:

"Wow, this is very cool! I can not wait to use it. It will save me a lot of time, as I can filter by a region, and job sizes that are relevant for me. I wish I had also an option to draw my own region on the map."
"Very nice idea, I only wonder how it will work in practise. If I purchase multiple leads and they do not result in receiving jobs, it could be quite pricey. However, I am really looking forward to try it."

Designing interactions

After receiving feedback from craftsmen, I re-iterated on some screens and started to design various interactions, data validation and error cases.

In order to hand it-over to developers I prepared a brief documentation and uploaded it to Zeplin.

Example of interactions preparation for delevopers

Fine designs

I then prepared a collection of 88 screens in total, which were uploaded to Zeplin.

Fine designs - LeadShop
Account setup - Preferences
Checkout screens

Preparing sprites

As a last step, I tend to prepare PNG sprites for development. This collection of smaller individual icons improves the web page’s performance and keeps things more organised.

The essential point of using Sprite Sheets is that the server only has to send one image file containing all the images, instead of a host of individual ones.

Sprite used for mobile webpage of LeadStore

Landing page

As a next step in this project, I designed a landing page for craftsmen, which explains the idea of LeadShop. Craftsmen can register for free and create their account, which would then bring them to the flow demonstrated above.

Landing page for lead buyers - Hero section

Some things aren’t meant to be

Although we got pretty close to shipping an initial version of the mobile LeadShop, time constraints and company priorities got in the way and we had to pause the project.

However, it was a great fun and experience working on this project and I personally learned a lot in the process.

Interested in working together? Get in touch today.

Drop me a message & let's have a chat! :-)