Designing a BGM, radio & digital signage platform from scratch

Maestro's Inception ...

Back in mid-2013, my employer decided to embark on a incredible journey, creating a complete end-to-end multimedia platform that would manage, deliver and publish music, radio and digital signage from one centralized platform - "Maestro".

Strapped for resources, we were bootstrapping the product from the day one. Developing solely in-house, we had a team of two, myself and one other software developer. My role was to design the entire product from concept to delivery. This involved everything and anything related to software design.

Both my colleague and I were thrown in the deep end, having to wear many hats on a daily basis. We were constantly learning new technologies, frameworks, trends, languages ​​... the list goes on, all at lightening pace!

If you don’t swim, you sink!

Product research, user research, testing, UX / UI design, wireframing, prototyping, interaction / motion design, front-end development, CSS frameworks, app platforms, server stacks, database architecture, branding, demoing, pitching were just some of my responsibilities. I guess you could call me an "intrapreneur" creating a new business inside an already operating business.

This story will look back at the challenges faced while creating software from scratch, paying particular attention to my design process and how the product has changed in the past 2 years - from concept to MVP, to where we are today.

Notes: I will not cover the ins and outs of how the product actually functions, merely, this will go into how my design thinking and language has changed over time.

In the beginning ...

Maestro's first port-of-call was to understand what was actually required functionally. Identifying exactly what the senior team such as the CEO, VPs and client managers envisioned for the product. To do this stakeholder interviews and observations were held to truly understand how BGM , radio and digital signage was managed internally.

At the same time, we researched competing products in the market paying attention to basic functionalities and process management. This enabled us to conceptually map a mental picture of how Maestro could be pieced in a logical, sequential manner.

From this we collated our own list of functionalities and were able to split Maestro into two distinct areas:

  1. Maestro CMS: Web/mobile application for managing music schedules, signage sequences, timetables, categories, media libraries and users.
  2. Maestro player (formerly Maestro Caster): Desktop application that runs on micro PCs out in the field (whether in-store or in radio stations). The player communicates with the CMS at all times providing real-time updates to music schedules & signage sequences. These are then published through store speakers and signage screens all in real-time.

A complex workflow from the outset, not just from a design point-of-view but also programmatically and logistically.

Next, we put our research hats on and started searching what was occurring in the open source community, identifying new and upcoming frameworks/languages ​​that would really help with our developments. We dabbled, pryed and tested with many back-end and front-end frameworks. Some very obscure and some very popular, but nonetheless it gave us a firm grounding on how we should actually build Maestro.

Whilst my rockstar colleague was handling the logistical operations, i.e. servers, scripts, database architecture, AWS etc. I began by sketching and wireframing together a first look Maestro. Low fidelity mockups established quick feedback from stakeholders, which really enabled me to nail down into the specific functional requirements.

Balsamiq became my best friend at this stage, constantly creating new layouts, wireframes, personas, user flows and taxonomies.

I was also able to create a Maestro identity, designing a logo, icons, color palettes and branding guideline.

1st logo decided by the team
Version 1: Balsamiq mockups of the Maestro CMS

Going from Balsamiq to Photoshop was a breeze as I already had a clear vision on structure and layout. I took inspiration from around the web such as dribbble and behance, noting popular web applications.

This is my favourite part of the design process as I can really express my creativity.

These wireframes were transformed into pixel perfect designs using Photoshop. The user-interface was built on a 12-grid system similar to the Bootstrap framework. This allowed me to transition easily into HTML, CSS & JavaScript. At the time, I didn’t realize pixel-perfect designs were necessary, as later I would continuously switch between code & Photoshop, testing usability and productivity. Sometimes I would dive straight into the code if I had an idea or hunch, other times my PSD's wouldn’t work as it would be too difficult to code or not modular in approach.

Some may argue that this isn’t the best approach, however, given our small team and resources it worked quite well.

It's something I've come to realize that when creating a V1 in a small team, it’s not necessarily doing things by the book, but finding a process that works best for your team.
A few Balsamiq mocks from V1 Maestro Caster
Version 1: User Interface design of the Maestro Player (formerly Maestro Caster)

User testing

Once we had a first look Maestro, the next step was to test on actual users and receive feedback. We created clickable prototypes enabling internal staff to comment and critique.

This step was imperative as we needed to clarify if staff members would actual find the product useful.

Some minor UI points arose e.g. button placements, short-keys, drag n drop items, however, none that would set back our development too much. We jumped straight back into our prototypes and amended as needed. Another round of testing followed to clarify user acceptance.

Our goal was to ensure that we had a fast, simple and most of all productive user experience.

New reworked Maestro CMS to focus on music Schedule and Cart management
UI Design, notice layout changes, color palettes stay the same.

Prott Prototype:

Design Ethos

By shadowing the variety of staff who worked on radio automation and BGM a few hours each day, we were able to identify how they make their workflows as productive as possible.

This helped define our design ethos:

"Deliver a product that offers maximum productivity for all staff at all times."

As this was an internal project from the outset, initially we were not aiming at the mass market meaning we could pivot on our functional spec to cater for our staffs needs - mainly as they would be the core users from day 1.

It's quite similar to how Basecamp & Slack started out — they noticed an internal problem… prototyped to solve that problem, then developed specifically to solve that problem.

Mid 2014 - MVP | Version 1

My colleague and I were moving as fast as we could and managed to quickly put together a fully coded Maestro V1, utilizing: Meteor JS as the backend framework, MongoDB for database, Amazon Web Services for cloud infrastructure and Bootstrap for the responsive front-end. Here we were able to deploy a web app optimized for mobile and tablet use.

Later, we would have a working version on native iOS and Android through Meteor’s Cordova atmosphere package.

Web App designs
Mobile & Tablet - Responsive Versions

Being agile and lean, it was our goal to get working software deployed as quickly as possible, after all we had clients waiting! Sure, there were bugs, clunky code in places and user-flows I thought could be better, but that‘s where iteration comes next.

We spent a good deal of time cleaning up bugs and improving performance, particularly app speed. For example, when retrieving thousands of data types in the media library (mp3, mp4, mov etc) the database would take an extremely long time to render, partly as we were not utilizing lazy-loading on the front-end. Once fixed, it significantly improved app speed and overall user productivity.

Mid-2014 - Bootstrap to Material

Around this time Google declared their "Material Design" framework/language. Being a avid Google user, I really liked how they approached a "new design thinking".

New Maestro Color Palette

With thousands of sites adopting flat design along with Bootstrap web applications, I found it hard to distinguish ourselves from the startup design ecosystem. I saw this as an opportunity to re-envision Maestro, creating new branding guidelines, color palettes and logo.

Maestro Web App Redesign

To dip our feet in the water, we decided to focus on the Web app first, mainly as 80% of our users were coming from desktop.

Revised Maestro Logo

During this redesign, we started to introduce new features too, including: media manager, device manager, digital signage sequence editor, category manager, show editor, team manager, user permissions, collaboration & sharing.

We were already deployed in several businesses too, so we were a support team on top - legacy design still needed to be upheld.

See below for a few screenshots of how the web app interface was overhauled utilizing Material Design.

Maestro Material Redesign
As these designs are made with responsive properties in mind, we aim to update our tablet and mobile experiences soon (hopefully end of 2015).

Early 2015: Prototyping, Interaction Design, Motion

By introducing the Material Design philosophy it really helped improve design continuity within the Maestro web app. I began to consider motion and its influence on the overall design as well as new UI patterns. Having only used After Effects sparingly I found it to be an invaluable tool for motion design - Playing with easing effects, custom bezier curves etc. I found great inspiration from and tutorials from

Meaningful motion introducing Google's Material Design to Maestro Web App

I love to try new tools and see if they can enhance my design workflow. This past year has seen the rise in prototyping apps and I for one have tested probably 99.9% of them (InVision, Framer.js, Marvel,, the list goes on and on). The two I really came to like is Prott and Atomic. They are both very simple and easy to use, especially when adding motion to the mix. This helped especially when prototyping with Maestro Material Design, the tools enabled me to step away from After Effects as it can be quite time consuming and non-interactive.

Atomic prototype:

Mid-2015: Maestro Live

At this time, we introduced a new product called "Maestro Live". This was created specifically for Live DJ's. An audio player and management tool for creating custom playlists, voice tracks and breaks, all being tied into the Maestro CMS.

When designing I tried to keep the identity, look and feel similar to our Material design web app, mainly to add consistency and user familiarity. We're still prototyping with different user-flows and taxonomies, but see below for a few early-stage UI visuals.

Maestro Live - Large View
Mini View
Maestro Live - Light Skin

TODAY: Programming and Newer Developments

As we have completed overhauled the web app experience we have also started to incorporate newer technologies and frameworks, one of which is Google's Project Polymer and Web Components. With the increasing workflow piling on top, it was only a matter of time before we started outsourcing front-end development.

Web components compliments our vision for managing code sustainability. We can direct front-end devs to focus on core specific areas that can be embedded into our app in stages. It really helps prioritizing deliverables and managing our product and sprint backlogs in an agile manner.

We require freelancers and local team members to commit code into BitBucket daily. We update our Trello and Hackpad for bugs which keeps everyone on the same page.

It can be a challenge implementing agile methodologies through digital means, especially with developers dotted around different timezones. However, we have a set of pre-defined internal processes in place, and it seems to be working! We are yet to miss a sprint delivery date!

Looking Back ...

The past 2-years has been a rollercoaster of a ride. Learning everything from design to code to databases. Some things I never thought I'd be able to wrap my head around, although, putting myself in the deep end, and motivating myself to learn has truly been an eye-opening experience. Sure some frustrations and mentorship could have helped, but I can not thank the online community enough. There is so much inspiration and great people to learn from. Local design events held in Tokyo have helped tremendously too, it's great to step outside my bubble, connect and learn how others create software.

Learning quickly is definitely one major skill I've acquired!

It's interesting to see how design trends have changed over the past 2 years, and how I've changed along with them. My mentality to the user has only strengthened, always asking questions, analyzing and rectifying the tiniest of problems.

I always want to delight the user! Making any task pleasurable, pain-free and productive to use (however simple or complex). I'm sure this mentality will follow me for the foreseeable future, whatever product I’m producing.

Product Growth

Maestro’s client portfolio is growing steadily having already acquired national retail, radio and hospitality partners. Our internal team are still the core users, however, it has increased productivity 10-fold from what they were using before. We are also prototyping with some new features that will make it easier for clients to amend music and signage schedules directly. All in all, I’m happy with the newly formed business unit and how it is contributing to company’s bottom line.

Personal Development

Designing and developing Maestro from scratch has really improved my overall UX/UI expertise. Before this process began, I really wanted to experience the whole design process, gaining insight into areas I lacked knowledge - particularly user research and testing.

I also had the chance to dive into areas that I’d had no experience in whatsoever such as: server-side infrastructure and JavaScript, database structures and APIs, testing frameworks and performance managers.

I think to improve in software development you need to challenge yourself and step outside your comfort zone. I may not be an expert in all of these areas but I have a gained a firm understanding and knowledge on how tackle problems in the future.

2015 and beyond

Going into the latter stages of 2015 I look forward to iterating Maestro’s design further, and am open to other opportunities that may come my way.

Thus far, I have thoroughly enjoyed the process and feel adeptly equipped to tackle any new software development, design or programming in the future.