Unified Web Experience
Role
Flip Design Team - Microsoft
Lead UX Designer
A shared UI for everyone
The Flip web experience was bifurcated between two entry points; one for group leads and one for group members. The different URL’s did not only add a cognitive burden but also generated confusion because of their difference in UI and lack of cohesion. Additionally, every new feature required at least 2x the engineering buildout.
With at least 80% of Flip usage being on web we created a single app, where a person is able to be both a group lead and a member within the same UI leveraging accounts to provide role-based experiences. The new Flip streamlines the journey, simplifies the architecture, and sets the foundation for our app to scale and grow effectively and sustainably.
Old - Group Lead URL
Old - Group Member URL
New - Group Lead + Member Single URL
In the unified web app, it doesn’t matter whether a person leads or participates in groups. They can fulfill both roles from a single website with the same UI. Based on the role, what varies are the available actions and permissions.
From many URLs to a single web app…
The web experience was revisited in its entirety! While we were able to leverage existing UI, net new work was also necessary; everything from the auth screens, to a new topic tile view and a full-blown immersive playback, were built from scratch.
A New Navigation
Introducing a persistent left rail allows the core navigation entry points to be quickly accessible and easy to navigate across.
Group Details
As the topic prompt and responses are easily glanceable, we introduced a quick reply button into the topic tile, so that video responses can be recorded directly from this view.
Group Create
Bringing the existing “group create” mobile design to web allowed for further simplification and consistency across platforms.
Topic Create
The form was re-designed to give more prominence to the topic prompt, making it the only required field for quick creation.
Playback
4-5 different playbacks were consolidated into a single one. With a full canvas takeover, the video content shines, while being flexible enough to allow viewing comments side by side; a top request from the community.
The mini-topic card keeps people in context while providing additional information at a glance. Additionally, the main nav can collapse to maximize the viewing real state.