Your Music: Responsive mobile-first web design

Your Music: Responsive mobile-first web design

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?

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)

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

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.

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.

• 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

• 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.

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.

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.

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.

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.

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.

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.

• 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

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

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.

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.

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.

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.

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.

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.

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!

• 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

• 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

• 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

• 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!