Pep me up
A brief story of a my role as a UX/UI intern in an App-publishing startup, where I collaborated to design a better user experience for a mobile motivational companion.
Some context
The year: 2022
The startup: Kovalee is a an App publisher with a diverse portfolio, striving to empower non-gaming app creators. It does so by partnering with them and bringing them data-driven product changes to help their apps reach the top charts and maximise their ROI.
The product: PepTalk positions itself as a motivational companion aiming to help its users develop better mental habits, whether to overcome their hardships, pursue their dreams or accomplish their goals.
During my time there, we had 3 missions to get Peptalk to the top charts:
1. The Onboarding
Designing an onboarding flow for a more successful adoption
The problem
Before our collaboration with PepTalk, a user who downloaded the App was immediately presented with a Sign in/ Sign up screen.
Once logged in or signed up, a user lands on the Homepage. They’re left to their own devices to explore the App, its features and content. No welcome, no context, no unique selling propositions, no nothing. Now that’s not very welcoming and certainly not very worthy of a companion, is it?
A companion is by definition a person with whom one spends a lot of time.
If we’re gonna be spending a lot of time together, how about we get to know each other better?
The solution
Good user experience is the backbone of any product’s success. Generally speaking, onboarding a user helps give them a sense of what they’ll need to do or what they can do with an App or product. It’s a way of building confidence and trust which not only benefits them, but which is key to better conversion.
That being said, and in order to provide a more positive experience, which will then naturally lead to a higher user acquisition and an increased retention, designing an onboarding flow seemed to be an important step.
Who are our users? What motivates them? How would we accompany them?
For that, and based on the App’s features and content on one end, and on benchmarks and research on another, I came up with a (short) series of questions with the aim to gather relevant information from users. In turn, this would ensure an optimised and more personalised experience once the user is signed up. I then redesigned the Welcome screens implementing a new onboarding flow that would then be tested.
The aim of this flow was to offer a more personalised user experience by getting to know their core areas of need, media preferences, motivational preferences and daily habits. The gathered information would then allow for a customised Homepage and flow, all the while showcasing the App’s diversified content, both in form and substance, and giving them a hint of the App’s main features.
The outcome
After implementing this solution (Build 19.0 below), and after only 30 days, data had shown an increase of almost 3 times in conversion values from App install to Subscription & Payment. And just like that, with the simple addition of an onboarding flow, we were already ahead on our way to fulfill PepTalk’s goals.
2. The Library
Designing a library feature for a more accessible experience
The problem
Before the implementation of this feature, the screen below shows how users could access their content. It’s from their Profile tab in the bottom bar that users had access to their Likes, Playlists, Downloads and Recently played, along with other (more technical) functionalities.
This approach seemed to be a little restrictive and confusing in regards to information architecture and to the flow of the whole experience. Data came to back this up by showing unsatisfying traffic and engagement.
We then asked ourselves:
How might we helps our users navigate more easily through their content, and allow them to freely browse and listen to their curated saved content?
The solution
Just like Spotify is about music and podcasts, PepTalk is about motivation and mental habits. And just like Spotify allows for users to browse, like, save & download content, so does PepTalk — I’d like to think that PepTalk is the Spotify of motivation.
Why not get inspired by the top Music App gathering more than 500 million active users worldwide?
In the F.O.C.U.S.E.D product discovery framework, Step #5 (S) is about Stealing, more specifically stealing pieces of solutions already invented and that can be reused. Reusing existing user-habit-rooted principles has a super advantage of being based on acquired behavioural patterns, and by preserving users’ mental energy, we provide them with a clear, intuitive and easy-to-use solution.
That being said, what better way to highlight this diverse content than to gather it all under one big motivational library in which users could browse, save, create, download and most importantly, easily come back to? That sounded like a direct answer to fulfil Mission #2 (and indirectly Mission #1 and #3).
Improving the App’s usability would naturally improve conversion and scale user acquisition.
That being said, and in order to bring this Library to life, I started by setting out the different content categories and exploring practicality and usability in order to design and implement a first version and send it out for testing.
As shown on the map, the content of the App is divided into 3 main section: Playlists, Audios & Quotes (Videos only available for Premium users and can only be watched but not downloaded).
A new division by nature of the content (Playlists, Audios & Quotes) seemed more logical to me than the previous one mentioned in the problem statement above. This, accompanied with a logic of tags through which users could easily browse and situate themselves.
I then proceeded with Wireframes before finalising the designs and implementing the UI in alignment with the brand’s design system.
Implementing the Library feature also implied changing to the lower tab bar. The Library now being a main actor, has a spot of its own on there. As for the Profile tab, we opted for its migration to the upper right corner of the screen and reduced its content to necessary settings-like functionalities.
The outcome
My internship at Kovalee had come to an end before I could witness the outcome of the tests for this V.1 of the brand new Peptalk Library!
3. The Paywall
AB testing subscription screen designs for an improved conversion
Before
As per the data, the subscription screen was not performing as well as it should have been. Below is what it looked like before the redesign.
For this section of the App, we wanted to extend the content personalisation and somehow engage in a conversation with the users by adapting the visual design to their interests. By doing so, we were aiming to highlight the personalised experience that they would be subscribing to.
Based on the different categories and themes offered by PepTalk, I have readapted the screen designs and rethought their layouts. The aim was to AB test 2 versions of this screen in terms of information architecture, UX writing & copy and navigation.
After
The outcome
After running the tests, it seemed that users were more at ease with the second version, where the price breakdown is stated in a clearer way and is more upfront. This allowed them to visually compare different subscriptions simultaneously, and helped boost the conversion rates.
