Toki
Toki
Toki : Immersive Video Centered Dating App
This project reimagines the way user profiles are experienced through video as the primary form of a profile. Delivering a new immersive experience as a dating app.
Category
Personal Project
Project Date
May 2020
Lead Time
1 Week
Designed
For Changes.
The user experience on a dating app is reimagined through the increasing adaptation of a full screen video format.
App Icon:
Familiar Cultures
Toki's App Icon was designed with modern day digital - pop culture in mind, leveraging on the familiarities and connotations drawn by emojis
Case Study:
Tiktok
The call for new user experience in dating apps was spurred by the change in the way contents are created and consumed. Tiktok has lead a wave of immersive media utilising the full bleed of the screen
Suggested Interactability:
A card view with shadows were used to suggest interactability, an arrow suggest a call to action to swipe up to reveal user profile
Media
Pagination
Since each card is identified as a profile, all profile media should be displayed within the same view. dashes were used to show how many videos and photos there are for a profile.
Profile View +
Shared Header
An arrow overlay was used to suggest a swipe up call to action which reveals the full user profile from the shared header with user description
Product Strategy:
Add As Friend
Allowing users to add as friend provides a secondary stream of engagement & interaction beyond romantic interest.
Matched
Categories
Users who are matched from either a mutual like or as friends are sorted accordingly.
Finding the Perfect Match
Preferences allows users to find the perfect match, the form is built modularly with some sections shown and collapsed only if its applicable.
Conclusion
Toki was a great opportunity to redesign the way user profiles are experienced, with the full video format, it pushes for new modes of expanding profile information and other interactions
Prototyping
Origami was used to build a prototype and study user interaction strategies as well as structuring various animation parameters, states and conditions for development