The business

theright.fit is a maketplace where brands and talent meet. Talent, in this case, means models, actors, influencers, photographers and more.

The team

Product Manager

Stephanie McDonald

UI Designer

Dan Shepherd 👋

Frontend Developer

Ganesh Rajendran

Backend Developer

Latesh Garg

Background

With over 8,000 clients using the platform and growing everyday there were some elements of the client side user experience that hadn’t seen much love since launch. These elements were created when the company was in an MVP mindset, with developers often using system defaults to get the job done.

The resulting components were ‘rough around the edges’ at best and increasingly seen as a liability to the user experience, and the business.   One such element was the “Invoices Table”, which detailed payment information from past jobs. As the platform grew and clients booked more and more talent, there was a need for an invoice table with improved users experience.

Before redesign

Challenge

Invoices difficult to find

An increasing number of customer service enquiries were coming through related to missing invoices. The customer service team reported that in all cases the invoices were there but simply difficult to find.

The original invoice table had the bare essentials but didn’t include any information/aside from “total” to help them recognise the invoice they’re looking for.

Increase in influencer jobs

This was especially problematic considering there was an increasing number of ‘influencer’ jobs booked on the platform. These new influencer jobs often resulted in two or more talent booked on the same job with the same total fee.

Without a clear way to identify which invoice they needed to download, clients would often download multiple invoices until they found the one they were looking for.

‍This behaviour was reported by customer service team and observed in logrocket, a bug tracking and user session recorder.

Challenge

UI Refresh

theright.fit was in the process of refreshing the UI to be more consistent throughout, in keeping with UX/UI best practices and more inline with the companies visual identity.
‍
 I began working with theright.fit team on the UX/UI refresh, starting first with components and pages that saw much more use, like the talent profile: see case study.

Designing tables isn’t the sexiest thing in the world and not traditionally 'case study material', but hear me out. I personally think thoughtfully designing information is always a benefit to the user and tables are such a common occurrence in UI design.

Solution

Add data points that will help visual recall

The new data points were decided based primarily on client and customer service team feedback.

These included:

Job ID
Job Title
Talent Name

Problem solved? Adding these data points met the intitial requirements, but further exploration into how we could improve the invoice searching experience was needed.

SOLUTION

Add image to improve visual recall

theright.fit talent are primarily made up of models, actors and influencers. All of which work in a visual medium with their face front and centre.

Adding the talent profile image to the invoice table would potentially increase the scannability of the invoice table, especially when multiple talent are booked on the same job, with the same total amount.

SOLUTION

Clarify visual hierarchy

Column order, label and data font sizes and colour were refined over many iterations. All an effort to draw the eye to the most important identifiers:

Total
Talent face and name
Job

Download CTA tap targets

The download icon in the early designs were drawing the eye too much for a tertiary action. Making the icon smaller to move it down in the visual hierarchy, reduced the tap target significantly.
‍
Eventually, through iteration, I discovered a light grey border helped to increase the size of the tap target but not draw the eye too much.

The result

The customer service team reported very few enquires related to missing invoices after the implementation was complete.
‍
Results of the UI refresh are much more subjective, but the internal team were satisfied with the visual consistency across all redesigned screens.
‍
This was a good result BUT there is certainly more work to be done.

Work to do

With an increasing number of influencer jobs on the platform, we are seeing a much higher rate of bookings, per client, than ever before. This will soon require a more fleshed out solution for invoice management. This may include invoice search functionality and the ability to group invoices by job.

Before

After

More designs

I post a mixture of finished designs and work in progress on dribbble.

View On Dribbble

Let's chat

No matter how big or small the project, it starts with a conversation.

Get In Touch

T-Shaped marketer

"T-shaped people combine a deep understanding and expertise in one area, with a breadth of knowledge across many overlapping disciplines."

While I specialise in Digital Marketing and Social Media Strategy, I can also help with...

Web design

Web Design

Web development

branding

VIDEO PRODUCTiON

Video Production

AUdio Production

Audio production

Photography

CRO

seo

Staff Training

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Louder Than Words

April 12, 2016

Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.Proin volutpat lorem id neque facilisis rhoncus. Fusce sapien nulla, tincidunt et tempus eget, lobortis sed sem. Ut rutrum felis sed neque eleifend, nec eleifend lectus tincidunt.