Redesigning The MAD Mix experience to extend to an app.
Extending an existing website that I manage with my colleague into a mobile app to be better positioned for our users.
Role: UX/UI Designer, Brand Designer
Timeline: 3 Weeks
Tools: Sketch, InVision, Photoshop
Goal: Design a mobile application for an existing website
First off, What's The MAD Mix?
The MAD Mix is an existing site and platform that I co-founded with a friend from college. It’s a platform for young marketers to engage and initiate discussions about the world in terms of pop-culture and trends from a marketing perspective. This is done through articles, interview videos, and a weekly podcast featuring guests within the marketing and advertising industry. The site can be viewed at www.themadmix.com.
The MAD Mix app was created purely as a concept and a way to boost engagement and repeated use amongst our users.
Problem
Low engagement - Users are not accessing content on a regular basis unless the internal members share the content on their own social profiles.
How Might We help boost consumption of content on The MAD Mix by better notifying users when new material is posted?
Business Goals
Increase views on different channels of content and create periodically returning consumers.
Research
I started this project by sharing a survey with users of The MAD Mix to get a sense of how they currently access the different content, who they are, their consumption levels, and other resources they use to access similar material. Here were some of my assumptions going into it:
Assumptions
Most of The MAD Mix users access content via mobile
Users are often unaware when new content is posted
The MAD Mix’ users range from 18-30 with an interest in advertising and marketing
My initial assumption was that most of the users accessed the content online. However, I was fairly surprised that 100% of users indicated they didn’t access any of the content through desktop. The client was also surprised that the engagement was as low as 3 times per month for each user
Who is the user?
After synthesizing the insights from the survey, I began building a user persona for the current user of The MAD Mix. This took in their current usage habits, pain points, goals, and motivations. From here, Sean Dennis was born.
These were some of the key takeaways from building the persona.
He uses The MAD Mix as well as other news apps to stay in the loop but he’s never really sure when The MAD Mix posts new material.
He also finds it challenging accessing their different content on multiple channels.
Through sharing this takeaway with the client (my colleague), it guided the need for a design that consolidates the different channels of content.
Aligning User Goals with Business Goals
Out of all of Sean’s goals, it was most important to focus on the following as it would simultaneously achieve The MAD Mix’ business goal.
Site Structure
Before I could build out the task flow, I laid out the current site map to visually display the different pages and flow users take to access content. After doing that, I wanted to do things a little differently for the mobile app experience. Merging the podcast on the app meant there needed to be a dedicated page for it. This is where I found it helpful to build out a mobile user flow for the site’s content if this app were to be built.
Through discussions with the client, we landed on showcasing the user accessing articles, videos, and a podcast episode for the core tasks. These would be the core functions of the prototype so it was crucial that they were all well demonstrated.
Early Sketches and Wireframes
I started with paper and pen sketching to quickly lay out information and form a structure for the content. I laid out sketches for the main feed, article page, video page, and podcast page to start.
User Testing
I did one round of usability testing with 6 users to find out if what I built made any sense. The good news is it did! With a 95% successful task completion, the usability testing validated that the designs were on the right track and provided key insights needed to make design changes. What I learned was that you should not compromise functionality for visual components.
For example, consolidating the core functions of a prototype within a hidden navigation icon can be challenging for new users. You can view the sessions output document here
Brand Elements and Final Screens
Now that the up front work has been established and the client is happy with the direction of the project, I set out to build the UI components. The MAD Mix already has somewhat of a design system in place with their colours, typography, and logos already determined. This helped as I didn’t have to start from scratch.
In terms of my approach to the visuals, I knew the main focus of the prototype would be the actual content from The MAD Mix which would result in different pictures of interview guests and images for articles with all sorts of colours used. With this in mind, it didn’t feel wise to fill the prototype with any other colours outside of The MAD Mix brand (Red, Black, White, Dark Grey).
Reflection and Next Steps
Including a client and working with them to set expectations and gather their goals and feedback was a helpful experience because it allowed me to get a more realistic sense of the work environment. My skills in account management definitely helped out in this area as I’m already in tune with client communication, building timelines, managing expectations, etc.
I shared the final design with another 5 users and the feedback overall was that the design was clean with a simple navigation, it was a streamlined approach, and a “solid app so far!”. In terms of user feedback, it was suggested to consider adding a footer for the FAQ section.
Next steps would be the following: Finalize copy, and Build remaining pages (About Us, Help, FAQ’s, etc)
Want to chat more about The MAD Mix app? Connect with me on one of the platforms below!