UX/UI Designer
craftport (1).jpg

Craft.co

craftport (1).jpg
 
 
 

DETAILS:

Client:
Craft.co

Role:
Freelance UI/UX Designer

Timeline:
April ‘16-Sept ‘16

Craft.co

context:

Craft is building the Source of Truth on companies, aggregating data at high-scale and presenting a valuable data/analytics app for professionals as a free B2C product.

50m+

Data points

260,000+

Company profiles

260

Sectors/Industries


PROJECT SUMMARY:

I was hired as a freelance UI/UX designer to improve the user experience of the reports page, filtering and sorting functions, blog and company directory list.

PROBLEM STATEMENT

  • Craft.co has a lot of company profiles (260,000+), but their is currently no easy way to search through these profiles and have a good overview

  • The filtering and sorting is limited and doesn’t offer in-depth search ability

  • The blog pages are high traffic drivers and they are not currently optimised for product adoption

PROPOSED SOLUTION

  • Improving filtering and sorting on the company overview page

  • Introducing company ‘cards’ that are easily sortable and scannable

  • Improve CRO on the blog pages, introduce search bar and sign up links

GATHERING SPECS & Wireframing

Before investing too much time in the UI design, I gathered all the different search parameters and creating some quick wireframes using Balsamiq. Since there were so many different parameters, and the search functionality was a core part of the product, I decided an optimal layout would be to use a left column grid for the filtering where the user could see updates happening in real time (similar to an e-commerce experience)

 
Screenshot 2019-04-18 at 17.41.50.png
Screenshot 2019-04-18 at 17.33.34.png
 
 

HI-FI PROTOTYPING (filtering)

Since the brand guidelines had already been creating, I applied the existing colour palette and UI patterns to create the layout.

 
222 (1).jpg
 
Craft video.gif
 
 

save & comparison features

The use of a card component was introduced to give an overview of a companies profile with key information as well as the option to link to the complete profile page.
We also added the option to compare companies and add it to a personal curated list.

saved search.jpg
Screenshot 2019-04-18 at 17.49.40.png
 
Save search.gif