ā€œA Neat & Clean Websiteā€šŸ¤Œ

Sanjay Reddy
9 min readSep 16, 2023

--

Thumbnail
Thumbnail

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.

šŸ‘€Watch it in HD

ā˜ļøGet the Look & Feel. Watch it in HD.

Okies, letā€™s start with the hero section.

Hero
Hero

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:

Left
Left

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.
Poll
Poll

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.

Alert
Alert

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.

Timer
Timer

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.

User reviews

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?

T-Hub slider
T-Hub slider

ā˜ļø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šŸ‘‡

My logo
My logo

The concept was to feature a contemporary cupid.

A few variations
Mockup

A few other logos that I made:

My logo
My logo

ā˜ļøI tried combining a heart and a tie.

My logo
My logo

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šŸ‘‡

Hero

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:

Hero
Hero

šŸ‘†This design appears more immersive, doesnā€™t it?

okies, back to the case study. As you scroll down you come across this slide.

Slide1
  • 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šŸ‘‡

Cards
Cards

šŸ‘€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).

Slide2
Slide2

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.

Cards
Cards

ā˜ļø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.

Slide3
Slide3

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.

Cards
Cards

Once again, the cards come into play.

As you may notice, I intentionally disrupt the visual pattern periodically, encouraging continuous scrolling.

Pattern breaks
Pattern breaks

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.

Benefits
Benefits

Letā€™s see ā€™em nowšŸ‘‡

Slide4
Slide4

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

CTAs
CTAs

Breaking down the entire process into 3 simple steps not only simplifies the process but also pumps up the onboarding rate.

3 steps

As you continue scrolling down, youā€™ll find yourself at the bottom of the website.

Banner
Banner

I made a few standees for marketing. These will be placed on college campuses and canteensšŸ‘‡

Standees
Standees

šŸ¤”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.

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?

--

--