Nora
END-TO-END MOBILE APP DESIGN
Nora is a music streaming app that provides in-depth song breakdowns, connects artists and listeners, and allows users to stay updated on music trends.
TEAM
Me (Designer)
Saad Usman (Client)
Nico Jones (Client)
BACKGROUND
This is a paid freelance project that I took on after two clients inquired through LinkedIn.
ROLE
UI/UX Designer | Brand Development, UX Research, Wireframing, Prototyping
DURATION
12 weeks
Mar 2023 – June 2023
Nora is a music streaming app that provides in-depth song breakdowns, connects artists and listeners, and allows users to stay updated on music trends.
BACKGROUND
This is a paid freelance project that I took on after two clients inquired through LinkedIn.
ROLE
UI/UX Designer | Brand Development, UX Research, Wireframing, Prototyping
DURATION
16 weeks
Mar 2023 – June 2023
TEAM
Me (Designer)
Saad Usman (Client)
Nico Jones (Client)
Research + Analysis
The problem
Yes, Spotify and Apple Music provide the song. But when listening to music or looking for inspiration, musicians want more.
In order to...
find samples of that song they have to go to WhoSampled.com,
find chords they have to go to Chordify.com
find detailed credits they have to go to Genius.com
find stems they have to use Moises.com
...and so on.
This disjointed experience not only consumes valuable time but also disrupts their creative flow and hinders a seamless music exploration process.
What the current user experience looks like...
User personas
I conducted research through Google Forms and in-person interviews with musicians to understand the target audience's preferences, pain points, and behavior, enabling me to create well-defined user personas that accurately represent Nora's user base.
Alex, a 21-year-old college student majoring in music production.
GOALS
Alex wants to explore different elements of popular songs to understand how they contribute to the overall composition. Alex also wants to stay updated on the latest trends in the music industry.
PAINT POINTS
🤷♂️ Lack of detailed song breakdowns to study
📰 No place to find music trends and news within his streaming services
Sarah, a 37-year-old musician who has been playing guitar and writing songs for over a decade.
GOALS
Sarah wants to find a wide range of music genres for fresh inspiration for her songwriting. Sarah also wants to integrate stems and samples into her compositions to add new dimensions to her music.
PAINT POINTS
🔍 Difficulty in finding diverse sources of music inspiration
😕 Inconvenience of searching multiple platforms to find stems and samples
Competitor analysis
Doing a thorough competitor analysis allowed me to gain valuable insights into the strengths and weaknesses of existing music streaming platforms and related services, enabling me to identify strategic opportunities for Nora's unique value proposition.
The goal
Research + Analysis
Yes, Spotify and Apple Music provide the song. But when listening to music or looking for inspiration, musicians want more.
In order to...
find samples of that song they have to go to WhoSampled.com,
find chords they have to go to Chordify.com
find detailed credits they have to go to Genius.com
find stems they have to use Moises.com
...and so on.
This disjointed experience not only consumes valuable time but also disrupts their creative flow and hinders a seamless music exploration process.
I conducted research through Google Forms and in-person interviews with musicians to understand the target audience's preferences, pain points, and behavior, enabling me to create well-defined user personas that accurately represent Nora's user base.
The problem
User personas
Competitor analysis
Doing a thorough competitor analysis allowed me to gain valuable insights into the strengths and weaknesses of existing music streaming platforms and related services, enabling me to identify strategic opportunities for Nora's unique value proposition.
Alex, a 21-year-old college student majoring in music production.
GOALS
Alex wants to explore different elements of popular songs to understand how they contribute to the overall composition. Alex also wants to stay updated on the latest trends in the music industry.
PAIN POINTS
🤷♂️ Lack of detailed song breakdowns to study
📰 No place to find music trends and news within his streaming services
Sarah, a 37-year-old musician who has been playing guitar and writing songs for over a decade.
GOALS
Sarah wants to find a wide range of music genres for fresh inspiration for her songwriting. Sarah also wants to integrate stems and samples into her compositions to add new dimensions to her music.
PAIN POINTS
🔍 Difficulty in finding diverse sources of music inspiration
😕 Inconvenience of searching multiple platforms to find stems and samples
What the current user experience looks like...
My clients shared their initial vision for the user experience through a rough sketch. Building upon their initial concept, I created a detailed user flow map in FigJam outlining the entire user journey, from onboarding to key interactions and features. By collaborating with my clients and incorporating their feedback, we ensured that Nora's user flow was intuitive, user-friendly, and aligned with the app's overarching goals.
Ideation
From my clients' sketch...
...to the fleshed out user flow map!
Ideation
My clients shared their initial vision for the user experience through a rough sketch. Building upon their initial concept, I created a detailed user flow map in FigJam outlining the entire user journey, from onboarding to key interactions and features. By collaborating with my clients and incorporating their feedback, we ensured that Nora's user flow was intuitive, user-friendly, and aligned with the app's overarching goals.
From my clients' sketch...
...to the fleshed out user flow map!
Design
Sketches
For my rough sketches, my primary focus was on visualizing what the main pages from user flow should look like. I went over the sketches with my clients and gathered feedback about what to change in regards tot the UI before I went into the mid-fi wireframes.
Mid-fi "blueprint"
With the flow map defined and interface sketched out, I proceeded to create mid-fidelity wireframes. This served as a crucial bridge between the conceptual designs and the final product. By focusing on the key elements and interactions, the mid-fidelity wireframes provided a clear blueprint of Nora's user interface.
Design
Sketches
For my rough sketches, my primary focus was on visualizing what the main pages from user flow should look like. I went over the sketches with my clients and gathered feedback about what to change in regards tot the UI before I went into the mid-fi wireframes.
Mid-fi "blueprint"
With the flow map defined and interface sketched out, I proceeded to create mid-fidelity wireframes. This served as a crucial bridge between the conceptual designs and the final product. By focusing on the key elements and interactions, the mid-fidelity wireframes provided a clear blueprint of Nora's user interface.
After prototyping the mid-fi wireframes with the interactions from the blueprint, I sent it out to my interviewees to play around with it. I collected their feedback and addressed their pain points regarding the prototype. Below, I will explain two major changes that I made to the user experience...
Feedback + Iteration
TESTING INSIGHT
❌ Excessive scrolling on the trending Music Today page
While users appreciated the variety of content provided on this page, they felt that scrolling to find the content they wanted was strenuous.
IMPROVEMENTS
✅ Horizontal navigation menu to easily switch between categories
Now, the user doesn't have to scroll past trending artists, songs, and latest news to get to trending stems.
✅ Sticky “Trending” and “For You” buttons
Eliminates the need to scroll all the way back to the top to flip between “Trending” and “For You”
01
TESTING INSIGHT
❌ Excessive scrolling on the trending Music Today page
While users appreciated the variety of content provided on this page, they felt that scrolling to find the content they wanted was strenuous.
IMPROVEMENTS
✅ Horizontal navigation menu to easily switch between categories
Now, the user doesn't have to scroll past trending artists, songs, and latest news to get to trending stems.
✅ Sticky “Trending” and “For You” buttons
Eliminates the need to scroll all the way back to the top to flip between “Trending” and “For You”
01
TESTING INSIGHT
❌ Too many clicks to view information in the Nora Breakdown
Users felt that going to a separate page for each section was unnecessary.
IMPROVEMENTS
✅ Replacing the back & forth clicking with collapsable drop-down sections
Now, musicians can quickly scan all the song information, rather than simply looking at one section at a time.
02
While my clients had some existing branding, they felt that it was a bit corporate and dated. They requested me to reimagine the brand. To inject a sense of modernity into the brand, I opted for a vibrant combination of pink and purple, complemented by futuristic fonts. I modified their logo to be easily scalable, while keeping the core elements the same. This new direction aimed to convey a fresh, music-centric experience, and establish a strong visual identity for Nora.
Brand (Re)development
Clients’ original branding
Revamped branding!
TESTING INSIGHT
❌ Too many clicks to view information in the Nora Breakdown
Users felt that going to a separate page for each section was unnecessary.
IMPROVEMENTS
✅ Replacing the back & forth clicking with collapsable drop-down sections
Now, musicians can quickly scan all the song information, rather than simply looking at one section at a time.
02
Meet Nora
Figma Prototype (See below or click here)
Onboarding + Music Today 🌎
Nora's onboarding immerses users in Music Today right after sign-in, with the Trending section updating them on the latest in music, and the For You section tailoring content based on their activity, creating a mix of discovery and familiarity.
Search + Nora Breakdown 🔍
Nora's Search feature offers easy navigation through its music library. Tapping the Nora logo reveals the Nora Breakdown, providing users with comprehensive insights into songs, including stems, samples, and chords, fostering creativity for musicians.
Nora AI 🤖
Nora AI enhances user interaction by offering voice-activated requests. By pressing and holding the Nora AI button, users effortlessly find songs similar to their preferences, making music discovery enjoyable and convenient.
Meet Nora
Onboarding + Music Today 🌎
Nora's onboarding immerses users in Music Today right after sign-in, with the Trending section updating them on the latest in music, and the For You section tailoring content based on their activity, creating a mix of discovery and familiarity.
Search + Nora Breakdown 🔍
Nora's Search feature offers easy navigation through its music library. Tapping the Nora logo reveals the Nora Breakdown, providing users with comprehensive insights into songs, including stems, samples, and chords, fostering creativity for musicians.
Nora AI 🤖
Nora AI enhances user interaction by offering voice-activated requests. By pressing and holding the Nora AI button, users effortlessly find songs similar to their preferences, making music discovery enjoyable and convenient.
Figma Prototype (See below or click here)
Reflection
Whew, you made it to the end! 🎉 Working on Nora was full of challenges and growth, but it was a very rewarding experience to bring my clients' vision to life and I'm super proud of how it all turned out :)
Challenges
🤝 Working with clients
On the design front, compromise was necessary; clients desired a UI resembling Spotify, while I aimed for a more retro direction. This balance between their preferences and the project's vision called for negotiation and flexibility. On the business side, defining revision boundaries was crucial. Establishing limits to prevent endless changes required transparent communication with clients, addressing their feedback while adhering to project timelines and goals.
🧠 Learning new components
One standout learning experience during this project was figuring out how to implement certain components. For instance, I needed to create a dropdown section for the Nora Breakdown feature. While this initially seemed daunting, I was able to overcome this challenge by watching a YouTube tutorial. This experience reminded me of the vast resources available for learning and problem-solving, reinforcing the importance of self-directed learning.
Takeaways
01
03
Establishing clear communication channels and boundaries for revisions is crucial for project success.
Balancing client expectations with my own design sense taught the importance of adaptability and compromise.
02
Don't be afraid to learn new things on the spot–by utilizing YouTube tutorials, I was able to deliver a better final product.
Reflection
Challenges
🤝 Working with clients
On the design front, compromise was necessary; clients desired a UI resembling Spotify, while I aimed for a more retro direction. This balance between their preferences and the project's vision called for negotiation and flexibility. On the business side, defining revision boundaries was crucial. Establishing limits to prevent endless changes required transparent communication with clients, addressing their feedback while adhering to project timelines and goals.
🧠 Learning new components
One standout learning experience during this project was figuring out how to implement certain components. For instance, I needed to create a dropdown section for the Nora Breakdown feature. While this initially seemed daunting, I was able to overcome this challenge by watching a YouTube tutorial. This experience reminded me of the vast resources available for learning and problem-solving, reinforcing the importance of self-directed learning.
Balancing client expectations with my own design sense taught the importance of adaptability and compromise.
01
Takeaways
Establishing clear communication channels and boundaries for revisions is crucial for project success.
02
Don't be afraid to learn new things on the spot–by utilizing YouTube tutorials, I was able to deliver a better final product.
03
Whew, you made it to the end! 🎉 Working on Nora was full of challenges and growth, but it was a very rewarding experience to bring my clients' vision to life and I'm super proud of how it all turned out :)
Featured in Best Purple App Designs of 2023
Featured in Best Purple App Designs of 2023