Notate

Empowering songwriters on-the-go

Overview

The ubiquity and convenience of smartphones has changed the way we document ideas, create art, and collaborate. Songwriters, too, have grown increasingly dependent on a mobile-based workflow—especially  to capture ideas away from the studio.

However, currently most songwriters rely on multiple built-in apps for songwriting on-the-go—namely Notes and Voice Memos (iPhone). The problem? It’s decentralized, disorganized, and significantly hampers efficiency.

Enter Notate—a centralized environment for songwriters to write, record, and collaborate in one place.

  • Role: UX Designer (solo)
  • Responsibilities:
  • Research
  • Lofi + Hifi prototyping
  • User testing
  • Tools:
  • Sketch
  • Marvel
  • Invision + InvisionStudio

Role: UX Designer (solo)

Responsibilities:

Research

Lo-fi + Hi-fi prototyping

User testing

Tools:

Sketch

Marvel

InVision + InVision Studio

Research

Secondary Research

To lay a proper foundation for the project, I needed to understand both the problem space and my target audience. I studied transcripts of past interviews with songwriters and did some competitive analysis by combing through App Store reviews for existing songwriting tools (Rhymer's Block, Writer's Session, Simple Songwriter). This approach equipped me with insight into the needs and mental model of my intended user, and a sense of what works (and what doesn't) with existing solutions.

Key takeaways:

user perspective + mental model:

  • The songwriting process varies widely
  • Collaboration is important to most
  • Inspiration strikes randomly,  sometimes inconveniently
  • Several mention spotty memory and trouble recalling ideas as a pain point
  • Often write to beats and other audio files on their phones or computers

COmpetitive analysis:

Users...

  • Cite confusing interfaces and performance bugs
  • Need a single environment to write and record
  • Like in-app rhyme and lexical assistance
  • Desire sharing and export functionality

Though there are already a handful of songwriting apps available, there are still unmet needs on the user's end. Each app I analyzed satisfied some subset of the aforementioned needs, but no one app fulfilled them all.

Primary Research

Now that I had a better grasp on the problem space, I was ready to conduct my own research.

First, I needed to recruit participants for my study. I sent out a screener survey to a few communities—such as the UCLA Music Industry email list, ACN:Music Facebook group, and my personal network—to find smartphone-savvy songwriters (preferably iPhone users).

These were the most insightful findings:

Pie chart from screener survey responses: "How often do you use your smartphone in the songwriting process? 53.6% use it more than 60% of the time.

Insight: this is a significant problem space with a substantial target audience.

"On a scale from 1 to 5, how satisfied are you with your songwriting workflow?" 78.6% are not completely satisfied.

Insight: most respondents were not completely satisfied with their current processes, indicating room for improvement.

From the pool of thirty respondents, I reached out to five to interview via Zoom. I selected those who frequently used a smartphone in their writing process and were not totally satisfied with their process.

Synthesis

After my five user interviews, I was blessed with an (overwhelming!) wealth of information. To digest and make sense of it, I created an affinity map.

Affinity Maps

Start

Collection of post-it's on a wall; the "before" version of my affinity map.

Finish

Completed affinity map.

Digital

Empathy Maps

From the affinity maps above, I was able to parse out the two main user groups based on their levels of skill and experience.

Beginner

Experienced

Personas

These archetypes served as the basis for my personas.

THe hobbyist

The pro

Equipped with a better understanding of my user base, I was ready to explore and define the project scope.

Problem Statements

Now that the stage for the project had been set, it was time to begin framing and addressing users’ needs. Based on my findings, three main questions I used to guide my ideation process were:

How might we...

provide songwriters with a centralized mobile environment to notate ideas?

help users organize their content more easily?

facilitate smoother collaboration between songwriters and their peers?

Design

User Stories

The first step in the design process was to lay out the functional requirements and scope of the application. Here are a handful of epics and corresponding user stories I came up with:

As a user I want to...

Write lyrics
  • type my lyrics into a project to document ideas
  • label and color code different song sections to visually organize my song structure
  • add notes and comments so I can track my thoughts and ideas for improvement
Add audio
  • record audio into the app to notate sonic ideas
  • import audio files into the app so I can ideate and build off of them
Keep assets organized and accessible
  • manage and compartmentalize my files and projects so I can stay organized
  • export my work in various formats to share
  • use version control to track the evolution of a project and declutter my archives
Collaborate easily
  • invite collaborators to my projects to create in a single workspace and minimize back-and-forth
  • see changes in real-time to stay updated
  • add notes and comments so I share feedback
Sign up and log in
  • sign up and create an account so I can join the service
  • log into my account so I can use the app and access my work

Although I did not end up incorporating all of them in my final designs, these user stories served as a central reference to define the project requirements and guide me through the design process.

IA: User Flows

From these user stories, I distilled my minimum viable product (MVP) and mapped out two red routes—for user authentication (sign up and log in), and writing a verse and recording audio. In the interest of time, I limited the scope of my project to designing for these screens.

Early Sketches

Next, it was time to begin creating initial sketches. I used my problem statements, user stories, and user flows to guide my initial brainstorming sketches.

Early-stage brainstorming sketches
Early-stage brainstorming sketches
Early-stage brainstorming sketches

I then expanded upon and refined these sketches to create a paper prototype with Marvel for guerilla testing. Testing was carried out both remotely and in-person among five representative participants.

Refined Sketches & Guerrilla Testing

Sample of screens from guerrilla testing prototype

A handful of sample screens from the guerrilla testing prototype.

Here are some of the main takeaways from my guerrilla testing:

Now it was time to bring my designs from sketches to Sketch (haha).

Wireframes

Equipped with the feedback from guerrilla testing, I tackled creating the first digital rendition of the app—wireframes.

Wireflows

I then compiled these wireframes for the two red routes (user authentication and writing lyrics/recording audio) into wireflows.

Style Guide and Visual Direction

Now that the skeleton of the app had been established, it was time to consider its appearance and visual theme.
‍
I wanted the app to have a modern, minimalistic feel, and, based on my research, make the workspace unobtrusive and sleek. I chose a hydrangea shade as the accent color to give the interface some character, but kept most elements the primary brown shade—”umber.” I opted for a brown palette to keep the aesthetic neutral and muted to minimize distraction, but also maintain a level of warmth that black doesn’t afford. I decided on Libre Franklin as the typeface, drawing inspiration from old Blue Note-era vinyl covers while preserving the clean, modern sans serif look: a nod to the past, fit for the future.

High Fidelity Mockups

Applying these guidelines to my wireframes, these were some of the first renditions of my treated screens:

Animations

To bring my treated screens to life even more, I created animations for a few screens.

Previewing the project tempo.

Loading screen animation.

Usability Testing

With my high fidelity mockups ready, it was time to carry out more usability testing to evaluate my designs. I conducted two rounds of remote testing moderated over Zoom, and used the InvisionApp as my prototyping tool—each round included five participants.

Round 1

Here were the key takeaways from Round 1:

I then used this feedback to redesign certain screens and processes which users found unclear. Here are the updates I made:

Initial

Originally, a tooltip menu housed the "insert section" option. Users had difficulty locating it. Most thought to tap the plus sign FAB, which was intended to add audio.

updated

To better align with users' mental models, I moved the "add section" option to the menu exposed when the FAB is tapped.

Initial

The bottom bar contained unlabeled icons specific to recording. Users found the iconography unclear, and the functionality of the bar icons confusing (is this to export audio only or any part of the project?)

updated

I redesigned the shape to better resemble a bottom nav bar, and replaced certain icons with more "global" and necessary functions. I also captioned the icons for clarity.

Round 2

Now it was time to evaluate my updated designs to see if they addressed users' issues.

Here were the key takeaways from Round 2:

Further Explorations

For this case study, I focused on two red routes within the Notate app. If I had more bandwidth to broaden the scope of the project, I would:

Reflections

It was rewarding to see the evolution of this project; from a seedling of an idea to a researched, (partially) developed interface. Here are some insights and lessons:

Working on an end-to-end design project is a huge undertaking—especially solo. I have a newfound appreciation for so many of the apps I use, now knowing what goes into their creation.

User research is critical! It’s important not to rely on assumptions rooted in your own mental model, or else you may miss some key insights and opportunities to satisfy unmet needs.

In the ideation phase, don’t let perfectionism box you in—when brainstorming, just go for it. Broad strokes with thick pens!

Iterating on your designs is essential. Continually collecting feedback and refining ensures that unforeseen usability issues are addressed on an ongoing basis

© Maya Nag 2021