CLiKD Dating App | Branding Design
CLiKD are a London based dating app whose USP is helping people make deeper, less superficial connections, using their either/or visual Dealbreaker questions as part of the app’s matching process. Before users can match and chat, they must answer, and pass, each other’s Dealbreakers. Users have the option to use Dealbreakers already on the app or to create their own to personalise their experience further.
My Role:
- Concept
- Prototyping
- Logo Design
- User Experience Design
- Web Design
Problem I Was Solving:
My role was to redesign the website, specifically the homepage and the blog as they’re the parts of the site that see the most traffic. As the CLiKD app itself was going through updates and a rebrand, the website had to be in line with the app’s new look. There were also the issues of improving the website’s overall user experience, especially in terms of clearly delivering essential information about the app’s USP on the homepage.
My Research and Initial Ideas:
My first step was doing market research in terms of other dating apps and how they convey their app’s USP. This included apps such as Hinge, Tinder, Bumble and OKCupid. This, coupled with previous research I had done into CLiKD’s Gen Z audience, gave me a clearer idea of the ways in which they were showcasing their brand identities.
From there, it was a matter of coming up with the best way to break down the essential steps of using the CLiKD app and deciding on the hierarchy of information. The main points that needed to be covered on the website homepage was showcasing the USP and providing evidence that the app is worth trying. It really needed to be about selling the app to new customers, instead of assuming that people coming to the website were already aware of the app. For the blog, I wanted it to be able to stand alone, even though it’s part of the CLiKD brand.
The previous website homepage design was very minimal and made sense for the app at the time. It was more focused on photography (a big part of the app) and evoking emotion, rather than going into more detail about how the app works and its USP. One of the things that I wanted to make clear in the design was how the app worked (because that’s a common query) and that the app is a space that’s open for all. For the blog design, I wanted to find ways to make it more user friendly and to help push traffic.
Design Process and Deliverables:
For the concept of the homepage, I wanted to make sure the sections were clear. First, an introduction into what people could expect to find on the app, then a look into the app and places the app had been featured/mentioned to instil trust into a potential customer. There were a few potential taglines that could’ve been used, but the two frontrunners were ‘Find someone who shares your passions’ or ‘What are your Dealbreakers?’ with the former ultimately winning.
In the first design I did for the homepage, I was prioritising the time users would spend on the page by trying to make the page as short a scroll as possible. That, however, meant that the app’s USP wasn’t being explained enough, so I decided to break it down into three steps with phone visuals. Step one, seeing someone you like on the app. Step two, taking each other’s Dealbreaker tests to see if it’s a match. Step three, matching and chatting. I wanted to highlight the USP section, so I started experimenting with a gradient background for it. I also wanted the three steps to be as visually clear as possible, so I also experimented with having bubbles behind the phones that depicted what was happening in each step. Ultimately, the feedback from focus groups was that the amount of bubbles was distracting, so next I worked on more simplified designs.
I tried a few versions, all of them without the gradient which added more continuity for the homepage. One version was with less bubbles, another version with the white phone and no bubbles, one with the blue phone and no bubbles and then final version (in the above gif). This was a happy medium between having no bubbles at all and giving the phones more character by have the CLiKD blue outline. This design felt the strongest so far as it was simple, it broke down the USP, the colour matches the app more and reinforces the idea of associating a colour with the app. I also did away with the overlapping text over imagery, so that it would be easier to read. It also continued and strengthened the storytelling element I initially started with, but without it being visually overwhelming.
The newest challenge now that the homepage layout had been realised is potentially changing the app name and, subsequently, the logo and tagline. CLiKD have found on many occasions that the brand’s spelling has led to some confusion when users are searching for the app in app stores. Additionally, the past tense nature of the brand name makes it harder to use in a present tense tagline. The original logo was designed around the idea of the app being photo heavy with the Dealbreaker questions and the app has definitely evolved since then. In the images above, I experimented with the brand being called ‘klik’ (based on the CEO’s suggestion of how the brand name could be spelt) and looking at the idea of having a connection or spark, which is how the lightning bolt imagery came into play. It was also beneficial to see how it could work in a tagline.
As mentioned earlier, another central part of the CLiKD website is the blog. We wanted to allow site visitors to be more equipped to find what they were looking for and be easily directed to key information. Adding the Trendingsection, scrolling menu and search bar to the blog main page and category pages has already yielded results. We’ve found through heat mapping that those areas of the site are seeing a lot of action, as well as just looking cleaner. Also, being able to have the newest blog post as its own central section and adding the categories underneath all the other blog posts helps people find a more user-friendly way to see other posts of a similar nature.
For the actual blog posts, I’ve now added the category to the top of the post, cut down the number of gifs in posts, continued with the search bar with scrolling menu and added pull-out quotes instead to break up the text and give it a more professional article feel. At the bottom of each blog, there are now two recommendations of other related posts for users to check out. Through heat maps, we can already see that this addition has been a beneficial one as well.
In terms of the colours and font now used on the site, I went for an off white for the background as pure white felt too stark. The CLiKD blue is a continuous theme throughout and Nunito Sans is the font, also used on the app, due to its readability. All in all, the site has a better feel and is more reflective of the app and the brand.
Client’s Opinions:
CLiKD felt that the final designs were a lot cleaner and user friendly. We also tested the different stages of designs with focus groups and that helped inform the final concept and design too.
Tools/Programmes I Used:
- Adobe Illustrator
- Adobe Photoshop
- Adobe XD
- WordPress