Mixlr Client Project
Helping broadcasters grow their audience and increase engagement
Methodologies Used
UX/UI design, User research, Prototyping, Design Studio
Duration
3 weeks (October 2020)
Team
Nathan Davey (medium.com/@nathan.davey)
Faisal Rasouli (medium.com/@f.rasouli812)
Chris Wellmar
Deliverables
· Complete Research Findings
· UI prototype
Software
Figma, Miro Board, Trello
Brief
Mixlr is a broadcast and stream audio online platform started 10 years ago, hosting over half million broadcasts every month. Due to the global pandemic the number of broadcasts had risen enabling Mixlr to expedite their development plans and grow their team.
Challenge
- Help broadcasters grow an audience.
- Increase engagement between broadcaster and listener.
- Improve the current UI to make the product attractive to the audience with a consistent and modern look across the Mixlr ecosystem.
My Role
I participated in all aspects of the project, from the initial user research and ideation to prototyping and user testing. I also facilitated the design studio session.
Outcome
We met the brief increasing the level of personalisation a broadcaster is afforded, helping to differentiate their content from the rest and making it more appealing to listeners. Introducing ways to help broadcasters promote their channel and share content in other social media networks. By categorising and making content easy to locate through the site. Finally, redesigning the chat functionality to aid engagement between broadcaster and listener.
The Process
Discover
Analysing Mixlr’s Competition
To understand the broadcaster and the steps that a user needs to complete the main user journey, we started by looking at strengths and weaknesses of similar products to Mixlr and how they: 1) Show content 2) Promote the artist/broadcaster 3) Improve broadcaster and listener interaction, we started by analysing 7 other broadcasting and live streaming platforms and some of the features that they offer.
Usability Testing
We wanted to know more about Mixlr’s current product, so we carried out a usability test by hosting a live broadcast. I took the role of the broadcaster while we managed to get six people + our team members as audience to be able to identify key features and possible pain points.
Screener Survey
We did a screener survey to gain insights from people’s experience with live broadcasting and to capture the right audience to conduct further user interviews.
User Interviews
From the survey responses we were able to conduct 12 user interviews. Our aim was to better understand the relation between broadcaster and listener on live events while using broadcasting and streaming services and how to increase engagement. We asked questions to gain insights into their experience relevant to: finding and categorising content and how to make it more accessible to the user, branding and profile personalisation and events and notifications.
Discovery phase Key Findings
- Content is essential for a broadcasting service: The main reason users access broadcasting and live content services is to get fresh and varied content, they want to find it, categorise it and be able share it with other users. Also maintaining functionality and familiarity across platforms are key to make the service accessible.
- Content exploration: Allow users to access and explore Mixlr and its content before prompting them to sign up.
- Interaction between broadcaster and listener: The main functions to facilitate a relation between the broadcaster and the listener are Like, Follow and Subscribe. Secondarily, setting events trough preset notifications to promote the broadcaster’s content with their followers in Mixlr and to be able to share it in other social media platforms will help to reach a larger audience.
- Profile page: A certain level of personalisation will help broadcasters stand out but also make them easier to differentiate and locate.
Define
To synthesise the findings of our research we created 2 different personas, one to represent the broadcaster and the other to represent the listener. But first, to understand the relation between the user and the current Mixlr product we created 2 different journey maps.
Broadcaster Journey Map
Personalising and editing the broadcaster profile felt underwhelming because Mixlr only offers the option to change the profile picture. Scheduling an event and be able to share it within Mixlr and other social media platforms was confusing and difficult to manage.
Listener Journey Map
User felt irritated when prompted to sign up to Mixlr interrupting their experience when listening to a live broadcast for the first time. Listeners felt confused because the showreel button (to be able to find more content from the broadcaster) is difficult to find.
Personas
On top of creating 2 different personas to help us represent the different user types, we also generated 1 problem statement for each, so we could focus on specific issues and help the team to stay on track while moving forward on the project.
Broadcaster Persona
Antonio’s Problem Statement
Antonio needs more ways to personalise his profile and live page so that he can make his profile more appealing to potential listeners.
Listener Persona
Sue’s Problem Statement
Sue needs a way to explore live content that interests her so that she feels more confident engaging with the broadcaster.
Develop
We started our ideation process by conducting a collaborative sketching design studio session with 4 members of the Mixlr team.
Design Studio
We wanted to explore and visually articulate how some features and ideas might look and develop solutions to further ensure the shared vision among all involved. I took the design studio facilitator role, helping with the timing, taking notes and organising the working area on the shared Miro Board. To help us launch the creative process we generated a series of short questions or how might we statements. How might we..
…increase engagement between broadcasters and listeners before, during and after a broadcast?
…create more features to make a broadcasters profile stand out?
By sharing and critiquing our ideas and through dot voting we agreed that: 1) profile personalisation needed to be intuitive and easy to use 2) exploring relevant content should be easily accessible for listeners 3) explore chat features to make the broadcaster/listener interaction engaging and fun 4) display the showreel content so it’s more accessible to the listener.
Feature Prioritisation
To prioritise the features we wanted to include, found on the discovery phase and generated in the design studio, we placed them on a quadrant matrix chart to help us avoid unnecessary work and to achieve a minimum viable product. Allowing us to user test and obtain feedback.
Deliver
Testing and Iterating
On the final stage of the design process we did 3 rounds of testing with 8 different users, increasing the level of fidelity, detail and functionality on every round. We applied the tested users’ feedback for every iteration as changes on lower fidelity prototypes are easy and fast to implement. After the 3 rounds of testing we started working on the final UI design.
Broadcaster Profile Personalisation
Allowing broadcasters to personalise some of the profile page features, will make the broadcaster more appealing and memorable to potential listeners.
To help locate the features that can be personalised and to indicate an action we added specific icons.
Features: Profile image, banner image, profile name, program upcoming events, broadcaster trailer, choose recorded broadcasts for the showreel, add Bio and links to social media platforms.
Listener Onboarding Process
The onboarding process was not a part of the original brief but we wanted to offer curated content to the listeners. We decided to add the option to select specific content on the sign up process so it is easier to set recommendations for the user.
Listener Exploration
Different categories on the landing page will help to make content accessible and easy to explore.
Priorities: live broadcasts, differentiate Broadcasters (people) with squares and broadcasts (shows) with circles, display relevant information like the number of listeners to facilitate and identify content.
Live Chat Interaction
Display clear information and facilitate the connection between listener and broadcaster with the like and follow functions will generate interaction and help grow Mixlr’s community feel.
To enhance the engagement between broadcaster and listener and to improve the chat functionality we added the option to send reactions and emojis during live shows.
Prototype
We decided to focus on a responsive web design with a mobile first approach.
Listener Scenario
Sue, the listener, found a link to Antonio’s live broadcast. She wants to discover live content to grow her confidence on Mixlr and engage with the broadcaster.
Broadcaster Scenario
For the second part of the prototype we will take Antonio’s role as the broadcaster. He wants to personalise his broadcaster page to stand out, grow an audience and make his profile page more appealing to listeners.
Responsive Web Design
Next Steps
Finally, and as suggested next steps, we would like to:
- conduct further design studios to incorporate more from Mixlr’s branding into the final UI focusing on AAA accessibility.
- Prioritise information hierarchy within the menus.
- Complete more tests with Mixlr’s users.
