EYES TO THE FRONT
EYES TO THE FRONT
Creating responsive artist pages for a music label
Creating responsive artist pages for a music label
Website • UX/UI Design
Website • UX/UI Design
Overview
Overview
Role
Role
UX/UI Designer & QA.
Met constantly with copywriter, graphic designer, and web developer.
Duration: 2 months.
UX/UI Designer & QA.
Met constantly with copywriter, graphic designer, and web developer.
Duration: 2 months.
About
About
Eyes to the Front, founded by Oliver Osborne, is a Toronto-based music label. As a freelance UX/UI designer, I revamped the artist pages in Figma and collaborated with the web developer during QA, ensuring design consistency and making adaptations as needed. The WordPress site is live here.
Eyes to the Front, founded by Oliver Osborne, is a Toronto-based music label. As a freelance UX/UI designer, I revamped the artist pages in Figma and collaborated with the web developer during QA, ensuring design consistency and making adaptations as needed. The WordPress site is live here.
Project Goal
Project Goal
Revamp the website as part of the 2024 launch campaign for the music label.
Revamp the website as part of the 2024 launch campaign for the music label.
Showcase artists’ music in one place to officially integrate them into the label.
Showcase artists’ music in one place to officially integrate them into the label.
Challenges
Challenges
Budget limits
Budget limits
Collaborating on Brand Cohesion
Collaborating on Brand Cohesion
Process
Process
My first step was gathering inspiration from well-known music label websites, including Columbia Records, Capitol Records, Sony Music, Domino Records, and Armada Music:
My first step was gathering inspiration from well-known music label websites, including Columbia Records, Capitol Records, Sony Music, Domino Records, and Armada Music:
From there, I began sketching ideas and presented the client with two options:
From there, I began sketching ideas and presented the client with two options:
Idea A was a simpler approach, featuring artists directly on the homepage with their social media links appearing on hover or click.
Idea B introduced dedicated artist pages with bios, streaming options, upcoming events, and additional details.
Idea A was a simpler approach, featuring artists directly on the homepage with their social media links appearing on hover or click.
Idea B introduced dedicated artist pages with bios, streaming options, upcoming events, and additional details.
The client preferred Path B, with the added suggestion of including an artist carousel on the homepage.
The client preferred Path B, with the added suggestion of including an artist carousel on the homepage.
Next, I created mid-fidelity wireframes while the graphic designer was still finalizing logo variations:
Next, I created mid-fidelity wireframes while the graphic designer was still finalizing logo variations:
After the client approved the layout and concept, I analyzed the current website styles and created a simple, straightforward UI style guide to be followed by me and the developer.
After the client approved the layout and concept, I analyzed the current website styles and created a simple, straightforward UI style guide to be followed by me and the developer.
I also used Excel to compile all the artists’ information, linking each item for easy reference. To maintain consistency and meet word limits for aesthetic purposes, I created bios and descriptions with the help of ChatGPT. This organized approach streamlined the developer’s process for customizing each page as well.
I also used Excel to compile all the artists’ information, linking each item for easy reference. To maintain consistency and meet word limits for aesthetic purposes, I created bios and descriptions with the help of ChatGPT. This organized approach streamlined the developer’s process for customizing each page as well.
Using this information, I customized each artist’s page to align with the design and content requirements:
Using this information, I customized each artist’s page to align with the design and content requirements:
With the final designs completed, I transitioned to QA, thoroughly reviewing the developer's work. Over five weeks, I provided detailed feedback in slide decks, addressing issues such as alignment, responsive behavior, layout inconsistencies, font usage, and icon application. This collaborative process ensured the final product met design standards and delivered a polished user experience.
With the final designs completed, I transitioned to QA, thoroughly reviewing the developer's work. Over five weeks, I provided detailed feedback in slide decks, addressing issues such as alignment, responsive behavior, layout inconsistencies, font usage, and icon application. This collaborative process ensured the final product met design standards and delivered a polished user experience.
Live Website
Live Website
After the QA stage, the page was finalized, delivering a responsive design that functions seamlessly across desktop, tablet, and mobile devices.
After the QA stage, the page was finalized, delivering a responsive design that functions seamlessly across desktop, tablet, and mobile devices.
Key Learnings
Key Learnings
QA + Han-doff = Success
This project taught me that design isn’t finished until the handoff is complete. While I’m still learning how to give more efficient feedback to developers, I gained valuable insights into the importance of clear communication and allowing time for quality checks during the sprint to ensure both teams are satisfied with the result.
QA + Han-doff = Success
This project taught me that design isn’t finished until the handoff is complete. While I’m still learning how to give more efficient feedback to developers, I gained valuable insights into the importance of clear communication and allowing time for quality checks during the sprint to ensure both teams are satisfied with the result.
© Rosa Moriya 2023
Made with Framer
© Rosa Moriya 2023
Made with Framer
© Rosa Moriya 2023
Made with Framer