Let's build something legendary together
Bumble
Improving mobile conversion through visual design
Overview
Bumble is an online dating application. Profiles of potential matches are displayed to the users, who can "swipe left" to reject a candidate, or "swipe right" to indicate interest.
In heterosexual matches, only female users can make the first contact with matched male users, while in same-sex matches, either person can send a message first. The app is a product of Bumble Inc. Bumble is the second-most popular dating app in the U.S. after Tinder.
Role
Design Lead
Duration
4 weeks
Industry
Social
Tools
Figma, Lyssna (formerly UsabilityHub)
Problem Discovery
Coming fresh out of a pandemic, we are all looking to reconnect in several ways. Via word of mouth, I hear that Bumble is an online dating app that offers so much more than love interests. So I thought to check it out. I head to its official website to get more information and asides from the non-exciting and outdated interface, I couldn't help but feel undersold by the content. I immediately second-guessed downloading the mobile app. I also wondered how many more people might have landed here and felt as discouraged as I did.
Objectives
How you engage with first-time visitors on your site could either start a successful customer journey or turn away a possible sale. In today's time economy, you have 10 seconds to tell a user who you are, why they should care, and what they should do next.
With this in mind, I decided on a landing page redesign that
- Promotes the mobile app
- Looks exciting and convincing
- Provides rich concise content
Disclaimer: I am not affiliated with Bumble in any capacity
Bumble's website (at time of study)
Redesign Validation (Research)
I began my study with a brand analysis of Bumble, learning about its competitors and customer reviews.
Key Takeaways
- People prefer bumble to tinder. So why isn't bumble evangelized enough?
- Bumble is better than tinder for dating and making serious connections.
- People use bumble majorly for dating than finding platonic or professional connections
Screenshots from research
Ideation
To kick me off with how I might redesign the landing page, I made a list of bumble's key features and selling points. These would facilitate the information architecture.
Bumble's main features
- Meet new people and find the right matches
- Video calls
- Women make the first move
- Create a professional network
- Find friends
It would take a lot of artboard real estate to promote these features individually, so I decided to pair them into 3 main features, just like in the old site. Bumble date, Bumble BFF, and Bumble bizz.
New information architecture
Design Approach
I decided to design the landing page progressively. I split the old site into sections, carried out heuristic evaluation and made observations, then redesigned based on findings.
Heuristic Evaluation
Hero Section
Heuristics
- Call to action isn't encouraging mobile app downloads
- UI could be better (background images aren't as trendy anymore)
- Header text seems to centre on one of the 4 - 5 features
Features
I should say that this was the hardest section to pick apart. Bumble totally nailed it at the time of creation
Heuristics
- Not accommodating all the features Bumble have to offer
- Content: Too much machine language? How about a concise yet engaging explanation of the features?
- UI: Gradients and buttons with sharp edges might not be best suited for a dating site, in my opinion.
The Why
Heuristics
- UI: The whitespace could be put to better use?
- Content: Too many contents competing for attention, when 'the why', should be front and centre in this section.
Blog
Heuristics
- UI: Noisy interface area? It isn't very clear how to navigate the section
- Content: this layout though fun, doesn't present enough blog content for users to scan through
Footer
Heuristics
- Content: Due to the issues with dating apps and privacy, the footer content should contain extra information that users might possibly be interested in, not just social media handles.
Solutioning
Now that I have the heuristics for each section, I started sketching what the layout and design would look like.
High Fidelity Designs
Usability Testing
One of the quickest ways to remotely test and validate a landing page design is the 5-seconds test method. I also chose this method because I redesigned it with a focus on visuals and content. Using an online platform, I uploaded the design and set questions that'll help with validation.
The questions I asked:
- What is this website for?
- What words, sentences or elements do you recall?
- Did the design/brand appear trustworthy?
- What was your impression of the design?
- Are you encouraged to download the mobile app of this site?
Given these numbers, and even though it's a small sample size, it does appear to me that my goal with this redesign was met.
If this site was live though, I'll have loved to measure the number of page views, the session durations and the click rates on the CTA buttons.
Project Reflection
I found the secondary research a bit challenging because I had to source for already present information on the internet and that involved me filtering through lots of data and material. In the course of solving this problem, I learned to apply certain ux laws to visual design. As simple as a landing page could be, decisions are to be made based on data and design principles. If I had more time, I would carry try other variations and run an A/B test to see how they perform.
Bumble, in my opinion, has put a lot of work into securing and reinventing the dynamics of social networking and online dating. My redesign was in no way meant to discredit the work done by the organization or design team.
But just like other things in design, there's always room for iterations and opportunities for improvement. Through user research and usability testing, I was able to validate my desire to redesign Bumble and the outcome proved that users could benefit from this gesture.
Interested in working together?
Why work with me?
I prioritize user needs and experiences, ensuring the product is user-centred
I use research and analytics to inform my design decisions
I focus on delivering measurable impact with every design initiative
© 2024 All Rights Reserved, Dera Okemeziem
