SIMPLE METRONOME

INTERFACE REDESIGN
PROJECT OVERVIEW
Simple Metronome is a basic metronome app with user interface issues. As a musician myself, my goal was to preserve its functionality while maximizing its simplicity, efficiency, and convenience.
MY ROLE
Analyzing, designing, and testing the user interface redesign.
THIS CASE STUDY CONTAINS
Analysis of Simple Metronome's problems

Solutions to those problems (showcased at end)

Insights gained from researching metronome apps

Design improvement shown through Heuristic Analysis
EFFICIENCY PROBLEM - BUTTON PLACEMENT
(1) The lower half of the screen is more accessible by the thumb of a one-handed user, and therefore should be reserved for the most important/frequent elements that users will interact with.
(2) The upper half of the screen, being harder to reach for one-handed users, especially with small hands and/or big phones, is a more fitting location for less important elements.
(1) These are the most important elements that users will interact with the most, and they are in the upper half of the screen where it's harder to reach.
(2) An independent volume slider in a basic metronome app isn't crucial, and it is taking up valuable real estate for more important elements.

(3) This Visual Click toggle is in the most valuable area at the bottom right of the phone screen. There are far more important buttons that could utilize that space.
EFFICIENCY PROBLEM - LACK OF OPTIONS
None of these settings menus provide any way for the user to navigate backward. If you want to navigate backward you have to exit out of settings, and re-open the main menu. This makes navigating the app much less efficient for the user.
FUNCTIONAL PROBLEM
(1) Difficult to slide thumb to edge with a phone case on. Basic functionality hampered by something that most people own and use with their phones.
(2) Without bending or removing my case, I wasn't able to go any lower than 22 BPM using the slider.
VISUAL PROBLEM - FEEDBACK
The dropdown menu provides no indication of which "First Beat Accent" setting is currently selected. This forces the user to guess when trying to make a change, as well as decreases the user's confidence that the app is actually doing what they want it to do.
VISUAL PROBLEM - FEEDBACK #2
(1) Visual Click toggle set to "off"
(2) Visual Click toggle set to "on"
In this app, Visual Click causes the screen to flash in sync with the beat of the metronome while it's playing. The thin line at the bottom of the button that switches between white and teal is too subtle of an indicator to act as feedback for this toggle. It can be easily missed, especially by someone who is color blind or has poor vision.
VISUAL PROBLEM - PROXIMITY
The dropdown menu indicator is too far away from "Select Favorite Tempo." Users may have trouble associating them. Proximity is one of the tools which should be utilized for related elements within an interface.
VISUAL PROBLEM - CONTRAST
The "Select Favorite Tempo" dropdown menu lacks any kind of clear contrast or separation to help the user focus on the menu. There's a tiny bit of dropped shadow at the bottom of it, but it's not enough. It blends in with everything else on the screen, muddling the user's perspective.
RESEARCHING OTHER MOBILE APPS
MY FINDINGS
There are many viable options for a well-designed metronome app, but for my current purposes and from what I researched, the main takeaways are:


A dial is a relevant/advantageous method of offering BPM control

Beat Accent settings work well as graphic visuals

Prioritize the controls that take up the bottom half of the screen

Too many controls can overwhelm the user and clutter up the screen

Make the primary functions of the app directly accessible from the main screen

Provide clear and deliberate feedback through the user interface with tools like: spacing, contrast, proximity, etc.
MY SOLUTION
HOME SCREEN
Before
After
BREAKDOWN
(1) "Select Sound" is now accessible from the home screen rather than having to navigate through the kebab menu. This simply increases efficiency with no downsides.

(2) "First Beat Accent" is now accessible from the home screen, and is represented with a simple graphic visual. This increases efficiency and also adds aesthetic value.

(3) Centered BPM display, and made it stand out a bit more. This helps to provide symmetry and balance to the interface.

(4) Relocated and redesigned the +/- tempo buttons, making them pop and stand out a bit more.

I relocated the Visual Click toggle to the settings menu. I also removed the volume slider, as it is unnecessary for a "simple metronome" app and takes up valuable space. The user can control volume through their phone's volume control. The use case for wanting to separately control volume on the metronome app and leave their phone's media volume a different level would be a very uncommon situation.
(5) Converted the BPM slider into a dial. This fixes the functional issue of not being able to reach the edges of the slider.

This also allows the user to be more precise in BPM adjustments due to the circular dial offering infinite movement in either direction. This means that increasing/decreasing by 1 BPM doesn't have to confined to a tiny amount that a fixed slider length provides.

And if the user needs to change the BPM drastically, spinning the dial is an intuitive motion which can cover a large amount of distance in a short amount of time.

(6) Three important buttons are located at the bottom of the screen, which provides easier access for one-handed users. Being that metronomes are typically used by musicians, they may often be holding an instrument in one hand and only have one hand for their phone. And using conventional symbols (heart/play button) rather than words to describe a button decreases clutter and cleans up the overall visual appeal.
SETTINGS MENU
Before
After
Settings menu now has contrast within/behind it, which gives the menu clarity and focus. Additionally, navigation has been made more efficient by including a back arrow in the settings menu and all subsequent menus.
SELECT SOUND MENU
Before
After
The Select Sound menu now has contrast within/behind it as well. Additionally, feedback is given to the user, indicating which sound is currently selected. This increases both efficiency and users' trust of the app.
FAVORITES MENU
Before
After
The Favorites menus have been combined into one menu which accomplishes both saving and applying your favorite BPMs. This simplifies the overall experience, having all Favorite-related user interactions be accessible from the same place in the app.
HEURISTIC ANALYSIS
IDENTIFY THE TARGET AUDIENCE
1. (75%) Musicians - professional, amateur, student, etc.

2. (20%) Music analysts - composing, producing, conducting, arranging, DJing, etc.
‍
3. (5%) Casual users - creating playlists, having fun with the metronome, etc.
IDENTIFY THE USER'S TASKS
1. Adjust BPM - Change tempo with +/- buttons, or use the dial. Tap the Play button.

2. Set BPM with Tap Tempo - Tap the "Tap" button as many times as necessary.

3. Save Favorite Tempo - Tap the Heart button. Type tempo name. Tap "Save."

4. Select Favorite Tempo - Tap the Heart button. Tap the desired saved tempo setting.

5. Set Beat Accent Setting - Slide finger on Beat Accent slider until desired setting has been reached.

6. Select Metronome Sound - Tap the current sound at top of screen. Tap desired sound.
IDENTIFY THE CRITERIA
Grouping
Efficiency - Priority 1

Learnability - Priority 3

Familiarity - Priority 3

Simplicity - Priority 3

Mapping - Priority 2

Motivation - Priority 2

Trust - Priority 2

Visibility - Priority 1
Weighing
Efficiency - 25%

Learnability - 0%

Familiarity - 10%

Simplicity - 0%

Mapping - 15%

Motivation - 15%

Trust - 10%

Visibility - 25%

Efficiency and Visibility are the two most important usability criteria here. Musicians, the primary target user group of Simple Metronome, depend on efficiency to maximize their playing/practice time. And because they are focused on practicing, we want to maximize how visible all of the data in the app is so that they can see everything easily in a glance.

Learnability and Simplicity in this specific case aren't critical to focus on directly. They will be improve as the other usability criteria improve. Also, the knowledge required to understand and use the app is something that musicians are going to naturally already have. So, the app design is built with that in mind. And it's simple enough that casual users will be able to figure it out as well.
INDIVIDUAL ANALYSIS (flaws)
Efficiency - Button placement unoptimized, lack of menu options
Familiarity - not enough capitalization on design conventions
Mapping - Interface elements are grouped in a non-coherent manner
Motivation - Design is boring
Trust - BPM/volume slider don't allow user to go all the way to the edge
Visibility - Screen is cluttered and missing useful data
CRITERIA HIERARCHY
*Indirectly worked on/improved through Efficiency
DRAW CONCLUSIONS
Before
After
Through analyzation, testing, and methodical re-designing, Simple Metronome has been improved in the following areas:

Efficiency - You can perform tasks more quickly and easily now, due to proper button placement and some reworked BPM modification functionality.

Mapping - Elements have been grouped in a way that makes sense. This makes the user's experience more simple and cohesive.

Motivation - The app has been shined up a bit with some more aesthetically pleasing/feeling interactive elements such as the BPM dial and the Beat Accent slider.

Trust - Due to more thoughtful and sensible controls, the user can now use Simple Metronome without any hesitation.

Visibility - The screen has been decluttered, buttons simplified, and useful data visible to the user has been maximized.