The mobile result of a Desktop-First approach: Way too many panels!
William Harvey
UX designer
MyMelo
Music Streaming, Event Ticketing, Music Distribution, for Radio
Role
UX Director
UI/IxD
Branding
Database Design
UI/IxD
Branding
Database Design
Team
3 Project Managers
1 Designer (me)
15 Developers
5 QA Engineers
1 Designer (me)
15 Developers
5 QA Engineers
Tools
Sketch & Framer
InVision & Zeplin, Photoshop
Trello
Built in React
InVision & Zeplin, Photoshop
Trello
Built in React
Goal
Launch 1.0 as Industry First
Gather Feedback
Launch 2.0
Gain Traction
Gather Feedback
Launch 2.0
Gain Traction
Overview
MyMelo is an audience engagement platform that facilitates the connections that unite Stations, Fans, Content Producers, Local Businesses and Advertisers within Radio’s Ecosystem. The system is packaged as a CMS that Radio Stations can customize and embed into their websites as a progressive web application.
I began designs in 2016, launched in 2018, and currently reaches over 600k users as of 2020.
Target Audience
The MyMelo system has 4 user types;
End-Users (Radio Station Listeners) *this case study will focus mostly on End-Users
Artist Admin (Artists and Record Labels using our distribution and ad platform)
Clients (Radio Station Owners/Admin/Advertisers)
and Super Admin (internal MyMelo employees)
End-Users will be terrestrial Radio Station listeners, with equally heavy listenership with both Millennial and Boomer Generations, although less tech savvy, they are devoted to their local radio station. MyMelo seeks to introduce this untapped market, and bring them to the digital streaming age.
Business Challenge
The challenge was to re-engage radio station site visitors, and completely re-imagine the purpose of visiting a radio station website. Provide a new entry point for Indie Artists & Record labels.
User Flow
End Users (Radio Station listeners) enter from a link to a concert, album, song, or Artist. The initial design goal was to maintain a level of simplicity for our first time users, and progressively display more options as the user becomes more familiar with the service.
Provide users a personal experience with recommendations based on the current song playing, their listening behavior, and location.
Provide a low pressure signup by saving user behavior in Cookies, and provoke signup only when the user is ready to check out.
Artists & Record Labels enter from the radio station website or from MyMelo.com to instantly sign up as a content provider.
Advertisers enter from MyMelo.com via special Invite. Can begin matching their ads to Artists, Albums, Events.
End-User Wireframes
Key Design Decisions For 1.0
Responsive Support - Desktop First
A multi-section panel separating the Music Explorer into 5 sections: Music Transport (player), Navigation, Selected Item, List Results, & Header. This gave room for any selected item to display its results, no matter the type of selected item it is, leaving the music player and the navigation panel fully visible.
Strong Station Branding
Matching station branding with the aesthetics of the city. Customizable elements include; a background image, Typeface, Icon-Button-Panel Color Scheme, and Logo placement. Separate clickable colors from highlight colors.
Simplify Feature Entry Points
Separate features to allow customization of features for Radio Stations, and easy entry from the station website.
Text Field Length
After testing real-world music data, we found length of titles to vary, so we decided to lock the width of every text field and auto-scroll the text if the user hovered-over the text with a mouse. This would later become troublesome on our Mobile layout.
Standout Mistakes
After the initial launch, we gained valuable feedback from users and stakeholders. We found the following issues to be of most importance:
Mobile Layout resulted in hidden panels outside of viewable area.
Search results were difficult to maneuver.
Clients wanted more customization of the UI, felt their branding wasn't noticeable enough.
Iterative Improvements - Going Mobile-First:
After gathering feedback.
I took a mobile-first approach
Designed and prototype simultaneously with Framer, while testing scrollable areas using real data with React code to design beautiful animations using dynamic layout rules.
Expanded progressive disclosure techniques by eliminating panels until the user begins using them, such as hiding the Music Player until the user plays a song.
Improved branding by displaying a large logo on the landing page, but then progressively shrinking the logo as the user becomes more involved with the platform.
Providing too many customization options could result in poor design (remember custom Myspace pages?). I eliminated the ability to customize a color scheme and went with a simple white icon scheme, allowing for just a background image and a logo.
Placed the most important links into a navigation bar at the top, and the less important links into a collapsable Menu. We pinned the Music Player to the bottom of the screen, allowing for instant access to the player from anywhere within the app.
Implemented interactive scrolling techniques, so that scrolling will begin to hide UI elements until they're needed.
Placed the search function into its own separate page, so one search query will result in all possible result types one one panel.
Branding
I was given full creative reign for the Logo creation, this allowed for unhindered imagination. We went back and fourth on Font Type and once the type was chosen, it was time to work on the logo's icon. And something magical happened... Allow me to introduce, The Melo Monster!! The mascot of MyMelo. This monster was born in a Franeknstien-esque fashion, everything came together rather naturally. I combined the middle 'M' with the traditional Radio Boombox, but once I added the dials for eyes, and a tuning bar for a tooth, he came to life!! I topped him off with a Widows Peak and the Monster really came out in him. The Melo Monster works great for every situation! He even gives the company speeches!
Lessons Learned
MyMelo was definitely the largest design project I have ever endured. With the help of an incredible veteran executive team, we took this project from ideation, all the way to a 2.0 design, while reaching 600k+ users. Having the opportunity to wear many hats in a startup allowed me to be involved with every step of the process, from Branding, to Database design.
I learned:
Always separate Mobile designs from Desktop.
Always check in for feedback. Don't assume you are on the correct course.
The root from where feedback originates, is usually deeper than where the subject can pin-point.
And finally, I learned that the best way to improve my design is to move closer to code. So I spent a year learning React. What resulted from that was a powerful new discovery, that simultaneous prototyping and iterative design will give you just the right amount of skill to be dangerous, and will make you a better communicator between design and development.
I love helping artists connect with their fans.
600k+
Visitors
380
Screens
50
Radio Stations Launched