Kudos Fit
Referral UI/UX Design, ~Dec 2018
The CEO wanted to launch a formal referral campaign along with a New Year's marketing push (including the Product Hunt launch). I got to work designing and building referral screens and had it out within the week.
Summary
Before -> After
The "Completed Workout" screen was of particular interest to spice up. We already had the client's attention here, and they just finished their Workout, so they have a bit of time to be on their phone and share their progress!
Details
This went through a few iterations before ending up with the final result. The initial screen lacked impact and didn't have a congratulatory feel to it with plain text. Adding an emoji was a very simple way to add some impact and consistent with the brand, as clients largely interact with the app by messaging their coach.
The congratulatory message, such as "Nice work!", "Great job!", etc, was actually randomized between several different variations for some variety. The sample text for sharing also had some randomization, to give different prompts to clients at different times. Some of the copy on this screen was A/B tested, while others remained randomized throughout.
The congratulatory message, such as "Nice work!", "Great job!", etc, was actually randomized between several different variations for some variety. The sample text for sharing also had some randomization, to give different prompts to clients at different times. Some of the copy on this screen was A/B tested, while others remained randomized throughout.
The buttons, in particular, went through some A/B testing against different user demographics. Per my previous redesign of the Train UI/UX, older clients and younger clients in particular had different preferences.
The first iteration used a consistent color for all buttons and used icons with text. It was a relatively quick-and-dirty MVP.
The first iteration used a consistent color for all buttons and used icons with text. It was a relatively quick-and-dirty MVP.
Completed Workout - Referral v1 - Top
Completed Workout - Referral v1 - Bottom
The second iteration used icons with the standard colors of the respective social media platform. This is more aligned with the brand guidelines of these platforms and was more recognizable. Clients also tended to share on social media vs. more traditional Email or SMS, so those buttons were moved to the top.
The lack of text, however, made it more confusing to older clients. That being said, the most likely demographic to share tended to be younger, so the design focused more on younger clients.
The lack of text, however, made it more confusing to older clients. That being said, the most likely demographic to share tended to be younger, so the design focused more on younger clients.
Completed Workout - Referral v2
The second iteration had better results in A/B testing, so these buttons were kept.
In the third iteration, they were made larger to avoid misclicks.
This meant that the sample text did not appear on smaller phone screens without scrolling, but this effect was mitigated in two main ways. Primarily, the sample text was embedded into the share buttons as the default message, so it wouldn't have to be manually copy + pasted (though this method was not always compatible with older phones / OSes, but the younger demographic typically had compatibility). The second mitigation was to adjust the spacing via CSS media queries for different heights, ensuring that at least some text appeared at the bottom on all screen sizes. If there were some text, even if cut off, it created a visual cue for clients to scroll down.
In the third iteration, they were made larger to avoid misclicks.
This meant that the sample text did not appear on smaller phone screens without scrolling, but this effect was mitigated in two main ways. Primarily, the sample text was embedded into the share buttons as the default message, so it wouldn't have to be manually copy + pasted (though this method was not always compatible with older phones / OSes, but the younger demographic typically had compatibility). The second mitigation was to adjust the spacing via CSS media queries for different heights, ensuring that at least some text appeared at the bottom on all screen sizes. If there were some text, even if cut off, it created a visual cue for clients to scroll down.
Completed Workout - Referral v3
The end result got great reviews, with even investors being surprised at the quality of the referral page compared to off-the-shelf tools!
Below is a portion of the Product Hunt Demo Video (also created by me) that shows the referral page in action:
Below is a portion of the Product Hunt Demo Video (also created by me) that shows the referral page in action:
Blooper
A bit of fun I had while writing the code for this 😜
Completed Workout - Blooper
