Archive for category: UI / UX / Visual Design

A sub-second latency live streaming platform with robust tools of interactive integrations for games and custom interaction tool-set to play with and support your favorite streamers

Moderation Tools

Gesture based moderation wheel

The task was to design a solution that allows moderators access to common actions they need to keep a chat managed.

The solution was a gesture based moderation tool to allow moderators to access the most common actions with a ‘press and drag’ action that builds upon muscle memory.

User reaction and feedback was overwhelmingly positive. Moderators use the mod wheel more often compared to text commands and the contextual menus combined.

Moderation contextual menu

When facing huge amounts of text messages from large number of people, Moderators had trouble using the gesture wheel to target the right user or message.

According to our research moderators had trouble clicking on the right message or user.

The new contextual menu helps Moderators drown out the background chatter, move back and forth between messages of a specific user and have hotkey shortcuts to improve the speed and usability of the tool.

Clips Feature

A recent addition to wast utilities of Mixer was the ability for users to create short snippets of a live stream called ‘Clips’. Creating and viewing clips had to be seamless and an inline experience.

I have chosen to use a dialog solution to take away focus from the stream and the chat behind it, let the user concentrate on the steps of creating the clip.

The clip viewing experience is built similarly so the viewer can watch a clip without leaving the channel they are currently engaged on.

Planned functionality

An additional exploration of potential expansion of the clip creation process is the ability to trim clips and edit metadata on the fly. This function would allow users to create shorter or longer clips depending on the streamer actions and buildup to resulting in better framing for the clips.

Season 2

Mixer Season 2 expanded Mixer’s already extensive interaction tool-set by adding the ability to use skills and support your favorite streamers with a virtual currency called: Sparks and Embers.

Sparks are earned while you watch, Embers are premium currency bought via micro-transactions. The first phase of Season 2 only used Sparks. Embers were scheduled to roll out a few weeks later.

During the Season 2 design phase my main focus was to translate the Skills and related mechanisms to Console.

Console Design has unique limitations that is inherited from the platform and input method. Some of the limitations I had to keep in mind was, TV safe space calibration, color temperature and display technology variations, input method limitations and 10ft experience for optimal visibility.

Skill Tray Iterations

Final Skill Tray Comps

First Time User Experience

Accessibility Works

Accessibility is one of my passions within the field of Use Experience design. I want to ensure that my designs are easy to use for users with a disability.

During Season 2 design works I had the amazing job of working on our accessbility compliance.

Creating High Contrast compositions for bright and dark themes

Engineer guide

Apart from creating compositions for High Contrast Dark and Bright modes, one of the major tasks during accessibility adjustments was creating an easy to skim guide for engineers on the pitfalls of accessibility standards.

I have written a document that guided engineers through each major screen of the designs and showcased screen reader order, minimum contrast ratios and sizing suggestions and other Accessibility requirements.