Overview

Reach.me is an invite-only collaboration and streaming platform, designed to allow artists to expand their reach across all socials with just one app. Go live to Instagram, TikTok, YouTube, Twitter (and more) at once, get unified comments view, engage with fans and notify them when you go live via SMS subscription.

Product discovery

New Reach Live Studio was an evolution of Happs Broadcasting app, targeted at live journalism, interviews, news reports, riot transmissions, but surprisingly adopted by artists of all sorts, streaming live painting sessions, weekly art shows, etc.

Simplification

With a new brand coming in, a fresh approach was needed for the Studio experience. There was no sense trying to build on top of old designs; therefore, we decided to start by reducing the UI to the bare minimum and axed tons of unnecessary features.

Solution: extreme simplification

Stage management

Simple, yet functional

Overview

Old stage management required to control layout settings (Fig 1.) and a small switch inside each card in connected column (Fig 2.). Users had to pay attention to the selected layout and move guests between slots in a perplexing way, click small UI elements and observe changes on Stage.

Media and invites

Managing guests and media files

Overview

In the old version, guest (Fig 1.) and media (Fig 2.) were managed by those two columns. It was not clear how to present media on stage, how to remove guests from the session completely, when and how they will be added to the stage.

The media section was fairly straightforward, since we could screen share and present media on stage in the new version, but did not want to promote this feature, we moved it into the 3 dot menu below the stage.

Users could screen share from desktop or upload video clips and present those on stage alongside host and guest videos. We’ve supported two layouts for media, vertical and horizontal, based on the destination (Twitch required horizontal, most socials required vertical, like Instagram, TikTok, etc.)

Guest management - Green room

Now this one was huge

Overview

In the old version, we had a list view with a confusing way of adding and removing users from the greenroom. NOTE: green room nomenclature was adopted from old version of Happs targeted more towards journalists, news hosts, TV broadcasters.

In show business, the green room is the space in a theater or similar venue that functions as a waiting room and lounge for performers before, during, and after a performance or show when they are not engaged on stage. Wikipedia

Since we wanted to greatly simplify the interface, we had to figure out how to invite and manage guests in the green room in the most transparent and invisible way, so the host could focus on talking, singing or interacting with the aggregated comments from all connected platforms.

In order to a) give Hosts great power and b) keep it super simple, background logic had to be completely figured out to account for all possible scenarios.

Multiple overview boards were created to align each step of the green room experience across multiple user types and where they are in the flow, from being invited, in green room, ready to go live, invited to join on live video, rejecting or accepting that invitation, stepping down from stage or being removed by host and finally leaving green room completely.

Each board had columns representing time inside the Studio, so from starting a new session through setup, LIVE and post live. I’ve also created multiple rows for specific user types: Host, Guest, User (watching on Instagram for example) and additional users with admin or advanced (paid) features to ensure every possible scenario is covered.

For the Host, the UI is simple, list of users that can be invited to the green room, added to the Stage or removed from the green room. That’s it, super simple and easy to understand. One cool trick - we’ve added a timer for adding guests to Stage, so if Host asked the wrong Guest to join, they could still cancel it with one tap/click.

Connected accounts

One session - multiple destinations

Overview

Multi-streaming was a huge part of Reach value offer - the ability to connect all your socials, YouTube, Twitch, Instagram, TikTok, Twitter, Reddit and more and stream to all fans from one studio. Artists like Chris, who was using Reach, had only his iPad with him while performing live in clubs across the America - yet he was able to reach fans on Instagram, Reddit and Twitter, from a single, easy to use app. We had people performing in wild places with just their iPhone, going live to multiple destinations across the net.

Managing those destinations was a big part of the Reach UI that I had the pleasure of working on. Generally speaking, again, we simply listed all available connections that users could click to connect to. Each destination had a dedicated sub-page with connection status and some options.

Custom solutions have been created to allow Hosts to stream to those destinations. For some, we’ve used available APIs, those were easy. For more ‘locked’ sites, like Instagram and TikTok, we had to rely on 3rd party options, like YellowDuck, Instafeed, TikApi, etc. Not the best situation, but the plan was ambitious.

Again, from the UI point of view, the transparent and easy to use interface allows managing multiple connections from one view. Both desktop and mobile.

One additional detail, the concept of connected accounts was not limited to Host only. Guests could also connect their socials, essentially creating a wide audience across tens of accounts. Imagine the Host, with 5 accounts, ranging from 100k to 500k followers, going live and invites 5 guests, each with 5 accounts, some with 250k up to 750k, and one with 10k to 50k followers. Combining those numbers, each of the 6 users on Stage could reach a total of 10 million fans. The amount of exposure possible with this system was simply out of this world.

Summary Page

Sharable stats page

Overview

One of the promotional/growth ideas that influenced the UI was a Summary Page, displayed after successfully finished stream.

The idea was to create a layout, that gives Host and Guests a screenshot-able piece of UI showing their total views, comments, likes across all accounts. User would post those screenshots on their socials, tag Reach platform that essentially created a stream on new users asking about access to Reach platform.

Dashboard

One session - multiple destinations

Overview

We needed a dedicated spot for users to collect all essential info about their profile and streaming setup (connected accounts). The simple dashboard I designed offered an overview of ‘My Network Strength’, containing all connected and available to connect destinations, with status indicating if all is good to go. Some connections were a bit unstable or prone to disconnecting occasionally, therefore providing status for those felt necessary.

We also introduced Audience trends, visible as three cards. Those were designed to highlight followers gain (based on aggregated data from all connected accounts), total views with last 7 days change and a small tip about being consistent with streaming times and frequency.

What’s next?

Prospects for this case study

Reach was a huge project, I was part of it for almost two and a half years. This is a very thin slice of the work I did during my time at Reach, and there are still plenty of aspects I would love to dig into. I will keep updating this page with new sections and new designs.