Reducing Bounce Rate By Designing a Mobile-Friendly
Media Experience
Tawkify aims to match eligible singles looking for a genuine connection through different matchmaking models. However, the website was experiencing high bounce rates and was causing users to email customer service for more information.
Role
Website Designer
Timeline
January 2023 → March 2023
Team
Adam Cohen Aslatei (Managing Director)
Lilia Havinson (Software QA Engineer)
Stack
Figma
Webflow
Jira
Javascript
Click to jump to the corresponding section:
Impact Stats
↓18.9% Bounce Rate
↑21K+ Conversions
↑2:02 Avg Visit Duration
About Tawkify
Tawkify is a North American matchmaking service provider for 1M+ singles who don’t want to use dating apps.
With over 1M+ singles already in its database, the company was distraught with high bounce rates on its homepage. Not everyone in the pool has access to its service, those who ‘convert’ from a user to a ‘client’ are moved to an active list of candidates who are vetted for a true-blue Tawkify matchmaking experience, starting from a quick chat to create their profile/interest chart to sending them on a date. It’s an extensive process, which is why having patience is critical— not for me as a designer, but as a user who lands on our homepage. But also me, I will not deny.
Tawkify acquired S’More Date (short for Something More), the dating app company where I previously worked. The idea behind S’More Date was quite similar to the Netflix show, ‘Love is Blind’ in which a person cannot see the one they’re chatting with until a conversation has occurred. Although the user database migration did not take place, our design system got integrated in ways I cannot describe because of the NDA.
When we started working with the larger team in 2023, Tawkify was getting a rebrand and so were all its marketing channels. Our previously deployed user engagement and retention model worked in three distinct ways:
Content-Driven Engagement: By using videos and celebrity interviews, the app aimed to increase the amount of time users spend on the platform. High-quality and engaging content is the key driver here.
User Engagement Metrics: The increased time users spend on the platform is tracked and reported as a key performance indicator (KPI). Metrics like average session duration, daily active users (DAU), and monthly active users (MAU) become critical.
Attracting Investors: With strong user engagement metrics, the app becomes more attractive to investors. Investors see high engagement as a sign of a valuable and potentially profitable app, which can lead to more investment funding.
So how can Tawkify’s rebranded website play a strategic role in convincing potential clients to take action?
Through a content analysis of the current website (not yet rebranded), we created a mind map to visualize the best ways to implement the model on the website and agreed on a singular result: an all-in-one content hub that will host not only the existing blog and success stories but also a new section of videos. According to a survey, consumers stay 2 minutes longer on a site that has videos. Moreover, video search results have a 41% higher click-through than plain text results so naturally, we were helping our marketing team make our website SEO-friendly. Win-win.
A mind map of our brainstorming session for the website rebrand
Website Audit
What drives retention and user engagement?
With our preliminary research concluded, I was ready to embark on my biggest project for Tawkify: designing and building a website page that would serve as a content hub for people seeking information about the brand and more. Before starting the ideation process, I thoroughly analyzed the existing website to gain a deeper understanding of our customers.
At first glance, I identified several factors that deter customer conversion; however, this website audit revealed much more upon closer examination. By tracking all the URLs in a spreadsheet, I was able to understand each page's role in the website’s information architecture. This was a long and tedious task, especially since the website is built on Webflow with multiple integrations for the sales and marketing teams, and no one was tracking live changes in real-time. With the ongoing rebranding, consolidating all URLs in the IA spreadsheet became my top priority. Engineering, sales, and marketing teams all used this sheet to tag the pages that mattered most to them. For example, the sales team tagged a third-party lead generation page connected to the CTA on our landing page.
Collaborating with marketing and engineering gave me a lot of numeric insights
I needed KPIs to prove the impact of a website rebrand, and Google Sheets became my best friend to track everything, while also allowing teammates to comment and help with.
At this point, I initiated a usability and CRO (Conversion Rate Optimization) audit to identify factors that can help us reduce the bounce rate. The intersectionality between these two and the site’s IA made me wonder whether or not I was heading in the right direction. These two books: Don’t Make Me Think by Steve Krug and Lean Analytics by Alistair Croll and Benjamin Yoskovitz helped me establish the fact that a site’s functionality is not a standalone UX/UI problem, rather it is of a business nature that will inadvertently affect the brand’s revenue. Continuous data-driven improvements and a clear understanding of user behaviour are key to achieving this synergy.
TL;DR
→ A good information architecture reflects how much the company values its customers.
→ By understanding how users navigate the site, you can optimize paths to keep them engaged longer. Effective information architecture helps map out these paths clearly.
→ A well-structured website guides users through a logical flow, improving their experience and increasing the likelihood of conversion.
Both books shared a key insight: an intuitive IA hinges on user-centered design. This required a deep understanding of the target users' needs, behaviours, and mental models through research and usability testing. To achieve this, I needed to create detailed user personas and scenarios to guide the IA design. By studying the customer database, I developed a user persona to reference while designing the content hub.
Tawkify’s user persona
While creating user personas, I identified three major user archetypes: new users, returning users who have not yet converted, and clients who pay for Tawkify services. My focus is on the new user, exemplified by Sarah, who has just discovered Tawkify through a Google search or an ad. I drafted this user persona tailored to match Tawkify’s characteristics and needs, based on insights gathered from our target audience and industry trends. Sarah, for instance, clearly conveys her disappointment with one-dimensional dating and relationship websites. She wants a user-friendly “community” that offers something more than just profiles to look at, with engaging visuals and interactivity.
Building this user persona helped me narrow down the nature of content to host on the hub:
Engagement-driven design: Users can browse through a blend of media formats to find relevant content.
Journey-continuity with more CTAs: Utilize "view more" buttons to optimize the user journey, guiding users to explore more content seamlessly, and boosting engagement and satisfaction.
Curated content selection: Carefully select content, featuring interviews with matchmakers and celebrities, to boost credibility and engage the audience consistently.
Introducing this content hub meant involving the engineering team, to ensure the site load speed would not be hindered due to hosting heavy media on the content management system (CMS). For currently hosted videos and articles, Tawkify was using Vimeo and WordPress respectively. Although this was relatively not slowing down the site speed, Webflow has an in-built CMS that works much faster than these counterparts. We worked together to migrate most of the content to Webflow itself but the Blog page (built on WordPress) was pushed to a lower priority as of now. But, soon we ran into another issue that required our immediate attention (an existing problem that we oversaw while rebranding the website): the number of CTAs on the homepage was too much for the users, especially new users. It was hard to tell whether these users were new or returning so I organized a small focus group consisting of singles aged between 25-32 years old and asked them to speak out loud while browsing through the old website.
This study not only helped me create user flows for new customers but also helped the rebranding team eliminate the ‘Free Screening’ CTA meant to generate leads for the sales team. While I was not directly working on the rebranding project, the responsible team and I met weekly to brainstorm ideas and integration plans for third-party platforms (lead generation and CMS). Our combined efforts streamlined user journeys that we assumed to be true, now based on factual results.
Applied Research
How we improved the information architecture
I chose both agile and customer-journey mapping frameworks to aid the development of Tawkify’s new IA. Again, I was not redesigning the entire website, only the content hub and a couple of tertiary pages like Careers and Press pages (much later in the pipeline) so I had to ensure these transformed the user experience on a holistic level. I sketched out a basic journey map for the rest of the team to follow, which listed all the essential linkages to support our CRO goal.
I made this information architecture on Miro for the whole team to refer to while we independently worked on our projects
Top Navigation Bar
Logo: Redirects to the homepage.
How It Works: Explains the matchmaking process.
FAQ: Provides answers to frequently asked questions.
Stories: Showcases success stories from Tawkify clients.
Blog: Links to Tawkify's WordPress blog.
Discover:
Splash Video: Weekly featured video.
Trending Videos: Most-watched videos curated weekly by Tawkify.
Articles: Redirects to the WordPress blog.
Success Stories: Redirects to the stories page on the website.
Login: Directs users to their dashboard.
Signup: Initiates the setup flow with a quiz (name, age, gender, etc.).
Discover Section (Detailed Breakdown) ← What I worked on
Splash Video: Weekly featured video.
Trending Videos: List of the most-watched videos curated by Tawkify.
Articles: Recent blog articles with links to the WordPress blog.
Success Stories: Highlights success stories with links to the stories page.
Footer Section
Quick Links:
How It Works
FAQ
Stories
Blog
Discover
Social Media Icons: Links to Tawkify's social media pages (Facebook, Twitter, Instagram, LinkedIn).
Additional Links:
Terms of Service
Privacy Policy
Careers
About Us
Contact Us
Affiliates
Operating Cities:
Los Angeles (LA)
New York City (NYC)
Boston
Atlanta
Dallas
Washington
This is the first version of the content hub ‘Discover’ with 4 distinct sections that cater to new users’ content needs but it doesn’t follow the IA I charted out
⚠️ Usability Restraint
Ideally, the navigation bar should only have one ‘content’ hyperlink that directs users to a universal content page that includes every piece of content that a user might be searching for. However, after conducting usability tests, we found that many customers were getting confused with just ‘Discover’ in the navbar. Heatmap recordings suggested users were keen on learning about how the whole matchmaking process works and more often than not, the FAQ section was getting more hits because nobody knew what Tawkify was. That makes sense since my project targets new users. The findings from the usability tests indicate that users need clearer navigation options to understand the site's purpose and functionality better. More on this iteration later below.
Wireframing and Prototyping
How re-introducing Blog/Stories solved the issue
The customer-journey mapping framework shines here, yet again. When I watched the heatmap recordings of this newly built prototype (testing version), I noticed key touchpoints where users interacted with the website. By visualizing the user journey, I could pinpoint where users are most likely to drop off and why, which were mostly because of two reasons:
Difference between what the user says they are looking for and what they look for (behavioural vs. attitudinal): New users are primarily seeking information about how the matchmaking process works and frequently asked questions about the service. This insight suggests the importance of having clear, distinct navigation links for "How It Works" and "FAQ" to address these specific user needs directly. So these set of users did not even click on Discover, probably assuming that it is a list of singles to look at.
A user is always comfortable with familiarity: The framework highlights key touchpoints where users interact with the website. It shows that users are confused by a single "Discover" link and are instead searching for explicit guidance. This indicates a need to improve touchpoint clarity by providing more descriptive and intuitive labels in the navigation bar, ensuring users can easily find the information they are looking for without confusion.
So here’s what I did to grow from my mistakes:
→ Re-introduced the original navbar with ‘Discover’ as an additional link.
→ Added an on-page survey to get feedback directly from users.
Making these two iterations proved to be successful after we tested a landing page independent from Tawkify’s ecosystem. The marketing team ran this page as an ad on Google and I studied how users interacted with this page. The result was shocking but in a good way. I use the word shocking because I did not expect users to click on Discover at all, since it’s an unfamiliar menu item. My hypothesis stood on the precipice of unchartered territory, and I had to look for inspiration in the most unrelated industries. I read a lot of articles online, watched YouTube tutorials and hung out in the product Discord channels for solutions but it wasn’t until I re-watched Good Will Hunting (1997) that I realized I could undo the path I chose for the navbar. I watch a lot of movies and try to relate things in my life with them, one of those actualizations happened to be for work.
Heatmap of a landing page that I built for the sales team that shows Discover more in use than Stories and Blog, confirming my internal bias that users might be confused with just a ‘Discover’ in the navbar: there is still a chance but a new service like this will require explicit guidance over time
Rebrand complete, but ‘Discover’ did not follow suit
While the rebranding team completed its project, I iterated on the IA and determined the best approach— displaying "Discover" as an additional resource on the navbar. With that resolved, I overhauled the original design to ensure it was mobile-friendly, addressing the growing importance of mobile accessibility and user experience in today's digital landscape. There were two major reasons for this overhaul:
Cognitive overload: The original design for Discover was entirely focused on desktop users. Why did I think all users who were browsing Tawkify resembled Meg Ryan from You’ve Got Mail (1998)? My user persona is partially to blame. Single-millennial makes good money-ready to mingle? I should have relied on actual data instead. But it wasn’t too late, so I jumped right back on track with actionable data from Google Analytics. I found that about 28% of users were browsing our website on mobile. That’s a sizeable amount of sessions potentially lost to bounce rate just because I did not make Discover mobile-friendly. The prototype I built has two columns of visual data on the header, with the right-side column scrollable. I was allowing users to pick from a sea of videos. And if there’s something I have learnt from this scrolling case study is that viewing time above the fold has reduced from 80% to just 57% in the present age, owing it to information density.
Accessibility principle and Hick’s law: Ensuring that the website was accessible to all users, regardless of their device, was crucial. By simplifying the design and reducing cognitive load, I wanted to improve the user experience and make the website more intuitive and navigable. I also keep reminding myself of the infamous Hick's Law, which states that the time it takes for a person to make a decision increases with the number and complexity of choices. This was another key consideration. By presenting information in a clear, organized manner and limiting the number of choices presented at once, the design aimed to make it easier for users to find and engage with the content they were interested in. This approach not only improved usability but also aligned with best practices for mobile design, where screen real estate is limited and simplicity is paramount.
My vision for Discover before testing the prototype
My target audience was right on one front, wrong on the other
Our marketing team’s biggest KPI was the number of views on their videos. They had months filled with interviews and content generation days waiting to be hosted on the website. I had a sit-down with the team to brainstorm not just ideas for content but also different ways to display it on the website. The key takeaway from this session was that we needed a visual hierarchy on Discover. I ranked each piece of content on the above prototype, from most important to least. I did not have access to tech that tracks a user’s eye movements but I did something close to it: asked my colleagues from the marketing team to read out their actions while doing it. Surprisingly, it gave me a deeper insight into how a user thinks. Most users say what they want but do something else. For example, user 1 says they want to watch a celebrity interview but ends up watching a ‘Success Story’ video (a couple that marries owing to the efforts of Tawkify’s matchmaking) because the cover image looked interesting. I mean, there’s nothing wrong with their choices, it just opens the table to discussion.
Ranking visual pieces based on the marketing team’s KPI requirements helped streamline the IA on Discover. My initial sketches passed the usability test with the engineering team as they found a faster way to load the video using Vimeo’s embedding functionality. The movie site was still loading quite slowly, and I looked to Webflow University to find answers. Anyway, more on this issue a little later.
Some of my initial sketches
Lo-fi prototype
User Testing
How I went from a 39 to 90 on the Performance Diagnostics Test
Google’s Page Speed Insights was a green signal for me to test the prototype further. I did something different this time around, I divided the group of participants into two groups. To one group, I sent out surveys and to the other, I had a 1-on-1 with directly. There was no specific reason why I did this, I just wanted to see how much of a deeper insight I could get from both groups. In my experience, I’ve observed how users manipulated results because they were being observed. It’s not a negative thing to fuss over, but the idea of sounding smart always takes reign in environments like these. I could not find any solid evidence of my confirmation bias so I saved the energy for another day.
Some common questions I asked during these interviews were:
At first glance, describe your understanding of the brand Tawkify. Where would you go next from the Home page?
What is your understanding of the page Discover? Do you see it as an independent menu item or a collection of related items?
How would you score your motivation to subscribe to Tawkify’s services?
How would you score your understanding of the content displayed on Discover?
How would you score your information-seeking journey on Tawkify?
The survey I used to conduct Discover v2 usability
Iterations
The art of letting go: v2 was not meant to be either
Version 2 of Discover lacked something I did not see coming until I conducted usability test # (I lost count of the number). The dev team and I pushed the page to production on Webflow and the number of feedbacks we got through Hotjar was immaculate. Users were not just rating the page but also writing comments. Remember I also installed a feedback survey on Discover to get a quick response on the website layout? The one-click feedback system is fantastic for testing pages that you are iterating in real time. Our QA engineer, Lillia raised multiple tickets raising concerns about the whole Tawkify ecosystem as she was not just testing the Discover page as an independent entity but as a whole. We found that many URLs were 404 redirects and Webflow-linked navbars that weren’t meant to be linked: this was a result of miscommunication between the rebranding and product teams. Webflow has a brilliant inbuilt component system like Figma that till today, blows my mind.
Ok, the issues that I saved to talk about now:
Videos embedded on Webflow loaded much faster when using an HLS playback… BUT that didn’t change the fact that thumbnails still loaded after a couple of seconds (as also confirmed by Google’s PageSpeed Insights). The solution to this is not something I’m proud of, it’s a hack that I read on the Webflow forum for videos. Nevertheless, it worked. I created a container box to embed the video on top of an image, then uploaded the same thumbnail on Vimeo on Webflow’s container box so it gives the illusion of already having loaded. Did I get user complaints for this yet? None so far. I’m still trying to figure out another way to make this experience seamless but for now, I’ll try to sleep with my eyes closed.
My original design vs. the one that made the cut.
The set of issues that hit home really hard:
In-line videos got a lot of trash. When I launched the website, a couple of our stakeholders reached out to me asking why the videos were not playing in fullscreen. In the original design, all videos on the Discover page would open in another browser. Thereby increasing chances of exiting the session within seconds. I worked with the engineering team to develop a code for playing all YouTube/Vimeo videos within the Discover page as a popup instead of confining it within the container. By doing so, the session is still running and provides the user with a better user experience on desktop. I’m not evil, I still care about my desktop users.
Users stated that the Discover page still had an overwhelming amount of content to browse through. To counter this illusion, I changed the background theme to a gradient and immediately saw a positive response. I chose a gradient after testing with solid colours, patterns and images. I also changed the hierarchy of content based on heatmaps.
This iteration helped me realise desktop users are not dead just because everyone’s browsing on mobile now. As you can see how I moved from playing videos in-line to a pop-up version to better serve all kinds of device types.
The all-new Discover page version ‘Don’t ask me’
While this version of Discover is not perfect, it was something better than what I started with.
Next Steps
Discontinued… even after getting conversions?
The final design reduced the bounce rate by 18.9% within 3 months of launching and performing iterations. Quoting one of the A/B testing participants Adam, “I love how I’m greeted with a large visual as I land on this page, it must be important? I like the dark theme, it’s relaxing to my eyes.” The most important lesson I learned while designing Discover for Tawkify is how people interact with different blocks of content depending on which device they are on so optimizing every website section became my priority. I also learned the importance of balancing information density with visual clarity to create an effective browsing experience.
Despite achieving successful results with the Discover project for Tawkify, including the reduction in bounce rate and positive user feedback, we ultimately decided to discontinue the project. This decision was made due to shifting company priorities and a strategic pivot towards new initiatives that aligned more closely with our long-term goals. Additionally, our insights from this project highlighted the need for a more holistic approach to content interaction across different devices, prompting us to redirect our resources toward a more comprehensive redesign that could better address these findings. This experience underscored the importance of achieving short-term success, aligning with broader strategic objectives, and continuous improvement in user experience.
Thanks for reading, you’ve reached the end of this page! Scroll to the top↑