The MAD Mix App
An exploration of extending an existing website into a mobile app
The MAD Mix is an existing site that I’m the co-founder of where it’s a platform for youth 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.
Client: Malick Ba, Co-Founder at The MAD Mix
Project Length: 3 Weeks
Role: UX/UI Design, Brand Design, Prototyping
Tools: Sketch, InVision, Photoshop
The MAD Mix app was created purely as a concept and a way to boost engagement and repeated use amongst their users
01: Strategy & Research
Increase views on different channels of content and create periodically returning consumers.
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. I went into the survey with a few 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
Through the responses, I was able to draw the following insights:
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 Am I Designing For?
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.
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, it guided the need for a design that consolidates the different channels of content.
Getting a sense of which other apps and services Sean uses was helpful because it narrowed down every possible news related app out there. I focused primarily on Business Insider, AdWeek, and Twitter to get a sense of what they were doing right, and where they fell short in terms of fulfilling Sean’s needs.
An online publication centred around the latest in creativity, tech, and the ad industry.
A business news site covering politics, finance, tech,
An online news and social networking site
From there, I did an even deeper dive into competitors that offered unique elements on their mobile apps as inspiration. I narrowed in on Business Insider, Flipboard, ComplexCon, and Barstool Sports. The reason being these apps showcased a consolidation of article, video, and podcast content.
What Does Sean Want to Do?
Out of all of Sean’s goals, it was most important to focus on the following as they would also achieve The MAD Mix’ business goal.
Relevant News: “As a user I want to sort out information I’m interested in so that I don’t waste time with irrelevant content.”
Content Location: “As a user I want to access the different content from The MAD Mix in one central location so that I don’t have to look in different areas.”
Staying up-to-date: “As a user I want to be notified of new content from The MAD Mix so I don’t miss anything.”
Current 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.
Current Site Map
Through discussions with Malick (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.
Client Feedback Round 1
Before I moved on to sketching, I wanted to ensure all of the strategy work was approved. I put the information up to this point in a deck and presented it to Malick. You can view the first deck I shared here
All of the client’s points made sense and we were aligned with a direction for the prototype. Given his comments on the notifications, I decided to restructure the task flow so that users are prompted to enable push notifications earlier.
Sketches & Wireframes
I started with paper and pen sketching to quickly lay out information and a structure of the content. I laid out sketches for the main feed, article page, video page, and podcast page to start.
Once I had the sketching done, I used Sketch to develop the digital wireframes and InVision to build out the first prototype. The wireframes were built to a high fidelity so they were in place to test the structure and flow with users, as well as present to client.
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
Client Feedback Round 2
Once again, I gathered the usability testing insights and the prototype and presented them both to the client to get sign-off before adding the UI elements. Overall the comments were helpful as they pointed out a clear element missing on the videos page that was not caught in the usability testing.
UI & Visuals
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).
Below are the HI-FI screens
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.
In the final presentation with Malick, the prototype was approved with the request to work on slight copy tweaks together. Next steps would be the following:
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!
Design is where creativity, strategy, and psychology meet.
My portfolio is where we meet. Connect with me on one of the platforms below.