Grindr Web was a web version of Grindr. It was developed for the time when using Grindr mobile app wasn't that proper, especially while people were working. We tailored the design for this scenario and provided the LGBTQ+ community with the ability to connect and destress during the pandemic.

Intro

  • Completed feature design for Grindr Web and rolled out globally

  • Designed Grindr Live MVP, a live streaming channel, from scratch and implemented it from Grindr Web to the mobile app during the pandemic.

  • Cooperated with the UX researcher for defining user needs and product problems

My Role

Contribution

UI/UX Design

Timeline

Aug. 2019 ~ Aug. 2020 (I took over from Dec. 2019)

Team Members

Previous Designer: Monty Suwannukul (Design Manager)

PM: Eugenia Huang

User Researcher: Tyler Benes

Tools

Figma, Proto.io, Survey Monkey, UserTesting

We globally rolled out Grindr Web in Feb. 2020, when COVID-19 hit the world, we successfully provided users with more ways to connect and share their feelings. Users on Grindr Web even had higher engagement than the mobile app.

3 months after the global rollout, when the DAU of the mobile app was decreasing, Grindr Web had about 2% regular DAU increase each week.

Also, 

  • People averagely sent 38% more chats on Grindr Web than on mobile.

  • People averagely spent 2 times more time on Grindr Web than on mobile.

  • People averagely viewed 40% more profiles on Grindr Web than on mobile.

🎯 Final Result

Discreet with Office Mode

Hide the excitement behind the “document-like” theme. Users can turn it on and off depending on whether they are in an office/school.

Feature Design Preview

Mouse on to see, mouse off to hide

Stop worrying about being unable to hide NSFW content while your peers walk by.

Enjoy the visual bomb through a single click

For adopting every use case, Grindr Web allows users to see every content in clearer and bigger images by turning off Office Mode.

Photo Gallery

Take advantage of the big screen, people can browse whole photos they received in one place.

People can also be triggered to keep chatting by the attractiveness of photos.

Highly Responsive UIs

Multi-tasking now is not a problem. Conversations are less likely to be stopped even if you want to watch videos or do school projects.

Dark Mode

With dark mode, people can use the platform based on their preference or the most frequently used working platforms. Also, Dark Mode fits the original Grindr app more!

Focus Chat

Want to have a deeper chat? Now people can chat and study someone’s profile at the same time.

Process

The online time of most users: 

  • Highly accord to their work time

  • Using the least from 9 am to 2 pm and reaching the peak at 8 pm.

Research

Data Research

User Research

  • Most users feel anxious about using Grindr app when they are in the office/school.

  • Some users’ needs are hard to be fulfilled through small devices. e.g. chatting and browsing profiles at the same time.

Journey Map

Problem

The experience of connecting with the LGBTQ+ community was interrupted by a big chunk of time in the office/school. 

How Might We

How might we help people in school or the office have an easier and more securer way to connect?

Platform Decision

Since people rarely feel comfortable using their mobile phones while working or having classes, so

we decide to provide a desktop version of Grindr, Grindr Web, with discreet UI to help users fill the experience gap between work/school and life before or after.

Also, Grindr Web can fill many weaknesses that mobile can't achieve like chatting and browsing profile grids at the same time.

Competitive Research

  • No other LGPTQ+-based dating websites were equipped with office/school mode including Bumble, Hornet, OkCupid, etc.

  • What we found the most closed one is the Office Mode of Tinder. It simply created a fake document page as a cover to hide the screen.

  • The office mode button is too small to click easily and quickly.

  • There is still no privacy while using. Nothing is hidden while using.

  • Tinder’s brand color isn’t general to real office tools.

Insights

Information Architecture

Discreet with Office Mode

Hide the excitement behind the “document-like” theme. Users can turn it on and off depending on whether they are in an office/school.

Feature Design

Mouse on the see, mouse off to hide

Stop worrying about being unable to hide NSFW content while your peers walk by.

Enjoy the visual bomb through a single click

For adopting every use case, Grindr Web allows users to see every content in clearer and bigger images by turning off Office Mode.

Photo Gallery

Take advantage of the big screen, people can browse whole photos they received in one place.

People can also be triggered to keep chatting by the attractiveness of photos.

Highly Responsive UIs

Multi-tasking now is not a problem. Conversations are less likely to be stopped even if you want to watch videos or do school projects.

Focus Chat

Want to have a deeper chat? Now people can chat and study someone’s profile at the same time.

Dark Mode

With dark mode, people can use the platform based on their preference or the most frequently used working platforms. Also, Dark Mode fits the original Grindr app more!

Feasibility Testing

  • People unanimously agreed that Grindr Web is simple, intuitive, and easy to catch up with because they have the same structure as the mobile app. All of them feel excited about it.

  • People loved Office Mode which provided them with a way to keep exploring without concern.

We globally rolled out Grindr Web in Feb. 2020, when COVID-19 hit the world, we successfully provided users with more ways to connect and share their feelings. Users from Grindr Web even had higher engagement than the mobile app.

3 months after the global rollout, when the DAU of the mobile app was decreasing, Grindr Web had about 2% regular DAU increase each week.

Also, 

  • People averagely sent 38% more chats on Grindr Web than on mobile.

  • People averagely spent 2 times more time on Grindr Web than on mobile.

  • People averagely viewed 40% more profiles on Grindr Web than on mobile.

🎯 Final Result

Retrospective

This project was stopped while the business goal and the executives changed. 

I felt very grateful that my manager allowed me to fully take charge of a brand-new product. If I had more time, I would:

  • Start rebuilding the design system of Grindr Web earlier. When I took over it, we hadn’t had a complete design system and hadn’t had a chance to reorganize it because of the progress urgency. However, it resulted in many design inconveniences. I should communicate with stakeholders about its importance.