UI/UX and Branding for New Dating App
Glimpse is a revolutionary new filtered blind dating app that aims to encourage more meaningful connections by incentivizing more engaging conversation.
Matches appear anonymously in user inboxes, and couples have to exchange 20 messages to reveal their match's identity again!
I joined Glimpse, a Stanford startup, from the beginning to help develop the mission, then to create a strong cross-platform brand identity and a UI/UX design that captured this fresh, playful, and authentic approach to the online dating space.
Glimpse launched at 5 different colleges with over 3000 downloads and 4.5/5 stars on the Apple App Store.
PROBLEM SPACE & SOLUTION
39% of conversations on Tinder consist of only one message, [and] a further 10% contain two or more messages that are unreciprocated
Existing dating apps reward endless swiping at the expense of meaningful connection, leading to dissatisfaction and low success rate.
In response, we made Glimpse, a filtered blind dating app that incentivizes more engaging conversations through anonymous matches.
I joined the founder after he had already identified a problem space and spoken to users to identify a thoughtful solution. Glimpse addresses this gap in meaningful interactions on dating sites through innovative mechanisms:
1. Users swipe on photo-only profiles to validate their physical attraction towards each other
2. Matches appear anonymously in user inboxes
3. Couples must exchange 20 messages to reveal their match's identity, complete with photos and now name and interests
4. User inboxes are limited to 6 matches each to incentivize conversation and disincentivize endless swiping
Once I understood the founder's goals for the app, I was brought on to build the complete branding system for Glimpse, including the logo, mascot, and UI/UX for the app alongside social media content to promote its release.
Before beginning the designs, I defined some clear goals for myself:
★ Use the design to emphasize the playful nature of the revealing mechanism
★ Create a logo and mascot to represent the anonymous matches
★ Ensure UI/UX helped users understand the innovative mechanics of the app
When creating the wordmark logo, I targeted fonts that were modern, romantic, and gender neutral. In addition, I targeted potential spaces for the logo to reflect aspects of the core mechanics, for example including a small icon in the tittle over the "i."
In the end, I chose a serif font to offer a sense of maturity, especially considering the mascot development to come.
In designing the mascot, I took inspiration from existing mascots like the Puffle from Club Penguin and Duo from Duolingo, noting the expressiveness of eyes in the mascots. Again, I hoped to have the mascot reflect the core aspects of the mechanics, since the mascots will act as placeholders for the identities of the anonymous matches.
To flesh out potential mascot options, I created a small matrix combining different eye designs with different body shapes, some reflecting the dating app design as they imitated the shape of a magnifying glass or a chat message.
Next, I did some short research on the colors of existing apps, identifying some potential colors I could use to bring the mascot to life. I again drew a small matrix with my findings, drawing my favorite mascots in three color options.
In the end, we identified 6 primary colors to use in the smaller mascots that would act as the placeholders for matches, while separating out a teal green-blue color that caught the founder's eye as the primary color for the mascot and logo.
The mascot's shape reflects the chat bubbles that are central to the meaningful connection we hope to inspire, while the magnifying glass and heart-shaped eyes reflected the goal of users looking for love on the app.
This initial development of mascot and logo provided a strong baseline to move forward in designing the UI/UX of the app.
When I was brought on to the team, I inherited a set of low-fidelity Figma designs from the founder that illustrated his initial thoughts on how to design the UI. My first job was to take these ideas and turn them into a more refined design that could be prototyped with users and transformed into a functional, effective, and playful flow.
I used his initial brainstorm to inform a Figma prototype featuring the anonymous inbox with randomly generated pseudonyms, a home screen for swiping, and a chat interface all featuring the signature mascot.
I then facilitated some user testing with this prototype to identify pain points for a redesign ahead of implementation.
Through the low-fidelity user testing, I identified some key changes and design goals to implement in the final prototype:
Users thought the mascots were a cute placeholder for identity, but perhaps too childish
The randomly generated pseudonums were a success, allowing users to easily remember their matches
The familiar icons and structure made navigation intuitive.
Beginning with the chat inbox, key changes I made to reinforce the maturity of the app included changing the title font to the serif font I identified for the logo and reducing the usage of the teal color, instead opting for a more timeless black and white design.
Another key change involved a complete rework of the mascot, removing the 3-dimensional shading and excessively cute eyes and instead creating a 2-dimensional and simplified version, still featuring the same shape and the heart-shaped eyes.
In the chat interface itself, I followed a similar pattern of removing the unnecessary mascot in the corner and removing the teal color, instead using the designated color for the respective match in each of the 6 inboxes to again help users easily remember who they're talking to.
In addition to these adjustments, I fleshed out designs for some other important screens like the onboarding and match information (both for anonymous matches and for unlocked identities)
These prototype screens were passed on to the development team for implementation and released for beta testing with potential users. At this stage, I assisted in the frontend implementation in React Native through styling and facilitated some user testing to identify small changes ahead of the release.
Some of the final touches added before the release included some custom animations I designed in Adobe Animate to be used during the screen loading and when a match's identity was revealed!
SOCIAL MEDIA PROMOTION
Finally, ahead of the app's release I helped create a series of social media posts outlining design strategies and post ideas, including slogans, relevant tweets, couple spotlights and more, all to generate excitement and buzz over Glimpse's release! These designs were passed on to the next designer to follow as a guideline following the release.
Release: Glimpse released at 5 college campuses with over 3k downloads and 4.5 stars!
I'm incredibly grateful that I was able to join this team, and through this experience I was able to learn a lot about joining existing teams/ideas and working within their existing constraints, working in a faster release cycle for a public product, and presenting and pitching my work for effective collaboration in a multidisciplinary team!