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:
- Maestro CMS: Web/mobile application for managing music schedules, signage sequences, timetables, categories, media libraries and users.
- 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.
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.
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.
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.
Prott Prototype: https://prottapp.com/p/a15b40#/
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.
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".
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.
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.
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 materialup.com and tutorials from uxinmotion.net.
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, Proto.io, 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: https://beta.atomic.io/d/23n3aVIGgqZe
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.
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.
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.
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.
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 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.