User Experience
Visual Design
Prototyping
Brian Norgard
Farb Nivi
May 2021 - October 2022
Showcasing some of the prototypes you will see in this case study
We decided to start with a 4 profiles grid to let users only open profiles they are interested in and remove the guilt of passing on people. It also allowed us to be different from that usual one-card feed.
Open animation
If you liked a person you see a 💖, and it becomes a 🤞finger crossed to show that you are hoping that this like becomes a match. The 3D rotation is to show that you are "passing" on the people you didn't like.
💖 ⇨ 🤞
⚡⚡⚡ Try Prototype ⚡⚡⚡
A few key principles were crucial to explain well on the first experience.
Steps from onboarding
Onboarding on user's first experience
Instead of just disabling the scroll when trying to go back up, I decided to take that opportunity to ask users to share the app to go back which will bring us new users.
Share to go back 😄
We wanted to show that Fun is for people NEAR you. On Fun, everyone chooses an emoji that represents them called Funmoji. I created this animation with the Funmoji of people around you to visually represent that there are nearby.
Each funmoji represent one user near you
I wanted to create a way to get notifications while not being interrupted. Here the notifications appear, you can tap on them but if you don't, they seamlessly go away. Fun right?
In-app notifications for likes 💖 and chats 💬
Robin is an absolute master at his craft. He generates world-class work at a breakneck pace. I love working with him. I worked with him almost entirely remotely from different continents and the work pace and quality were second to none. Can't wait to work together again.
Profiles can have up to 3 videos, a bio, and a funmoji (an emoji that represent you).
Profile videos
Wanna read more about a person you fancy while seeing her/his/them cute face? 😚 Here is a prototype of a profile that was made to solve that exact problem!
Picture in Picture Profile
If out of the 3,633 emojies, you both chose the same one to represent you then you found your Emoji Twin!
Celebrating your emoji twin 🐵 🐵 🐵
We created the funwheel to have richer reactions than just sending a like. We added a morphing loop 💖 to 💬 just enough time for the person to get excited while waiting to see if it'll be a match.
💖 Like animation
💬 🥳 Match animation 🥳
⚡⚡⚡ Try Prototype ⚡⚡⚡
After some tests, we realized users were spending too much time picking the right emoji which led to fewer likes sent. That's why we went back to the like-only reaction.
Like only animation 💖
The first video is the "spotlight", the user will appear in the feed with borders and his funmoji jumping around. The second video is when there is no one else around. The third video shows why is it important to enable notifications.
1- Spotlight / 2-No more people / 3-Enable Notification
I’ve worked with hundreds of designers in my career and Robin is at the top. I admire him.
As much as we liked the Quad Grid, sometimes you need to make it simpler to make the experience as smooth as possible.
Up to 💖, down to ❌
⚡⚡⚡ Try Prototype ⚡⚡⚡
Dating app users are already used to the left and right swiping mechanism so we explored a way to implement this.
Left / right swipe directions
⚡⚡⚡ Try Prototype ⚡⚡⚡
We also explored a profile that we could scroll vertically to have more info. You would still swipe right/left to like/pass.
Profile vertical scroll
All the good stuff and more! For example, we implemented a harassment blocker: after 3 messages are sent without an answer, you can't send another one before the person replies (Screen 3)
Inbox / Typing / Chat blocked after 3 messages
"NEVER EVER lose your openness to explore new ideas. You are nailing so many aspects of what it takes to build a great product. I consider it an honor to work with you" (Via Text)
Love at first sight? Thanks but no thanks? You can directly like or pass someone from the grid view, without having to go to the full-view profile.
Like from the Inbox
⚡⚡⚡ Try Prototype ⚡⚡⚡
Gestures are harder to teach to a new user so we explored a version where you would just tap the icons to like or pass.
Tap to like or pass
To reduce the number of users dropping while signing up, we asked for the bare minimum of information and showed a progress bar to encourage users to finish the sign up flow.
Sign up flow
When designing a dating app, you have to think about every gender. For example, the experience for a man or an attractive woman will be completely different. You have to think and accommodate both.
No one wants to use a dating app with nobody on it. User acquisition is really key and that's why we designed a few things to try to acquire new users from the start. (Example: Generating a video you can share on other social networks)
Yes, it's me walking down the streets of LA 🏝
Coming up with a fancy new way of doing something is only valuable if it's core to your business (ex: Tinder Swipes). Do not complicate things for the sake of being "innovative".
The Fun team flew me to Los Angeles for the launch party. It was an amazing opportunity to celebrate months of hard/fun work and get to know each other better. Also got to meet some of our investors including Paris Hilton and her husband Carter Reum, founder of the M13 venture firm.
Some good moments in Los Angeles 🏝 (Featuring Paris Hilton, Carteur Reum, Farb Nivi & Brian Norgard)
Reach out at noguier.robin@gmail.com. I have an inbox zero rule so I’ll see your message for sure and, I’ll reply with at least one smiley.
Life is fun! 💖