āA Neat & Clean Websiteāš¤
Brekrr is a networking & dating app.
In the upcoming case study, I will explain the process behind the design of its landing page.
The clientās emphasis was on highlighting the networking aspect.
ā”Before we get into the case study, letās do a quick website walkthrough.
āļøGet the Look & Feel. Watch it in HD.
Okies, letās start with the hero section.
As you can see the hero section primarily features text on the left, accompanied by a user review on the right.
Letās start with the left part first:
Basically, Iām letting the user fix his/her username right away even before downloading the app! Yes, you heard that right :)
Hereās the thing Iāve noticed:
More and more people are opting for the same username across all their social platforms. why tho?š¤
- Personal Branding/ šCool Factor: Itās undeniably cool to say, āHey, Iām sanjayreddy571, catch me everywhere!ā
- Easy Spottingš«µ: People can effortlessly find you, and you become the go-to contact, accessible and ready for a chat.
46 people responded to the poll in a Whatsapp community( avg. age of participants is 25Y)
āWould you prefer having the same username across all your social handles?ā
- 38 said Yes
- 2 said No
- 6 said Mostly yes
ā So if you consider this sample, ~96% are willing to use the same username.
š¤Alright, imagine this ā youāre signing up on a new platform. Wouldnāt you want to give your existing Insta username a try first?
So, guess what? Weāre catering to precisely that audience ā making sure your username is your online identity. š
letās say you are not really specific about the user name, even then Iām trying to persuade you by saying āš”a single usernameā¦(see the image)ā
Now youāve entered your username and clicked on āDoneā, thatās it, right? Well, not quite. The moment you click āDoneā, this cardš pops up.
Just when you think youāve got it, Iām asking you to download the app within the next 5 minutes to secure your username. Sneaky, right?
šHereās the thing: Iām betting that a lot of users would take the plunge and download the app, considering:
- theyāre already a step into the process
- & wouldnāt want to miss out on claiming their username.
Letās say someone is still not interested, then the moment they close the alert, a timer pops up, displaying the remaining time of those 5 minutes.
Itās like a nudge to speed up the user. Thereās also a CTA in place.
If the user still doesnāt take any action, after the 5 minutes have elapsed, that username is released and becomes available for everyone.
So that was my process for the text part of the hero section.
Now, on the right, you can see a testimonial(actually a bunch of āem).
Traditionally, people often rely on illustrations to depict the appās features. However, I intentionally avoided that approach for a couple of reasons:
- Itās become overly common and lacks novelty.
- šI wanted to maintain a sense of intrigue by not revealing all the information in the hero section itself.
This choice aligns with the fact that users typically donāt stay on the hero section, as scrolling down comes naturally.
Thus, thereās no need to overwhelm them with all the information right at the outset.
Iāve categorized users into three distinct personas:
- šClients
- š”Founders
- š¤Investors
š¤Imagine youāre a startup founder, and you see an investor reviewing this app, doesnāt that make you more likely to download it?
āļøSince this app is backed by T-Hub, I figured why not give it a shoutout on the website?
Thatās where the top bar comes into play ā it slides down after a few seconds, just to make sure you donāt miss it.
The logo displayed on the website isnāt actually mine, these are a few logos that I designedš
The concept was to feature a contemporary cupid.
A few other logos that I made:
āļøI tried combining a heart and a tie.
Here I tried showing a bulb in the shape of a heart. It ended up looking really weird (-_-)
After consulting with the client, I implemented a few changes, resulting in the final version of the hero sectionš
In the new hero section,
- Download CTAs are now prominently displayed.
- Emphasized the aspect of ānetworkingā while keeping the details under wraps.
- The user reviews have also been rearranged for balance.
āBut I identified a few issues in the current hero section:
- Excessive white space.
- Merely mentioning āNetworkingā felt too abstract.
- While the emojis were cute, they didnāt quite align with the professional website vibe.
šAnd hereās the updated hero section:
šThis design appears more immersive, doesnāt it?
okies, back to the case study. As you scroll down you come across this slide.
- The slides take up the entire screen, adding an immersive touch.
- My aim was to create an authentic product launch experience, which is why Iāve incorporated all these mockups.
- The mockups are strategically positioned around the text, symbolically conveying their meaning.
Scroll a lil more & these 2 amazing cards show up on your screenš
šWhen multiple elements coexist within a single frame, establishing a visual hierarchy becomes crucial to direct the userās focus.
- By positioning one card to the left, itās more likely to catch the userās eye, given our reading pattern from left to right.
- A gradient fill for one card and a plain black and white background for the other, to deliberately create visual contrast.
Indeed, thereās a deliberate pattern at play here.
The card on the left takes the role of explaining an app feature while also working to establish trust with the user.
On the flip side, the card on the right capitalizes on this built trust by presenting a compelling Call to Action (CTA).
The app serves a dual purpose: dating and networking.
One approach is to take a paragraph of text to explain it, but I wanted to convey it visually( since people on the internet donāt read lengthy texts) and so a slide.
For dating the primary color is šblue, for networking primary color is šorange.
āļøThis theme is consistent throughout:
āØwith gradients, high-resolution mockups, and glass morphism on one side. ā”against contemporary collage-style art on the other.
This blend is tailored to resonate with our target audience, those aged between 16 and 26.
Here Iām explaining another feature āChatā and on the right, itās just another abstract hook.
š«§A lil more scroll, and voila! Youāre greeted with this playful slide.
Most dating apps in the market have a traditional UI with profiles displayed in rectangular boxes and one needs to swipe thru āem.
But we wanted to stand out with a new interface.
šš«§profiles are presented as smol smol adorable bubbles.
Yet, recognizing the familiarity of the boxy UI, we havenāt done away with it entirely.
Thatās why weāve given you the freedom to toggle between these two UI modes.
āļøIn this slide, Iāve opted for a single mockup to ensure a focused and undistracted visual experience.
Once again, the cards come into play.
As you may notice, I intentionally disrupt the visual pattern periodically, encouraging continuous scrolling.
Following every pair of cards, there comes a big-ass āI take over the entire screenā kinda slide.
Imagine: if I just stacked up all those cards, it would undoubtedly feel monotonous. So, Iām throwing in these screen-dominating slides to keep things sizzlingš„
All the groundwork weāve covered so far is all about building trust. Simple.
But letās say youāre still scrolling aimlessly without hitting that download button, itās time to get into the real stuff i.e. benefits.
Letās see āem nowš
First, I tried showing three reasons why you must use Brekrr. But I didnāt really like the way it looked. So I tried a few other orientationsš
āļøI was just having some fun experimenting with this bento UI trend.
Now Iām assuming that you clearly know what the app has to offer you and you want to give it a try, so Iām presenting you with CTAs
Breaking down the entire process into 3 simple steps not only simplifies the process but also pumps up the onboarding rate.
As you continue scrolling down, youāll find yourself at the bottom of the website.
I made a few standees for marketing. These will be placed on college campuses and canteensš
š¤The initial interaction between the user and the app takes place on the Play Store or App Store itself.
This moment is an experience in itself, and we need to ensure it feels fantastic.
šThatās why I opted for simple yet attractive app store assets.
I tried a different visual theme by mixing sleek gradients with collage art. It ended up looking good, I feel. What do yš«µu think?
A few of my articles: