Posts

GameSlice Design and UX Update

 

Gameslice aimed to create an e-sports focused community portal. Small e-sports teams and communities could organize, run and monetize their own tournaments via the tools provided by GameSlice.

  

desktop-1080p.png

  

Game Slice Redesign


Redesigning GameSlice was a small project I really liked.

The task was to update their old and outdated Visual Design and improve their UX and general handling of the site.

  

New Login flow

 

New Signup Flow

  

   

Redesigned Home Page


One of the main issues of the old site design was that it lacked responsiveness. The main goal of the redesign was to create mobile friendly designs.

   

  

   

Mixer

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

mixer-home.png

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.

Moderation wheel - Information Architecture

Moderation wheel – Information Architecture

Moderation wheel - version 1

Moderation wheel – version 1

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.

moderation-popup.png

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.

Clips default sharing options

Clips default sharing options

Clips additional sharing options

Clips additional sharing options

Clip Creation process

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

Early skill tray iteration on console

Early skill tray iteration on console

A refinement of the console skill tray

A refinement of the console skill tray

The final version of the skill tray

The final version of the skill tray

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.

S2 MVP - Channel Default.png