Purple Disco Machine
Album Pre-Order
(Mobile Site)

Case Study

Background: Purple Disco Machine is an international house music DJ & Producer. He has become one of the most in-demand remixers working with musicians such as: Lady Gaga, Calvin Harris, Dua Lipa, Diplo, Lizzo, and Sir Elton John. The goal of this project was to create an engaging mobile experience that would simulate the pre-ordering process of his newest (now released) album “Exotica”.

Project Image

The problem: Users and fans of the artist have limited time to search for a way to pre-order an upcoming music album in person or online, and may lack the important details such as release and delivery dates.

The goal: Design an efficient mobile site that allows users to easily find and pre-order the music artist’s (Purple Disco Machine) upcoming album “Exotica” with all the necessary details.

(Purple Disco Machine in concert at 1015 Folsom in San Francisco CA, December 2021.)

Inspiration: As one of my favorite DJs and music producers, I am drawn to Purple Disco Machine's incredible ability to combine dance music, classic disco sounds, and inclusive positivity. His music, branding, and color palette work in perfect harmony to create a unique experience for his fans. As a fan myself, I wanted to create a mobile site that was fun and paid tribute to his work and style.

User Flow: This initial user flow shows the basic navigation needed to accomplish the main user objective of completing the music album pre-order.

Project Image

Paper Wireframes: These are the initial paper wireframe iterations. Several versions of each page were created with the goal of being engaging, efficient, and cohesive.

Project Image

Paper Wireframes: Once the Homepage was chosen and centered around a circular hero image, I wanted to incorporate the circular theme elsewhere in the site. This led to the development of the scroll wheel on the About page. The other pages were selected with ease of use and efficiency prioritized.

Project Image

Digital Wireframes (Low Fidelity): In this example, the goal of the Homepage was to have the user see the most important details immediately without having to search further. The upcoming music album is featured prominently with release date and details easily viewable, along with available music formats towards the bottom.

Project Image

Digital Wireframes (Low Fidelity): The purpose of the Artist Discography page was to provide the user with more background information about the artist and their previous work. I also wanted to incorporate an enjoyable element like this scroll wheel into the site so the user can have a memorable experience.

Project Image

Usability Studies: Two usability studies were conducted. The first study helped move the design from wireframe to mockups while refining basic flow elements. The second study used a high-fidelity prototype and gave more information on how to further refine the designs. Those findings centered on eliminating confusion during checkout and adding even more information and cues across the design.

Project Image

Usability Studies - Affinity Mapping: Affinity maps were created after each usability study. Mapping helped identify behaviors, motivations, flows, and pain points by grouping similar themes together.

Project Image

Refinement: After the usability studies, mockups begin to take shape. Navigation cues, dates, branding, and important details appear in the mockup design, while keeping the format selection a focal point. Functionality and accessibility appear in the high-fidelity prototypes.

Project Image

Refinement - Wireframes to Mockups: Here you can see some of the iterations of key high-fidelity mockups where more details, usability, and refinement are added, along with imagery and brand colors.

Project Image

Refinement - Splash + Homepage: After the second usability study, additional changes were made to the prototype pages. In this example a splash screen was added, giving clear messaging to the user upon landing. A more developed Homepage also appears with pre-order details, a rotating hero image, and navigation dots added to the selection carousel.

Project Image

Refinement - Rotating Hero Image: Adding a rotating hero image (pictured above) to the Homepage allows users to gain more information immediately and have the ability to jump directly to a desired section if they choose.

Project Image

Refinement - Discography Page: Users stated that they wanted more current and past information about the musician available. The Discography page was updated and now includes detailed song information for each selection and the scroll wheel is now swipeable. A separate Artist Bio page was created and includes social media links, biography, and tour dates. This discography page is now a playful and memorable part of the site that really conveys the branding. Click here to read more about the Discography Scroll Wheel.

Project Image

High-Fidelity Design Flow: In the final design flow, users can now complete the main user flow of selecting and pre-ordering the upcoming music album with less confusion during checkout. More dates, details, and interactions (Discography & Bio) were added so the user can feel well-informed about the artist and have relevant ordering details.

Project Image

High-Fidelity Prototype (User Flow): The entire functional and prototyped user flow can be seen above. This high fidelity prototype allows the user to simulates the working site. Although it appears complex, the main user flow is straightforward. The complexities seen here are a result of the Shopping Cart and the Artist Discography which includes the swipeable scroll wheel.

Project Image

Challenges & Highlights: I initially found capturing the spirt of the music artist to be a challenge when using white space and neutral canvases. The feel and presence of Purple Disco Machine was not being properly expressed. Once I incorporated Purple Disco Machine's style and palette into the main design, the feel I wanted the user to experience started to take shape. This was done with with a background gradient, album art, and on-brand elements.

Being able to create a product that I was passionate about really helped the creative process overall. The Discography Scroll Wheel is my personal favorite element of the project. Creating the functionality of the wheel was an engaging challenge. Overall, I was very pleased with the final working version. The scroll wheel allowed the user to really dive into the music and the visuals, and be engaged, thus helping the user become more excited about pre-ordering new music.

Purple Disco Machine
Album Pre-Order
(Mobile Site)

Case Study

Background: Purple Disco Machine is an international house music DJ & Producer. He has become one of the most in-demand remixers working with musicians such as: Lady Gaga, Calvin Harris, Dua Lipa, Diplo, Lizzo, and Sir Elton John. The goal of this project was to create an engaging mobile experience that would simulate the pre-ordering process of his newest (now released) album “Exotica”.

Project Image

The problem: Users and fans of the artist have limited time to search for a way to pre-order an upcoming music album in person or online, and may lack the important details such as release and delivery dates.

The goal: Design an efficient mobile site that allows users to easily find and pre-order the music artist’s (Purple Disco Machine) upcoming album “Exotica” with all the necessary details.

(Purple Disco Machine in concert at 1015 Folsom in San Francisco CA, December 2021.)

Inspiration: As one of my favorite DJs and music producers, I am drawn to Purple Disco Machine's incredible ability to combine dance music, classic disco sounds, and inclusive positivity. His music, branding, and color palette work in perfect harmony to create a unique experience for his fans. As a fan myself, I wanted to create a mobile site that was fun and paid tribute to his work and style.

User Flow: This initial user flow shows the basic navigation needed to accomplish the main user objective of completing the music album pre-order.

Project Image

Paper Wireframes: These are the initial paper wireframe iterations. Several versions of each page were created with the goal of being engaging, efficient, and cohesive.

Project Image

Paper Wireframes: Once the Homepage was chosen and centered around a circular hero image, I wanted to incorporate the circular theme elsewhere in the site. This led to the development of the scroll wheel on the About page. The other pages were selected with ease of use and efficiency prioritized.

Project Image

Digital Wireframes (Low Fidelity): In this example, the goal of the Homepage was to have the user see the most important details immediately without having to search further. The upcoming music album is featured prominently with release date and details easily viewable, along with available music formats towards the bottom.

Project Image

Digital Wireframes (Low Fidelity): The purpose of the Artist Discography page was to provide the user with more background information about the artist and their previous work. I also wanted to incorporate an enjoyable element like this scroll wheel into the site so the user can have a memorable experience.

Project Image

Usability Studies: Two usability studies were conducted. The first study helped move the design from wireframe to mockups while refining basic flow elements. The second study used a high-fidelity prototype and gave more information on how to further refine the designs. Those findings centered on eliminating confusion during checkout and adding even more information and cues across the design.

Project Image

Usability Studies - Affinity Mapping: Affinity maps were created after each usability study. Mapping helped identify behaviors, motivations, flows, and pain points by grouping similar themes together.

Project Image

Refinement: After the usability studies, mockups begin to take shape. Navigation cues, dates, branding, and important details appear in the mockup design, while keeping the format selection a focal point. Functionality and accessibility appear in the high-fidelity prototypes.

Project Image

Refinement - Wireframes to Mockups: Here you can see some of the iterations of key high-fidelity mockups where more details, usability, and refinement are added, along with imagery and brand colors.

Project Image

Refinement - Splash + Homepage: After the second usability study, additional changes were made to the prototype pages. In this example a splash screen was added, giving clear messaging to the user upon landing. A more developed Homepage also appears with pre-order details, a rotating hero image, and navigation dots added to the selection carousel.

Project Image

Refinement - Rotating Hero Image: Adding a rotating hero image (pictured above) to the Homepage allows users to gain more information immediately and have the ability to jump directly to a desired section if they choose.

Project Image

Refinement - Discography Page: Users stated that they wanted more current and past information about the musician available. The Discography page was updated and now includes detailed song information for each selection and the scroll wheel is now swipeable. A separate Artist Bio page was created and includes social media links, biography, and tour dates. This discography page is now a playful and memorable part of the site that really conveys the branding. Click here to read more about the Discography Scroll Wheel.

Project Image

High-Fidelity Design Flow: In the final design flow, users can now complete the main user flow of selecting and pre-ordering the upcoming music album with less confusion during checkout. More dates, details, and interactions (Discography & Bio) were added so the user can feel well-informed about the artist and have relevant ordering details.

Project Image

High-Fidelity Prototype (User Flow): The entire functional and prototyped user flow can be seen above. This high fidelity prototype allows the user to simulates the working site. Although it appears complex, the main user flow is straightforward. The complexities seen here are a result of the Shopping Cart and the Artist Discography which includes the swipeable scroll wheel.

Project Image

Challenges & Highlights: I initially found capturing the spirt of the music artist to be a challenge when using white space and neutral canvases. The feel and presence of Purple Disco Machine was not being properly expressed. Once I incorporated Purple Disco Machine's style and palette into the main design, the feel I wanted the user to experience started to take shape. This was done with with a background gradient, album art, and on-brand elements.

Being able to create a product that I was passionate about really helped the creative process overall. The Discography Scroll Wheel is my personal favorite element of the project. Creating the functionality of the wheel was an engaging challenge. Overall, I was very pleased with the final working version. The scroll wheel allowed the user to really dive into the music and the visuals, and be engaged, thus helping the user become more excited about pre-ordering new music.

Purple Disco Machine
Album Pre-Order
(Mobile Site)

Case Study

Background: Purple Disco Machine is an international house music DJ & Producer. He has become one of the most in-demand remixers working with musicians such as: Lady Gaga, Calvin Harris, Dua Lipa, Diplo, Lizzo, and Sir Elton John. The goal of this project was to create an engaging mobile experience that would simulate the pre-ordering process of his newest (now released) album “Exotica”.

Project Image

The problem: Users and fans of the artist have limited time to search for a way to pre-order an upcoming music album in person or online, and may lack the important details such as release and delivery dates.

The goal: Design an efficient mobile site that allows users to easily find and pre-order the music artist’s (Purple Disco Machine) upcoming album “Exotica” with all the necessary details.

(Purple Disco Machine in concert at 1015 Folsom in San Francisco CA, December 2021.)

Inspiration: As one of my favorite DJs and music producers, I am drawn to Purple Disco Machine's incredible ability to combine dance music, classic disco sounds, and inclusive positivity. His music, branding, and color palette work in perfect harmony to create a unique experience for his fans. As a fan myself, I wanted to create a mobile site that was fun and paid tribute to his work and style.

User Flow: This initial user flow shows the basic navigation needed to accomplish the main user objective of completing the music album pre-order.

Project Image

Paper Wireframes: These are the initial paper wireframe iterations. Several versions of each page were created with the goal of being engaging, efficient, and cohesive.

Project Image

Paper Wireframes: Once the Homepage was chosen and centered around a circular hero image, I wanted to incorporate the circular theme elsewhere in the site. This led to the development of the scroll wheel on the About page. The other pages were selected with ease of use and efficiency prioritized.

Project Image

Digital Wireframes (Low Fidelity): In this example, the goal of the Homepage was to have the user see the most important details immediately without having to search further. The upcoming music album is featured prominently with release date and details easily viewable, along with available music formats towards the bottom.

Project Image

Digital Wireframes (Low Fidelity): The purpose of the Artist Discography page was to provide the user with more background information about the artist and their previous work. I also wanted to incorporate an enjoyable element like this scroll wheel into the site so the user can have a memorable experience.

Project Image

Usability Studies: Two usability studies were conducted. The first study helped move the design from wireframe to mockups while refining basic flow elements. The second study used a high-fidelity prototype and gave more information on how to further refine the designs. Those findings centered on eliminating confusion during checkout and adding even more information and cues across the design.

Project Image

Usability Studies - Affinity Mapping: Affinity maps were created after each usability study. Mapping helped identify behaviors, motivations, flows, and pain points by grouping similar themes together.

Project Image

Refinement: After the usability studies, mockups begin to take shape. Navigation cues, dates, branding, and important details appear in the mockup design, while keeping the format selection a focal point. Functionality and accessibility appear in the high-fidelity prototypes.

Project Image

Refinement - Wireframes to Mockups: Here you can see some of the iterations of key high-fidelity mockups where more details, usability, and refinement are added, along with imagery and brand colors.

Project Image

Refinement - Splash + Homepage: After the second usability study, additional changes were made to the prototype pages. In this example a splash screen was added, giving clear messaging to the user upon landing. A more developed Homepage also appears with pre-order details, a rotating hero image, and navigation dots added to the selection carousel.

Project Image

Refinement - Rotating Hero Image: Adding a rotating hero image (pictured above) to the Homepage allows users to gain more information immediately and have the ability to jump directly to a desired section if they choose.

Project Image

Refinement - Discography Page: Users stated that they wanted more current and past information about the musician available. The Discography page was updated and now includes detailed song information for each selection and the scroll wheel is now swipeable. A separate Artist Bio page was created and includes social media links, biography, and tour dates. This discography page is now a playful and memorable part of the site that really conveys the branding. Click here to read more about the Discography Scroll Wheel.

Project Image

High-Fidelity Design Flow: In the final design flow, users can now complete the main user flow of selecting and pre-ordering the upcoming music album with less confusion during checkout. More dates, details, and interactions (Discography & Bio) were added so the user can feel well-informed about the artist and have relevant ordering details.

Project Image

High-Fidelity Prototype (User Flow): The entire functional and prototyped user flow can be seen above. This high fidelity prototype allows the user to simulates the working site. Although it appears complex, the main user flow is straightforward. The complexities seen here are a result of the Shopping Cart and the Artist Discography which includes the swipeable scroll wheel.

Project Image

Challenges & Highlights: I initially found capturing the spirt of the music artist to be a challenge when using white space and neutral canvases. The feel and presence of Purple Disco Machine was not being properly expressed. Once I incorporated Purple Disco Machine's style and palette into the main design, the feel I wanted the user to experience started to take shape. This was done with with a background gradient, album art, and on-brand elements.

Being able to create a product that I was passionate about really helped the creative process overall. The Discography Scroll Wheel is my personal favorite element of the project. Creating the functionality of the wheel was an engaging challenge. Overall, I was very pleased with the final working version. The scroll wheel allowed the user to really dive into the music and the visuals, and be engaged, thus helping the user become more excited about pre-ordering new music.

© Paul Williams - 2022