Master & Dynamic: A fictitious mobile app for my MW07 GO
An idea for a nonexistent app born from my trip to the bathroom.
I decided to create my first pet project: To design a nonexistent app for my beloved Master & Dynamics MW07 Go true wireless earbuds.
Now, M&D does have a mobile app for the newer MW08 series of earbuds, but I have not seen or used it. My MW07 Go also features no software support from an app, so this pet project will be me play acting as a user and product designer.
Let’s go forth and begin!
Step 1: Dream it
The first step I took actually happened before the conceptualisation of this pet project. I… basically had a random thought when I entered the shower one night. I pictured my earbuds (why am I thinking of my earbuds in the shower?) appearing on my phone, all scratch-free and sleek, floating on a white background with soft shadows. Wow! That is cool.
I wasted no time after I got out of the shower to jot down how it appeared in my day dream:
So at that point, this was it. Nothing more. That was the visual I had in mind, along with some animation of the earbuds moving up and down when the app was loaded.
But could not be. This idea had zero substance and just a visionary art direction. I needed some real usable features. That was when I began an interview with… Nick. Yeah, myself.
Step 1: Define the ‘why’
This project cannot happen without a reason, even though I just mentioned above that it was born out of a trip to the bathroom. Nevertheless, it is important to start with why, define a proper context and also objectives the app should accomplish.
I used my methodology of writing two separate objectives:
Overall objective
To create a high fidelity proof-of-concept for a brand new (albeit fictitious) M&D mobile app based on a preset list of user ‘wants’.
Design objective
Utilise contemporary minimalistic design language from the conceptual sketch and matching it with M&D’s brand to create a sleek, classy user interface.
Step 2: Design the Information Architecture
Diverge
“So Nick, imagine if you snapped your fingers and woke up with an app on your phone that lets you control your MW07 Go. What will the app do?”
Loosely based on a double-diamond methodology, I began by diverging and throwing ideas onto my digital white board.
I jotted down a list of possible features that might be useful for the first version of my M&D app. I then group them first by what is already on my concept piece, and what isn’t.
Converge
The next step will be to design the information architecture so I could ensure the optimal number of clicks to access any one item. As a rule-of-thumb, nothing should be more than 3 clicks away.
First, I grouped them into logical buckets. This method of grouping was really rational in my opinion, with no consideration on the frequency of use or other factors yet.
Next, more factors were thrown into the cauldron to be considered, which saw quite significant shifting of the menu items, and the first semblance of the information architecture started to take shape.
More often than not, IAs are not created from one single perspective. They have to consider how certain information, though rational to group together, might be a pain to the ease of access for users.
Afterall, at the end of the day, humans can be irrational.
In the case of my M&D app, I used a simple matrix to further group the different pages into the frequency of usage versus how device specific it would be.
The objective of this step was to help inform the hierarchy of a particular page. Actions that are high in frequency would require much lesser clicks to access (e.g. `Turn on/off Active Noise Cancellation` should not be too hidden in the menus), while something that is highly device specific should likely be located by drilling into a device’s sub-menu (e.g. a device’s firmware version).
I was then ready to start forming the proper IA for the app. However, it was during this process that I encountered a small problem with the Home page IA.
My original idea was to separate the key menu items into Home, Device Actions, Account, and Support. However, there was much device-specific information and actions that needed to be easily accessible from the Home page.
Therefore, for a clearer picture, I rearranged Home and Device Actions into Device Level 1, which gives me at-a-glance information about my current device, along with any quick actions if needed. Then, a Device Level 2 would contain more in-depth menu items and actions for any particular device.
Information architecture v1.0
Step 3: Diverge (Design)
With the IA firmed up, I was ready to revisit the app wireframes to begin adding in the missing features from the initial concept piece.
During this exercise, I took the chance to share the wireframes with a few peers to gather some valuable feedback, which helped to inform and refine and reiterate the designs.
Further updates will be coming really soon!
*Note: This is an entirely fictional project that is not related to or sanctioned by Master & Dynamic in any way. There is an actual M&D app that is for their newer MW08 device models that is available today.
