Redesigning the mobile experience of a dating platform — A UX Case Study

Image for post
Image for post

Summary

I led the complete redesign of SL web app, a product used by millions of Brazilians every day. We dramatically simplified the user experience, focusing on core interactions, speed, and simplified navigation. Making it beautiful in the process was just the icing on the cake.

About the company

SL is the biggest Brazilian community dedicated to the kinky lifestyle with more than 8 million users. The company believes that society still treats sexuality as taboo, so its purpose is to provide a safe and judgment-free environment for people to live their fantasies. SL users subscribe to its platform to meet and hook up with single individuals and couples from any part of the world with total respect, security, privacy, and no judgments.

The context

When I joined SL in November 2014, most of the access to our website came from desktop devices, corresponding to an average of 88% of daily traffic. At the time, our design team was already studying the mobile-first mindset, but we decided to stay focused on our desktop experience due to our small team and budget constraint.

Understanding the problem

As the initial parameter for our research, we adopted the home page and the interactions generated from it as a key point for understanding the experience. Firstly because it’s from there that the whole experience starts, for new and veteran users. Secondly, because a lot of the hypotheses generated by our team involved the interaction with this page. As research tools we’ve used contextual interviews with people who have never used the site, browsing analysis of veteran clients with Hotjar, Analytics data, and behavioral data.

# Pain point 1: Complex learning process

In my interviews with people who have never used SL, I’ve identified that first access to the platform is confusing and frustrating. All the interviewees reported the annoyance and the difficulty in dealing with numerous processes that ran in parallel when they board the platform (See the image below).

Image for post
Image for post
First interaction: what should I do first?

# Pain point 2: Low value in home page content

By analyzing our users’ interactions on Hotjar and events logged in Google Analytics, I noticed that new and veteran customers found low value on the content present on the homepage. Over 80% of the clicks were concentrated only on the first two content blocks.

# Pain point 3: Core features difficult to find

The biggest value we sell to our customers is finding compatible people. However, new users had a hard time finding the triggers to look for people of their interest.

Image for post
Image for post

# Pain point 4: Long page load time

All respondents reported discomfort with application performance. In our NPS survey, we had already identified a high volume of such complaints. For those interviewed, SL is generally slower and less enjoyable to browse than other sites they often use.

# Pain point 5: Low depth of navigation

By analyzing the flow of events recorded in Analytics and the usage recordings in Hotjar, we’ve identified that on mobile devices users were browsing 40% fewer pages per session than desktop devices. By observing this interaction, it was possible to identify the lack of triggers between modules that would allow the user to navigate for longer.

# Pain point 6: Annoying floating assistant

Right after users gets on the website there is a user assistance tool with tips to improve the evidence and success of the profile. Despite the effectiveness of tool conversion (75% of users interact positively with it), respondents reported a nuisance with it at the bottom of the page. As I mentioned earlier, the number of processes running at the same time may have contributed to this irritation. At first access, users felt much more motivated to explore the features of the site than to follow steps of something they didn’t even know about.

Defining priorities

This research has brought me a number of concerns of the utmost importance to the product. Since we had a small development team, I had to choose which aspects of the problem we should tackle first. My decision was to start on two fronts:

  1. The first step in simplifying the initial interaction of the client with the site, reducing the complexity and giving focus to the most important tasks.

Sketching and testing

Sketching brought me a lot of challenges and questions related to user interaction. My first objective was to prioritize and organize all the features in a way that it had a context and logic order to users. As can be seen in pain point 3, all the features were hidden inside the hamburger menu without hierarchy and meaning to the user.

Usability tests

After refining the sketches, I could prepare a prototype to test with users. We spent a week interviewing and running usability tests with single individuals and couples carefully selected according to our different personas. Tasks were selected based on their importance to customer success, their impact on key business metrics, and the level of strangeness some changes in interface and information architecture could cause to the users.

Tasks:

  1. Access a photo on your profile
  2. Find someone on the website that matches your criteria
  3. Access the Groups page
  4. Change your location to Campinas
  5. Accept your friendship requests
  6. Buy a subscription
  7. Buy a Token package
  8. Post a photo to your profile
  9. Find the expiration date of your subscription

Results of the Usability Test:

The results proved that most of the users were able to complete the tasks with ease. In fact, reactions (including both verbal and non-verbal cues) to the prototype showed that they were confident in navigating the pages. Several of them also expressed their satisfaction at the simplicity of the interface and the facility of finding the usual features that they accessed frequently.

A new simplified experience

As we discussed earlier, in the final interface I could semantically group elements of the interface according to its usage and logical order. The main challenge was to understand which features should be placed on the first level, in a way that the user could have fast access to it anytime in their navigation.

Image for post
Image for post

A brand new and convenient profile page

One of the biggest changes in the navigation was the new profile page. In this section, I organized all the features related to the user profile, account settings, and privacy options. In the old interface, all these elements were lost inside the hamburger menu and other areas of difficult access. I took great care on preserving some essential features:

  1. For the user: Access to public profile and profile edition.
Image for post
Image for post

Defining Business KPI's

In order to define the success of our project, I defined some KPI's that must be followed after releasing. Each metric should be analyzed carefully to understand its impact on the business and the user experience. These were the chosen indicators:

Access Metrics:

  • Sessions per user (per day, month)
  • Average session duration
  • Pages per session
  • Navigation flow

Activity Metrics:

  • Retention cohort

Conversion Metrics:

  • Conversion rate
  • Time to the first sent message

Custom Metrics:

  • Engagement Score (Based on the activity level on the platform)
  • Success Score (message response rate)
  • Onboarding Key Metrics (Completed steps)

Next steps

At this time the project is under test with a restricted group of beta testers so that the analysis of the KPIs can be made and feedback collected to make the necessary adjustments. Once we validate all the key points of the project, we will release the beta little by little to new users so that in a few months we can offer it to our entire customer base.

Hi, I’m Renan Crociari.

I’m a Product Designer who works to connect the company’s strategy into creative solutions, partnering with technology, business analytics, business strategy, and UX.

Product Designer | User Centered Designer | http://www.renancrociari.com | me@renancrociari.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store