How we redesigned a dating app for the African market: our design stayed in Figma, but we learned valuable lessons. The Trueflutter case

11

We usually create UI/UX design from scratch, but occasionally we’re asked to redesign existing products. That was the case with Trueflutter, a dating app for the Nigerian market. The founders wanted to enhance the UX on specific screens and refresh the interface.

We agreed and started working, aiming to finish in a month. However, the project took longer than expected, and our updated design… stayed as mockups in Figma. Here’s how that happened and why it’s crucial to clarify upfront whether a client sees you as the “hands” or the “brain” of the operation.

A Nigerian dating app with 100K active users

In the summer of 2022, the founders of Trueflutter — a dating app aimed at the Nigerian market — approached us. The app was built with local cultural nuances in mind. For instance, Nigerians tend to seek partners with the same religious beliefs and pay close attention to the social background of potential matches, such as education and workplace. By the time the clients reached out to us, the app had 100,000 active users.’

Trueflutter’s killer feature was the voice message function that allowed users to attach a voice clip to their profile.

The clients were fond of the existing app design but wanted to refine the homepage to highlight the killer feature and improve the UX during the onboarding process.

They also wanted to refresh the app’s interface — make it more visually appealing and modern. However, they didn’t have any specific requests, except for one: it had to look “like a million dollars.” 🙂

We missed two important things from the start: underestimating how much the clients loved the old design and not thoroughly discussing their real readiness for change.

A redesign isn’t just about changing a few elements on the homepage or recoloring buttons — it involves rethinking the product as a whole.

This would come back to bite us later, but more on that in a moment.

One of the problems: low user engagement due to long onboarding

In many cases, onboarding is optional — if we hold up the user during the introduction and don’t allow them to quickly jump into the core flow, we risk losing them. They might not have the patience to skip screens and can simply close the app.

Onboarding becomes essential when an app has unique features or requires the user to fill out some personal information in order to continue using it.

Properly structured onboarding boosts conversion rates. Long and tedious onboarding hurts them. If a user has to swipe through more than six screens, the onboarding is considered long.

What was Trueflutter’s process like? The flow was as follows: the user registers and provides their phone number and country. They receive a verification code, enter it, and then provide an email, name, and date of birth. Ready to start finding love? 💕

Not quite. The user still had to select their gender, interests, and religion, allow geolocation access, and upload a photo.

Finally done? Not yet. The next screen reads:

The user has successfully completed the first of three stages of onboarding. Next comes more profile questions: height, job, education, school, hobbies, etc.

The clients mentioned that Trueflutter had low user engagement, likely due to the exhausting onboarding process.

Yet, the clients weren’t planning to scrap the questionnaire altogether. Yes, users don’t want to spend time on it, but they still want to read detailed profiles of others. One of our tasks was to make the onboarding process more engaging and reduce the steps by eliminating some questions.

Now, we just had to figure out which questions could be shortened. How? By conducting research to find out which profile information is most important to other users when deciding whether to message someone.

What we had to do

Our tasks for the project were:

Before working with us, the clients had been collaborating with a freelance designer. But when it came to a redesign, they realized they needed the expertise of a full team to brainstorm and create something great.

In our experience, clients often bring in external teams for redesigns, even if they already have a regular freelancer or in-house designer. For instance, we once worked on a project where the client wanted an external team to bring fresh perspectives and new ideas.

Research phase

Our research for Trueflutter was conducted in two stages. First, we analyzed the competitors, focusing on best practices and pitfalls. Then, we ran usability tests with real users. Let’s dive deeper into each stage.

Stage 1: competitor analysis

Whether designing a new product or redesigning an existing one, we always start by analyzing competitors.

This helps us understand how users interact with similar products. We put ourselves in the user’s shoes but maintain a professional perspective: walking through the user flow, noting pros and cons, and identifying what we can incorporate into our own design.

In this project, we paid special attention to the main page and onboarding process, as these could offer insights on how to adapt competitors’ solutions for Trueflutter.

After our analysis, we suggested several improvements: adding step progress notifications during onboarding, enhancing interface highlights with associations, increasing button size, and reducing open-ended questions in favor of multiple-choice options.

Fun fact: In one redesign project, we didn’t just study competitors’ apps — we had demo calls with them. This gave us valuable market insights for our client.

Redesign for Russia’s largest electric transport software developer: how we did it and gained market insights. ThunderSoft case

Stage 2: getting users to find a match

Strictly for research purposes. 🙂 For the usability test, we selected people with varying levels of experience in online dating — from complete beginners to “pros.” They were all given the same task: find a partner on Trueflutter.

☝️ Important note: we specifically selected participants without UI/UX design expertise to avoid skewing the results.

Testing revealed several issues: outdated design, confusing navigation, and a cluttered interface.

Users pointed out the lack of navigational cues, non-functional interface elements, and distractions that made the content hard to read.

Key insight: the first thing users notice is the profile picture — bio information takes a back seat.

We discussed the results with the client and brainstormed ways to improve.

At this point, we felt completely aligned with the client in terms of problems, solutions, and next steps.

Missed the mark with the design concept

Our next step was to create a design concept. We decided not to overhaul everything but to focus on incremental improvements — updating the color palette, improving the UX, and making the design cleaner and more minimalist.

Here’s how it started:

…And here’s the result. We kept the app’s core colors but removed gradients, freshened up the design with more modern fonts, shapes, and emojis. 👉

While the clients liked our changes to the homepage layout and appreciated the clean, light design, the overall concept didn’t fully meet their expectations.

And that’s okay! 🙂 This phase is meant to align the vision before diving into full-scale work.

We gathered feedback, discussed their doubts, and refined the concept.

In the end, we worked on the concept for two weeks, though we typically finish in one. We explored several options: tested different colors, changed the appearance of elements, and discussed the UX logic with the client.

With the concept aligned and a clear understanding of the client’s business objectives and end goal, we moved on to a complete UI/UX redesign of the app. What could possibly go wrong? It turned out, we didn’t account for the emotional factor.

When clients want a redesign but don’t actually want it

As we moved forward, we encountered an unexpected twist: the clients admitted they were emotionally attached to the old design and didn’t want to let it go. 🙃

Of course, we are always ready for any surprises — IT projects are full of them and we try to stay flexible. But this really caught us off guard as it seemed like the clients had consciously agreed to the changes and understood why they needed them.

The clients’ mindset impacted our work: often, after several iterations of changes, we would find ourselves reverting to the original solutions — they literally asked us to “return to how it was,” and barely considered our reasoning.

We discussed the situation with the clients and searched for a suitable solution. The project turned into a quest to find a middle ground: the redesign couldn’t be too radical, but at the same time, we didn’t want to revert to what the clients originally had. This process took a lot of time, which is why we delivered the final design much later than initially planned.

Updated design for Trueflutter

Here’s what we ultimately delivered.

Homepage

It took multiple rounds of client feedback to get the homepage just right. 🙂 For example, we modified the audio button several times — first, the client wanted it to be prominent, but later they requested we hide it to avoid distraction.

Onboarding

We improved individual elements and made the questionnaire easier for users to complete. We focused on the details: for example, the design wasn’t consistent everywhere. We reduced the number of steps by grouping some questions together. However, we didn’t drastically shorten the questionnaire: it ended up with two stages instead of three and 30 screens instead of 50. Although research indicated that the onboarding could be shortened, the clients ultimately decided not to change it.

Why? It’s hard for us to pinpoint the exact reason. But we do know the clients were inspired by the dating app Bumble and at some point started borrowing ideas from there that they asked us to implement in the design of Trueflutter. Bumble has a long questionnaire during the onboarding process, so perhaps that’s why the clients didn’t want to remove it from their app. No matter how much we tried to convince them with our research. 🙂

Sometimes, we wonder — what if the clients wanted to borrow ideas from competitor apps all along but didn’t want to say it directly? And their argument about emotional attachment was just an excuse? 🤔

Final outcome: the clients reverted to the old design but used parts of our work

The Trueflutter app was released, but not with our design — our mockups remain in Figma. However, the clients did use some of our ideas. For example, the structure of the homepage came from our work, though it had a different color palette, slightly altered layout, and appearance of elements.

We accomplished the task and helped the client define a new vision for the product. However, we must admit, we were quite surprised by how drastically the client changed direction. 🙂 But these things happen — we consider it a valuable experience.

Additionally, this project made us rethink some of our processes. Here are the three main lessons we’ve learned:

1️⃣ Discuss the client’s readiness for changes and redesign from the outset. From the start, we underestimated how attached the clients were to the design of their product and how much they loved it. Although they understood the need for changes, this emotional attachment outweighed everything else, resulting in decisions being made despite the research. That’s why it’s crucial to make sure at the very beginning that the client understands the scale of upcoming changes and is prepared for them.

2️⃣ Take a break when there’s an overwhelming amount of feedback. When you receive too much feedback from the client, it’s important to take a step back and discuss their expectations. For example, on this project, we got a lot of feedback and realized we had reached an impasse. We talked to the clients and asked what they expected — did they want us to suggest solutions based on our expertise, or just implement their changes? In the end, we agreed that the clients would share ideas based on their understanding of the market, while we would adapt them using our UI/UX design expertise.

3️⃣ Consider cultural nuances. Don’t hesitate to ask the client why they insist on a particular decision — it could be tied to the cultural or social context of the target market and the audience’s preferences. For example, the clients insisted on keeping the existing color palette, and it soon became clear why: green is used on the Nigerian flag and is considered the national color. The client wanted to make this reference to their home country.

➡️ Looking for a UI/UX team that doesn’t just make tweaks but offers solutions based on market analysis and research? We’re ready to help. Let’s talk about your project and create a roadmap together. Contact us today.

[wpim]