Mixlr: A UX Case Study
Enhancing the broadcasting experience
Overview
The Team
Alongside myself was Chris Wellmar and Faisal Rasouli.
My role
As a group we were researchers, UX and UI designers. My main responsibilities included project management, competitive research, group motivator, user interviewer, low fidelity sketching, medium and high fidelity wireframes and final presentation layout.
The Project
Mixlr is a live audio broadcasting tool which makes it easy for people to stream content. However, with a maturing interface, it was time for us to aid in creating the best online tool available to audio content creators.
How would we do this, you may ask? Even if you’re not, we used a 4 step process known as the double diamond. This would help us find a solution to Mixlr’s brief.
Speaking of which, the brief was based around three areas:
- Discovery (how could broadcasters recruit more listeners?).
- Retention (how could we increase engagement between broadcasters and listeners?).
- Promotion (what tools could broadcasters use to make their profiles stand out and reach out to a wider audience?).
Phase 1: Discover
Looking at competitors, getting users to test the existing Mixlr platform and conducting 12 interviews.
Analysing Mixlr’s Competition
The first port of call was to conduct research into both direct and indirect competitors of Mixlr. After thorough research I produced a feature analysis table:
The main research findings showed:
- “Recommended” sections were one of the main ways other tools allowed users to find more broadcasters and content.
- When it came to profile personalisation, having editable areas in large, clearly laid out blocks was key.
- Competitors really highlighted social media as the way to attract listeners and gain a wider audience.
How do users feel when listening on Mixlr?
To do as much in-depth research as possible, we all signed up to Mixlr. This allowed us to use the functionalities as both broadcasters and listeners.
My teammate, Chris, put together a great 30 minute live broadcast. I arranged a number of people to join, use Mixlr’s features and provide feedback.
The key insights we gained from this were:
- The comments section dominated the screen, drawing the eye away from the broadcaster’s profile.
- When users tried to comment or like the broadcast, they were taken away from the listening screen and prompted to sign up, which also stopped the broadcast from playing.
- Users were unable to interact directly with other users or the broadcaster via threads.
Getting further insights from 12 user interviews
Things were going well — we were working well as a group and I was playing a key part in motivating my teammates, setting goals for each evening to help get ahead of the game.
To gain some in-depth insights we had to find people to interview, both as listeners and broadcasters. As live broadcasting is a fairly niche area some concern grew over whether we would be able to achieve the best insights.
An initial screener survey helped capture the right audience. 24 hours and 70 screener survey responses later, I was incredibly happy. 12 interviews were secured with broadcasters and regular listeners using similar products!
These 12 interviews gave great insights. Affinity mapping was used to organise insights into categories and highlighted the following:
- Listeners would often refer to “recommended for you” when finding new content.
- Products that had a variety of content were more popular.
- Allowing broadcasters to include large visual elements, clear bios and creating unique selling points was key.
- Being able to filter content by categorisation.
- Listeners appreciated receiving notifications when a broadcaster was going live.
Phase 2: Define
Initial research complete, we dived into broadcaster and listener journeys, experience maps, personas, scenarios and problem statements.
What journeys do Broadcasters and Listeners take?
User journeys and experience mapping techniques were used to highlight the main pain points experienced by both broadcasters and listeners on Mixlr. These included:
- Underwhelming options when personalising their profile page.
- When it came to scheduling a live event to send out to listeners they were unable to personalise it.
The main pain points from a listening perspective on Mixlr:
- Becoming irritated when trying to comment during a broadcast and being taken out of the experience in order to sign up.
- When it came to finding Showreels (broadcasts which have been uploaded post recording), it was hard for users to locate these.
Capturing all our research and insights into Persona’s
To summarise all the key findings, two personas were produced. Yes, two! The aim was to cover both broadcaster and listener pain points to provide the ultimate experience for both parties.
So, meet live broadcaster, Antonio:
And now welcome our listener, Sue:
What scenarios and problems do our personas face?
Generating a problem for Antonio and Sue helped provide context to their journeys.
First, broadcaster Antonio’s Scenario and Problem Statement:
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.
Then it was the turn of Sue.
Problem Statement: Sue needs a way to explore live content that interests her so that she feels more confident engaging with the broadcaster.
Phase 3: Develop
Conducting a Design Studio in order to begin prototyping.
Design Studio
To update the clients at Mixlr on our progress so far and get their input we organised a Design Studio.
This was to help explore a set of ‘how might we statements’ within a short amount of time. It incorporated brainstorming, critique, and prioritisation into a two hour session.
So, how might we ‘increase the engagement between broadcasters and listeners, before, during and after the broadcast?’
And, how might we ‘create more features to make a broadcasters profile stand out?’
Many design solutions were produced with some really cool ideas such as being able to speak to a broadcaster live, including a trailer on the broadcaster profile and including their top played broadcasts for users to easily find. It was now time to move onto the next phase and begin prototyping!
Phase 4: Deliver
Creating initial sketched wireframes before moving onto mid and high-fidelity prototypes.
Low-Fidelity wireframing
To get ahead in the process I took the lead to produce some very basic, sketched wireframes. My research at the start had given me a good idea of what a broadcaster and listener journey looked like using similar products. I took initiative here to help myself learn, as much as anything, about new features that could be included and how the UI of Mixlr could be updated.
Once completed, 8 user tests were conducted. This provided valuable feedback to allowed quick iterations. Changes were made and the wireframes were tested again and again.
Moving to mid-fidelity
Once all the feedback had been recorded, using Figma, I began to produce the mid-fidelity wireframes.
Testing the mid-fidelity highlighted some issues, including confusion around wording and icons. The following changes were made and an updated mid-fidelity prototype was produced:
- Introducing symbols, such as camera and pencil icons, making it more obvious a profile could be edited.
2. Initially, two different ideas for onboarding screens led to a debate over which would be best. I suggested conducting A/B testing to see which screen had more success. Ultimately, users preferred a screen with images over a swipe option.
3. Users were confused about the meaning of the ‘live’ icon at the top right of the screen — I altered the positioning and wording to indicate which broadcasters were live.
4. The media controls at the bottom of the screen were confusing. These were updated to match similar products.
With changes had made, it was time for us to progress to the high-fidelity prototype!
High-Fidelity Prototype
Below you can see a the prototype walkthrough for the broadcaster screens as Antonio updating his profile.
Mockups were also produced to show how Mixlr would look for both tablet and desktop.
Suggested Next Steps
If we were to have more time for this project, our next steps would include:
- Conducting more design studios to further enhance the aesthetics of Mixlr.
- Looking at hierarchy within the burger menu.
- Conducting user testing with Mixlr users.
- Further research into the accessibility of Mixlr.
Conclusion
Overall, a fascinating experience. My incredibly basic knowledge of live broadcasting was definitely enhanced throughout the research phase and continued to grow throughout the whole process. Using the double diamond to aid design decisions and, ultimately, produce a product in such a short space of time is something myself and my team were incredibly proud of. Being able to match Mixlr’s brief by enhancing engagement between broadcasters and listeners through an improved comments section, and providing more profile personalisation by adding trailers, ‘top broadcasts’, being able to follow other broadcasters among other new features, was amazing!
