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

Talent profile

With over 8,000 talent on the platform, the talent community need a profile page that allows them to standout, showcase their work, their look, their… je ne sais quoi.

This is the primary way that talent can showcase their skills at a glance. Talent cannot edit the structure of the profile page, so theright.fit are responsible for helping them put their best foot forward.

A quick note on design process

Before I get into specifics, I want clarify one thing. I'm focusing mostly on UI and visual design in this case study. The design process included wireframes, prototypes and outside considerations, like business strategy and product strategy. I am purposely glossing over these details to focus on specific elements of the visual design. I'm more than happy to discuss my design process and various considerations for this particular project in more detail.

Ok, now that's out of the way, here's the 'before' shot.

Before redesign

Challenge

Hierarchy of information: Images below the fold

Whether you’re a model, influencer, actor or photographer, you communicate your ability, and look, through images (and to a lesser extent video).



Depending on how long a talents bio is, the images could appear well below the fold. This was magnified even more in the mobile experience, where the bio length became an unpredictable variable that pushed these important images further away from a prospective clients view.



While a talents bio is valuable information, images were identified as more important based on user research and the founding team’s understanding of the industry.

Challenge

UI Refresh: Reusable components

theright.fit was in the process of refreshing the UI to be more consistent throughout and more inline with the companies visual identity.


V2 of the platform (a complete rebuild) had launched 4 months previously and there were still many loose ends to tie up from a UI and visual design perspective, the talent profile being the first target.



The UI refresh as a whole was quite a large project, with many moving parts, but as it relates to the talent profile, I will focus on the design and implementation of the “Talent Card Component”.

Challenge

Introduce Gamification

theright.fit team were keen to introduce some gamification elements to the talent side experience. This was to encourage behaviour that elevated the experience for clients (like faster talent response times) and emphasis the importance of reviews and number of jobs booked as a measure of quality.

The team envisioned a publicly visible badge system that plays to conventional two sided marketplace dynamics: reward the talent (supply side) for being more active on the platform (booking more jobs) and inform prospective clients of a talents credibility specific to their experience in the marketplace.



SOLUTION Part 1

One talent card component to rule them all

I will go into more detail about the design of the talent card component in a separate case study (coming soon). For now I will focus on it’s utility as it relates to the talent profile page.

A larger profile image

Perhaps the most obvious design choice was to increase the size of the talent profile image. Giving the talent more control over that all important first impression.

Keeping it contained

Including the same content/data as the original was essential. First step was to consider the possible variables including: name length, number of skills (eg MC/Presenter, Actor, Model etc), location length and follower count.

Number of skills was the main concern when it came to variables. If the total skills character count necessitated two lines, the talent card would increase in height by 20px. After requesting a csv export of all talent with number of skills included, I could calculate that only 6% of all talent would exceed this character length. This was a trade off we could accept given the time constraints on this particular project.

theright.fit were also in the process of reviewing which skills would be available to talent. Once this was decided we would review the talent card again to design a more elegant solution that accounted for all variables.

To be honest, I would have liked to spend more time finessing the solution to this design problem. I have learnt the time constraints that come with fast moving, venture backed startups mean a 'calculated' tradeoff is sometimes the best you can hope for. You move on to the highest priority that will move the needle for business and circle back when you can. At least that's my experience.

Add gamification to
talent card

theright.fit product team were keen to introduce some gamification elements to the talent experience. This was to encourage behaviour that elevated the experience for clients (like faster talent response times) and emphasis the importance of reviews and previous jobs booked.

At first there were 5 gamification 'badges' to be added to the talent profile. This would increase the visual complexity of the talent card (as can be seen in the design explorations below). Luckily the required badges were reduced to two in the end: 'jobs booked count' and 'time to respond'. This was due to technical limitations (concern over the added number of API calls causing slow load times) and lack of data to back up the assumptions related talent behaviour these badges would encourage.

Testing assumptions

It was important to firstly back up our assumptions about what constitutes talent behaviour that moves the needle for the business and improves the client experience. Luckily we had setup tracking (server side and client side) 18 months earlier using a combination of segment, amplitude and google analytics. This allowed us to find common behaviour among the most successful talent and use this as a basis for gamification targets.

I could talk endlessly about the particulars around setting up tracking (especially server side) and mapping user behaviour. So if you're interested to know more details about this particular part of the process and/or if you're a data nerd too, drop me a line. Always happy to talk data and design.

Badge design explore (rough)

Badge placement design explore (rough)

Jobs booked count

A badge system that plays to conventional two sided marketplace dynamics: reward the talent (supply side) for being more active on the platform (booking more jobs) and inform prospective clients of a talents credibility specific to their experience in the marketplace.



A simple colour system was designed to reflect and reinforce the experience level of each talent.

Time to respond

Research into the most successful talent on the platform uncovered (perhaps unsurprisingly) that they took much less time to reply to client messages when compared to the average. Not to mention the fact that a faster response time, for a client, can dramatically improve the quality of their experience.

Similar to the jobs booked count, designing a visual indicator of talent response time was an opportunity to encourage talent to respond quickly to messages and, at the same time, manage the expectations for the client, when they send a message.



Placement on top of the ‘Invite to Job’ button ensured visibility at the key moment when a clients intent to invite the talent is at it’s peak.

SOLUTION Part 2

Reusable components

The talent card was a key piece in establishing a design system of shared components to make the user experience more cohesive, but also to make future product development/design easier.

The talent card, as seen in the clients manage applicant screen (below), uses the same basic visual design with a few contextually relevant features added, like sorting.

SOLUTION Part 3

Changes to layout

Without any dramatic changes to the information included on the profile page, designing a new layout that put the image gallery above the fold was a relatively easy task.

Making room for image gallery

With the key information contained in the card. We’re able to find a place for it outside of the image gallery container. Allowing the portfolio image gallery to move up and take centre stage.

Biography was placed below, and truncated, to contain bio length variables so as to keep the layout integrity. Keeping the bio preview, rich with keywords, on the first screen and not hidden inside tab navigation was also a consideration for SEO.

Redesigning tabs

The original tab design did the job, but some icons were added as visual aids to help clients find what they’re looking for, faster.

The button who cried wolf

The original design had one colour for buttons and therefore didn’t identify any key actions driven by business objectives or the understanding of common user behaviour. As part of site wide UI refresh, primary and secondary button colours were defined.

The result

Qualitative feedback was taken from talent side and client side during prototype phase and when designs were in final stages of polish. Feedback was positive throughout, however this is likely because there were no major functional changes to the profile, but mostly changes to layout and visual design which were welcome from both sides of the marketplace.



Quantitative results were based on one success metric: an increase in enquiries via the ‘Enquire’ button. Enquiries (private bookings) did see a 65% increase and now form on average 40% of all bookings on the platform. However, in reality, the UI design was a small piece in a much larger puzzle. A big sales and marketing push to educate clients about this feature surely had a larger part to play.

View Profile

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

Web development

branding

branding

VIDEO PRODUCTiON

Video Production

AUdio Production

Audio production

Photography

Photography

CRO

CRO

seo

seo

Staff Training

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.

Read More
Red Sky At Night
April 13, 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.

Read More
Where We Start
April 30, 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.

Read More
Faces of Stone
April 6, 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.

Read More
Rattle That Lock
April 2, 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.

Read More
Near The End
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.

Read More

what they say?

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.

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.

Bill  Jobs

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.

steve gates

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.

Mark Page

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.

Larry Musk

clients

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.