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.