iPhoneXs-002-your-music

Your Music: Responsive mobile-first web design

Your Music: Responsive mobile-first web design

Overview

Challenge

How might we design a new music publication website, with a modern logo and branding, that will appeal to current readers of Your EDM, while attracting a larger audience of music enthusiasts? How might we optimize the mobile web experience, while maintaining consistency across all devices?

How might we design a new music publication website, with a modern logo and branding, that will appeal to current readers of Your EDM, while attracting a larger audience of music enthusiasts? How might we optimize the mobile web experience, while maintaining consistency across all devices?

Solution

From research to implementation, I designed a responsive mobile-first website for an online music publication called Your Music, a potential affiliate of Your EDM.

From research to implementation, I designed a responsive mobile-first website for an online music publication called Your Music, a potential affiliate of Your EDM.

Role: UX/UI Designer
Tools: Sketch, InVision, Illustrator, Whimsical
Timeline: 4 weeks (Feb 2019)

Role: UX/UI Designer
Tools: Sketch, InVision, Illustrator, Whimsical
Timeline: 4 weeks (Feb 2019)

Your-Music-five-iPhoneXs-mockup-for-slides

Process

Research & Synthesis / Information Architecture / Interaction Design / Prototyping & Testing / Iteration / Branding & UI Design

  1. Research & Synthesis
  2. Information Architecture
  3. Interaction Design
  4. Prototyping & Testing
  5. Iteration & Implementation
  6. Branding & UI Design

Research & Synthesis

I launched this project with secondary research, using a lean canvas business plan to outline the Your EDM and Your Music business models. After this, I did a competitor analysis to get an overview of the current online music publication landscape.

I launched this project with secondary research, using a lean canvas business plan to outline the Your EDM and Your Music business models. After this, I did a competitor analysis to get an overview of the current online music publication landscape.

Lean Canvas Your EDM V1.1
Lean Canvas Your Music V1.1
Your Music key competitor logos

Next up was primary research to better understand the target audience for Your Music. My goal was to gain insight into user expectations when visiting music blogs/publications, why some sites are preferred over others, and to see if users encounter problems or frustrations when using these sites. I ran a survey and did some interviews with people who fit the target demographic.

Next up was primary research to better understand the target audience for Your Music. My goal was to gain insight into user expectations when visiting music blogs/publications, why some sites are preferred over others, and to see if users encounter problems or frustrations when using these sites. I ran a survey and did some interviews with people who fit the target demographic.

SURVEY FINDINGS

  • 20 responses (even gender split, 18-35 years old)

  • 75% listen to music every day of the week, and 20% listen to music most days

  • 25% read about music every day, another 25% do around 1 to 6 days per week

  • 100% of respondents who typically read about music do so online only

  • Most visited sites are Billboard and Pitchfork

  • 100% of respondents read/watch content on music blogs/publications (very few share or add comments)

  • Expectations include music news, reviews, interviews, videos, and event information

  • 20 responses (even gender split, 18-35 years old)
  • 75% listen to music every day of the week, and 20% listen to music most days
  • 25% read about music every day, another 25% do around 1 to 6 days per week
  • 100% of respondents who typically read about music do so online only
  • Most visited sites are Billboard and Pitchfork
  • 100% of respondents read/watch content on music blogs/publications (very few share or add comments)
  • Expectations include music news, reviews, interviews, videos, and event information

INTERVIEW FINDINGS

  • 5 adults (3 males, 2 females, 21-28 years old)

  • Most participants listen to music every day (most popular genres are EDM, indie, and rock)

  • Music-related content consumed online only

  • Music blogs/publications are typically visited via social media links (and not by visiting the home page)

  • Mostly interested in event info, music news, and reviews

  • Typically visit these sites on desktop (note: this contradicts Your EDM analytics, which report 79% of traffic on mobile)

  • Passive engagement with articles and posts (most prefer not to add comments or reactions)

  • 5 adults (3 males, 2 females, 21-28 years old)
  • Most participants listen to music every day (most popular genres are EDM, indie, and rock)
  • Music-related content consumed online only
  • Music blogs/publications are typically visited via social media links (and not by visiting the home page)
  • Mostly interested in event info, music news, and reviews
  • Typically visit these sites on desktop (note: this contradicts Your EDM analytics, which report 79% of traffic on mobile)
  • Passive engagement with articles and posts (most prefer not to add comments or reactions)

Following research, I synthesized my findings to define the core target users and their problems. I did this by consolidating the findings and observations to create user personas, empathy maps, and journey maps. These documents illustrate and communicate all my research findings in a way that focuses on the users, and I referred to them throughout the design process to focus on the user at every step.

Following research, I synthesized my findings to define the core target users and their problems. I did this by consolidating the findings and observations to create user personas, empathy maps, and journey maps. These documents illustrate and communicate all my research findings in a way that focuses on the users, and I referred to them throughout the design process to focus on the user at every step.

Your Music User Persona Matt V1
Your Music User Persona Amy V1
Your Music Empathy Map Matt V1
Your Music Empathy Map Amy V1
Your Music Journey Map Matt V1
Your Music Journey Map Amy V2

With a deeper understanding of the Your Music target readers (including their wants, needs, and expectations), I created a feature roadmap spreadsheet listing and prioritizing website features. Priority levels were influenced by a combination of user and business goals, as well as the key competitors. It was helpful to keep this in mind during the ideation and design phases to make sure I didn’t forget any critical features. I also acknowledged that the priority level of certain features could change as I got deeper in the process.

With a deeper understanding of the Your Music target readers (including their wants, needs, and expectations), I created a feature roadmap spreadsheet listing and prioritizing website features. Priority levels were influenced by a combination of user and business goals, as well as the key competitors. It was helpful to keep this in mind during the ideation and design phases to make sure I didn’t forget any critical features. I also acknowledged that the priority level of certain features could change as I got deeper in the process.

Your Music Feature Roadmap V1.1

Information Architecture

After defining both user and business needs and problems, I mapped out the core user flows, starting with various entry points to the Your Music website. Creating this diagram helped me identify common user actions and decisions as they’d move around the website.

After defining both user and business needs and problems, I mapped out the core user flows, starting with various entry points to the Your Music website. Creating this diagram helped me identify common user actions and decisions as they’d move around the website.

Your Music User Flows Case Study V1

Having a good grasp on the user’s paths made it easier to identify the key web pages and how they would relate to each other. To define the website’s information architecture, I made a high-level sitemap.

Having a good grasp on the user’s paths made it easier to identify the key web pages and how they would relate to each other. To define the website’s information architecture, I made a high-level sitemap.

Your Music Sitemap Case Study V1

Interaction Design

With the information architecture laid out, it was time to sketch wireframes for the key website pages users would interact with. I drew some rough mobile and desktop layouts, and explored different design patterns, while being free from distractions on my computer. Competitor websites continued to be a useful reference, as I considered current trends and user expectations within the online music publication space.

With the information architecture laid out, it was time to sketch wireframes for the key website pages users would interact with. I drew some rough mobile and desktop layouts, and explored different design patterns, while being free from distractions on my computer. Competitor websites continued to be a useful reference, as I considered current trends and user expectations within the online music publication space.

Wireframe Sketches for Case Study V1

Using my sketches as a starting point, I went back to my computer to build responsive wireframes for 5 key pages of the Your Music website. I started with the mobile wireframes, then scaled content and components proportionally for the desktop and tablet versions.

Using my sketches as a starting point, I went back to my computer to build responsive wireframes for 5 key pages of the Your Music website. I started with the mobile wireframes, then scaled content and components proportionally for the desktop and tablet versions.

Initial Wireframes for Case Study V1

Prototyping & Testing

For a mobile-first website, it made sense to test the mobile wireframes with users before proceeding to branding and UI design. So, I wrote up a usability test plan and made a low-fidelity InVision prototype. I wanted to see if my decisions around architecture and interactions would be easy for people to use on an actual mobile device during in-person moderated sessions.

For a mobile-first website, it made sense to test the mobile wireframes with users before proceeding to branding and UI design. So, I wrote up a usability test plan and made a low-fidelity InVision prototype. I wanted to see if my decisions around architecture and interactions would be easy for people to use on an actual mobile device during in-person moderated sessions.

OBJECTIVES

  • Assess the usability of the mobile navigation and filters

  • Observe how efficiently users can locate a specific category

  • Observe how efficiently users can conduct a search and locate a result

  • Get feedback on layout and design patterns

  • Assess the usability of the mobile navigation and filters
  • Observe how efficiently users can locate a specific category
  • Observe how efficiently users can conduct a search and locate a result
  • Get feedback on layout and design patterns

TASKS

  1. Locate interview articles

  2. Filter articles by a genre
  3. Conduct a search and locate a result
  1. Locate interview articles
  2. Filter articles by a genre
  3. Conduct a search and locate a result

QUANTITATIVE RESULTS

I had 3 participants test the prototype. All tasks had a 100% completion rate, and the error-free rates for tasks 1 through 3 were 67% (2 out of 3), 33% (1 out of 3), and 100% (3 out of 3), respectively. In other words, my testers struggled with filtering the most, and findability of certain article types could have been better, so I needed to iterate on those wireframes to improve usability.

I had 3 participants test the prototype. All tasks had a 100% completion rate, and the error-free rates for tasks 1 through 3 were 67% (2 out of 3), 33% (1 out of 3), and 100% (3 out of 3), respectively. In other words, my testers struggled with filtering the most, and findability of certain article types could have been better, so I needed to iterate on those wireframes to improve usability.

QUALITATIVE RESULTS

I had a lot of “aha” moments during each session, and took a bunch of notes on the patterns and interactions that users found confusing or frustrating. I gathered and organized several pages of qualitative findings in an affinity map to visually group and prioritize similar observations and feedback in a way that would help me zero in on the priority revisions intended to improve usability and the overall user experience.

I had a lot of “aha” moments during each session, and took a bunch of notes on the patterns and interactions that users found confusing or frustrating. I gathered and organized several pages of qualitative findings in an affinity map to visually group and prioritize similar observations and feedback in a way that would help me zero in on the priority revisions intended to improve usability and the overall user experience.

Your Music Affinity Map V2 022319

Iteration & Implementation

My next task was to iterate and implement revisions. First, I updated the mobile wireframes, then carried these changes through desktop and tablet versions, resulting in updated wireframes.

My next task was to iterate and implement revisions. First, I updated the mobile wireframes, then carried these changes through desktop and tablet versions, resulting in updated wireframes.

Revised Wireframes for Case Study V1

Branding & UI Design

Once I iterated on the wireframes, I tackled branding and UI design! I started by writing down brand adjectives and making mood boards on Pinterest. The board shown below was my final selection; it became main source of inspiration for color, shape, and typography. I found this look to be colorful and engaging, while still allowing the photography on the website to shine.

Once I iterated on the wireframes, I tackled branding and UI design! I started by writing down brand adjectives and making mood boards on Pinterest. The board shown below was my final selection; it became main source of inspiration for color, shape, and typography. I found this look to be colorful and engaging, while still allowing the photography on the website to shine.

Your Music Mood Board Final Direction V1

The Your Music logo design process began with sketching, exploring a wide range of geometric shapes and music-related symbols and icons. I then made vector logos of a select few, and paired these with various wordmarks to see which combinations best fit the brand identity I was going for.

The Your Music logo design process began with sketching, exploring a wide range of geometric shapes and music-related symbols and icons. I then made vector logos of a select few, and paired these with various wordmarks to see which combinations best fit the brand identity I was going for.

Your Music Logo Sketches Case Study V1
Your Music Logo Combos Case Study V1

Next, I made a brand style tile to show the UI design choices I’d be moving forward with. The final logo design I chose (after getting input from friends and other designers) is meant to be dynamic, conveying forward movement. The vertical bars abstractly represent music and digital sound bars. The sans serif fonts chosen for the website are clean, modern, and legible. The colors and gradients are bright, balanced, and energetic. Overall, the look is intended to channel both a nostalgic vaporwave aesthetic and modern holographic style that would appeal to the young Your Music target audience.

Next, I made a brand style tile to show the UI design choices I’d be moving forward with. The final logo design I chose (after getting input from friends and other designers) is meant to be dynamic, conveying forward movement. The vertical bars abstractly represent music and digital sound bars. The sans serif fonts chosen for the website are clean, modern, and legible. The colors and gradients are bright, balanced, and energetic. Overall, the look is intended to channel both a nostalgic vaporwave aesthetic and modern holographic style that would appeal to the young Your Music target audience.

Your Music Brand Style Tile V2.1

With the visual styles defined, I applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. To make the final UI designs as realistic as possible, and to see if my design decisions still worked as intended in a realistic context, I also replaced placeholder text and image boxes with music-related headlines and photography from Unsplash. Finally, I made a UI kit with all UI components and styles currently in use, for more streamlined design and development of future Your Music pages!

With the visual styles defined, I applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. To make the final UI designs as realistic as possible, and to see if my design decisions still worked as intended in a realistic context, I also replaced placeholder text and image boxes with music-related headlines and photography from Unsplash. Finally, I made a UI kit with all UI components and styles currently in use, for more streamlined design and development of future Your Music pages!

Your Music Final UI Designs Case Study V1
Your Music UI Kit V3 030519

Conclusion

WHAT I DID

  • Primary & secondary research

  • Information architecture
  • Wireframing & interaction design
  • Lo-fi prototyping & testing

  • Affinity mapping & iteration
  • Branding & UI design

  • Hi-fi prototyping
  • Primary & secondary research
  • Information architecture
  • Wireframing & interaction design
  • Lo-fi prototyping & testing
  • Affinity mapping & iteration
  • Branding & UI design
  • Hi-fi prototyping

WHAT I DIDN'T DO

  • Conduct behavioral research

  • Design and prototype every page or feature in the roadmap

  • Test the hi-fi prototype
  • Collaborate with developers and engineers to build the website
  • Conduct behavioral research
  • Design and prototype every page or feature in the roadmap
  • Test the hi-fi prototype
  • Collaborate with developers and engineers to build the website

NEXT STEPS

  • More usability testing and iteration

  • Design more pages of the website, like event and longform pages

  • Work with developers and engineers to build and launch the website
  • More usability testing and iteration
  • Design more pages of the website, like event and longform pages
  • Work with developers and engineers to build and launch the website

WHAT I LEARNED

  • Designing for a something you’re passionate about (music in my case) adds an extra layer of enjoyment to the process

  • People are very passive when it comes to reading online publications, so the design needs to be easy to skim

  • Branding and logo design is a huge industry. I did a rapid branding and logo design process so I could focus on other key aspects of user experience, acknowledging that I’m no master of branding. Needless to say, I have a lot of respect for the craft!

  • Designing for a something you’re passionate about (music in my case) adds an extra layer of enjoyment to the process
  • People are very passive when it comes to reading online publications, so the design needs to be easy to skim
  • Branding and logo design is a huge industry. I did a rapid branding and logo design process so I could focus on other key aspects of user experience, acknowledging that I’m no master of branding. Needless to say, I have a lot of respect for the craft!

More Projects

Kai mobile appiOS app for mental wellness

Airbnb FlightsAdding a feature to the iOS app

Coray e-commerceResponsive web design

© 2019 Yumi Morii

© 2019 Yumi Morii