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/UX 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
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.
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ā.
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.
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
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.
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.
Testing assumptions
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.
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.
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.
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.
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.
Let's chat
No matter how big or small the project, it starts with a conversation.
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.
.png){kind=small}
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
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
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
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
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
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 Morewhat 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.
watch the tv commercial
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.
