Redesigning Mixlr Mobile App UI to be engaging, impactful, clean and airy. Making the user experience of the design enjoyable and soothing

About Mixlr

Mixlr is a simple way to share live audio online. Broadcast using any source and invite people to listen and chat in real-time

Project Details

Role: UI, Discovery, Hi-fidelity Designs, Redesign, Exploration Tools: Figma, Affinity Designer, Sketchbook & Pen

Understanding the challenges

Mixlr is Professional live audio that allows users to listen and broadcast audio. The problem here is the user interface design needs to be better, consistent, personalized and engaging to users.

*******

This case study is for "The Listen" Part of Mixlr that is free for life for end users

Target Audience Want (Persona)

Visual Typography & Color

Bold and ease to read font weight to highlight important information... To make the app pop. I choose bold colours to draw attention and light colours to complement them.

Design decisions
Onboarding Page with CTAs & Sign-In Page

Aside from the UI that needs to be improved, Mixlr is a straightforward and easy-to-use app. I think it follows the 3-click UX Rule ( Heuristic that says that no page should take more than 3 clicks to access - That's if you add the channel to Following)

The design approach I take here is to keep the ease and straightforwardness of the app and improve the UI. The Tagline/Slogan comes in handle here onboarding users in a first-look tour approach and accompanied with images which is a powerful way to capture users' attention (Elaborating the Slogan "Listen & Broadcast without limit")

*******

The onboarding Tagline and image can be used by Mixlr to advertise features, channels and a lot more. "It also allows user to Perform actions like Listen or Broadcast or Login/Signing - Mixlr enable users to listen without registering (A year plus without registering "No ability to chat through")

Before

After


Interest Page, Homepage And Discovery Page

Homepage - The homepage redesign here helps offers users options for creating a more personalised experience while using the app. Returning users can easily see Channel they subscribe to and can also jump back to listening to recently played podcasts/channels.

Discovery page - This helps users explore the overwhelming amount of channels/podcasts on Mixlr. Added Tags to help user filter and explore - this is critical on a mobile interface where limited screen real estate requires different approaches.

Interest page - New users are shown the interest page after registering where they can select what interests them. This is used to curate their homepage.

Before

After


Chat page, Now playing page And Lyrics/Caption page(Accessibility Aid for deaf and hard hearing people)

Now listening page - The Now listening page provides users with options like pause, play, rewind, forward, chat, download, share and like. Additionally, this page can be minimized to allow users to view other screens while listening to audio content.

Lyrics/Caption page - Accessibility Aid for deaf and people with hearing difficulties.

Before

After


Channel/Podcast page (Dedicated pages for Showreels, About, Event And Contacts Page)

Channel/podcast page - The redesign here helped declutter information overload by simplifying and grouping relevant information to create a good user experience interface.

The Showreel - Session of the app contains archive/past shows of the session of the published channels that broadcast. " Harvesters, for example, have 300+ " Using Infinite scroll without the ability to filter by (Months, days, Weeks) or the search box is bad UX which the redesign corrected.

The Event page - Designing a dedicated event page allows channels and users to communicate better. Channels/Podcasts can communicate upcoming events and users can explore events and click notify to be notified when the events begin.

The About page - Detailed insight/story into the channel/podcast

Before

After


Exploring Dark mode & Channel/Podcast thumbnail color glow based on the Artwork/Picture

Back Home