Nora En Pure

Type

Website and Mobile App - Design Refresh

Duration

September 2022 to December 2022

My Role

UX/UI Designer

Summary


Nora En Pure is an electronic dance music (EDM) artist whose website acts as a landing page for fans to discover her music and brand. This project is fictional and entails a website redesign to promote a better user experience through visual, content and interaction enhancements. The typical user is between 18 to 45 years old, with diverse backgrounds and an interest in electronic dance music.

DISCLAIMER: Nora En Pure is a real music artist and has not given consent for services relating to website redesign or anything found within this portfolio website. All images, ideas, designs and work found throughout this portfolio website were built as a fictional project for the Google UX Design Professional Certification and is being showcased here as an example of design capabilities. Anthony Montecalvo is not the rightful owner of any assets or materials and does not claim to be, nor is he leveraging any of these designs for personal monetary gain.

The Primary Goal


The initial problem was that Nora En Pure's website lacked an engaging user experience for listening to and ordering music, with an outdated visual design.

The goal was to redesign Nora En Pure's website to be user friendly by providing clear navigation, enhanced visual design and an intuitive checkout process.



What We Learned About Potential Users


Four fictional user biographies were created based on the characteristics of the target audience, which then turned into personas to better understand the user's needs, goals and motivations.

I uncovered that many users who browse an EDM artist's website love to support their favourite artists and community by purchasing music, merchandise and tickets.

I discovered the following pain points:

  • Visual Design: EDM artist websites are often too simple or outdated, which results in a disconnect from the artist or brand.
  • Navigation: EDM artist websites are often busy with content, which results in confusing navigation.
  • User Experience: EDM artist websites often act as a simple landing page, directing users elsewhere and don't provide an engaging browsing experience.

The research made it very clear that users appreciate painless navigation with appealing visual designs.



David and Fiona: User Personas


Problem Statements:

  • David is a busy professional and music lover who needs an intuitive website navigation because he wants his purchasing experience to be stress-free.
  • Fiona is a working adult and music festival enthusiast who needs to easily access an artist's entire music library in one place because she wants to quickly purchase music.


Researching the Competition


An audit of a few competitor websites provided direction on gaps and opportunities to address with the Nora En Pure website redesign.

A few direct and indirect competitors included:

  • Beatport: A music streaming platform allowing for the purchasing and streaming of high-quality audio of virtually any EDM artist.
  • Ben Bohmer: An individual EDM artist website, acting as a landing page for merchandise, music discovery, and live ticket purchases.
  • Spotify: A music streaming platform which allows users to browse through collections of music and podcasts.
  • Nora En Pure: A deep analysis of the existing website provided insight into what was working well, and what needed improvement.


Sketching up Some Solutions


The time finally came to leverage the data and insights from the initial research and competitive audits, to begin ideating on potential solutions.

My focus was specifically on improving visual design and navigation.

I wanted to design for:

  • An "About" page which acted as the home page.
  • A "Music" page which contained albums and songs available for purchase.
  • A "Community" page which would serve to connect people together.
  • A "Checkout" user flow to simulate the purchase of a music album.

I started off by sketching various versions of the "Music" page.

Once I came up with a few design ideas for the interface, placement of text, and any other important elements, I repeated this process for the remaining screens.

I reviewed the sketches for each screen, and began dissecting what I liked from each to combine them into a second version.



Paper to Digital


After ideating and drafting some paper wireframes, I created the initial designs for the Nora En Pure website. These designs focused on simplifying navigation and improving the overall user experience of purchasing music.

The next step was to prepare for user testing. At this stage of the development, I had refined my designs a little more so that I could have real users test the functionality of certain features. I created a low-fidelity prototype centered around the main user flow of purchasing music and completing the checkout process.



User Interviews


The goal of this usability study was to observe users and gather their feedback concerning the main user flow of purchasing music and completing the checkout process, along with any other impressions of the overall app experience.

The parameters of the usability study were as follows:

  • Moderated: Users were observed by the interviewer while they were asked to complete certain tasks and share their thoughts.
  • Location: Conducted remotely via Zoom.
  • Duration: 30 to 60 minutes.
  • Participants: Four; conducted individually.

These were the main findings uncovered by the usability study:

  • Checkout: People found the checkout process unclear and frustrating.
  • Navigation: People had difficulty navigating individual site pages.
  • Menu: Users were unable to differentiate between the menu and sub-menu.
  • Membership: People found little value in a premium membership.
  • Login: People were frustrated that there was no way to login.
  • Community Page: People found little value in having this as a feature to the website.


Low-Fidelity Prototype - Version 2


Based on the insights from the first round of user interviews, I made changes to improve the checkout process as this user flow was proving to be problematic. I addressed the other challenges brought up by they usability study and improved the overall navigation and structure of information.

To make the website easier to navigate, I simplified the menu from two tiers, into one collapsible menu that allowed users to quickly identify where they were in the website.



Refining the Design


Once the initial changes were made from the feedback gathered during the user interviews, it was time to bring life into the website.

Thus began the transformation from placeholder text, colours and images, to something closer to how the finished website redesign would eventually resemble.

Along with colour implementation, various pages and features were refined and explored as well.

A high-fidelity prototype was then created, focusing once again on the main flow of purchasing music and completing the checkout process.



Designing for Mobile Screens


I included considerations for mobile screen sizes in my mockups. I felt it was important to optimize the browsing experience on a device other than a desktop screen for users on the move.



Accessibility Considerations


During the redesign and development of the Nora En Pure website, several considerations were made to include people with accessibility limitations:

  • Typographic hierarchy was leveraged for clear visual display.
  • Landmarks were used to help users navigate the site, including users who rely on assistive technologies.
  • Clear colour contrast was kept in mind, applying light text on dark backgrounds, or vice-versa for users with a visual impairment.


End of the Journey - What Was Learned?


The main takeaways from the Nora En Pure product development project are as follows:

  • Impact: Target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy
  • What I Learned: I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.


Next Steps


The Nora En Pure website could benefit from the following next steps in its development:

  • Conduct a follow-up usability testing on the new website based on the high-fidelity prototype.
  • Identify any additional areas of need and ideate on new features.

Let's Work Together