Duration
12/2022 - 01/2023
1 Month, Approx 90 hours
Tools
Figma
Illustrator
Zoom
G-Suite
background
Through user research, persona development, and iterative testing, this project aims to deliver a user-centric website that strengthens the connection between Daydream Time Machine and their fans, providing a centralized hub for music engagement and merchandise transactions.
problem
The current website for Daydream Time Machine lacks responsiveness and user-friendliness, hindering dedicated fans and local music enthusiasts from easily finding shows, exploring albums, and purchasing band merchandise.
THE GOAL
The goal is to create an engaging online platform that enhances the fan experience by facilitating the discovery of shows, browsing albums, and purchasing band merchandise.
Empathy Mapping
Through interviews with three potential users, I delved into their interactions with band websites, unearthing common issues such as hidden fees and ticket availability problems. By listening attentively to their insights, I was able to develop a clearer understanding of the user's perspective, informing my design decisions and ensuring that the website addresses these pain points effectively.
INITIAL USER RESEARCH
For this project, various research methods were utilized. Analysis of Daydream Time Machine's Instagram page helped identify their potential users, Gen Z and Millennials attending concerts. Initial user interviews and empathy maps provided deeper insights, while a competitive audit explored branding strategies of larger and local indie artists. These research efforts informed the website design to effectively cater to the target audience's needs and preferences.
Cometitive Analysis
Additionally, I conducted a competitive audit to identify the main competitors in the market and to understand their target audience. I identified 4 primary competitors to research, 3 direct competitors (Whitney Band, SadGirl, Cuco) and 1 indirect competitors (Ticket Master). This research provided the following insights on gaps and opportunities in the market that the website could offer it's users:
Implementing a progress bar on the merch website would assist users in maintaining a clear sense of progress while navigating through the checkout process, ensuring a smoother and more efficient user experience.
Social and streaming links can help users conveniently locate the band on various platforms, enhancing their ability to connect and engage with the band's content.
By incorporating a built-in music player, users will have seamless access to explore and discover new songs effortlessly.
Pain Points
Linktr.ee: The band's current use of linktr.ee to direct users to all their platforms lacks a personal touch and can be difficult to locate through a typical internet search.
Shows: The band's use of a third-party website to showcase their upcoming shows negatively impacts the user experience as it is not centralized on a single platform.
Merch: Users who want to support the band have no way of buying merch online.
Socials: Users that don't user social media don't have a way of finding out what the band is currently up to.
Problem Statements
Hayley Wilkinson is a High School Student who needs an easy way to check new song releases because she frequently misses song and album releases.
Julian Calabasas is a School Teacher who needs clear pricing information in checkout because is a busy family man and needs to make informed purchase decisions.
Persona Development
From my research, I identified 2 groups of users who would benefit from the app. Hayley Wilkinson represents our group of users who are tech-savvy, but frequently misses new song and album releases. The following user story was developed for Hayley: As a High School Student I want to visit a bands website so that I can see their latest tracks and tour dates.
Julian Calabasas represents our older demographic that is busy and wants clear pricing to make an informed purchase. The following user story was developed for Julian: As a School Teacher I want to buy tickets on a bands website so that I can go to shows for my favorite local bands.
Information Architecture
The lack of a centralized location for the band's collateral is the primary pain point that I used to create the sitemap. Users like Julian are typically busy and don't often use social media, making it hard for them to view upcoming shows. Having an easy to use and clear sitemap will help users like Julian stay up-to-date on the band.
Digital Wireframes
The initial wireframe features components that address the main issues users are looking to solve from a band website. Having the latest album and singles right on the homepage helps users like Hayley who want to find the latest release quickly. The website's album section was designed to provide users with a preview of the band's albums. After collecting feedback from users, it became clear that they wanted links to streaming services as well as an easier way to view the band's other albums.
Parameters
Study Type: Moderated usability study.
Location: 3 participants, Remote, USA.
Duration: 20-30 minutes
Research questions
How long does it take users to navigate upcoming shows?
How long does it take users to navigate upcoming shows?
What can we learn about the steps a user took when making a purchase?
Could the user successfully navigate to other sections of the website?
Are there any parts of the ordering process that the user gets stuck?
Does the user easily navigate the payment process?
Summary
My first usability study for the low-fidelity prototype aimed to test a design to see if users are able to successfully complete tasks like purchasing merch and tickets. My primary goal was to gain insights into the challenges users encounter during these tasks and propose improvements for a more seamless user experience.
My methodology for this study included participant recruitment, developing user tasks, capture both qualitative and quantitative data, and analyze data to identify recurring usability issues, pain points, and pattern. During the study users were encouraged to think aloud to provide feedback during the study.
Overall, the insights lead me to make the following changes to the website: adding easily accessible links to streaming & social platforms, adding a related products section to the merch page, and allowing users to use Apple and Google pay.
affinity map & Insights
After conducting the usability study, I assorted all the feedback I received into an affinity map. I categorized the notes into 3 sections from the patterns I identified: confusion, copy issues, and feature requests. These findings led to the following insights:
Based on the theme that: a majority of users thought there should be links to Streaming Services, an insight is: there should be links to Streaming platforms in the footer and by the relevant songs/albums.
Based on the theme that: a majority of users thought the website needed social links, an insight is: there should be links to all social platforms in the footer of the website.
Based on the theme that: 1 user wanted to see related items on the product page, an insight is: adding related items under the product page will help users browse items.
Based on the theme that: user wants to see the band's biography on the website, an insight is: adding a band's background on the homepage will help users who are looking for more information.
Based on the theme that: 1 user wanted to use Apple or Google pay for payment, an insight is: giving the option to pay with Google or Apple pay on the order form could help expedite the ordering process.
Mockups And Screens
I incorporated feedback from the usability study by adding links to streaming platforms next to the song previews. This helps users like Hayley go to their streaming platform with ease. By adding related items to the product page, users can easily explore other options without navigating away from their current page. This helps users like Julian make more informed purchases by letting him see other options before making a final purchase.
To optimize the user experience for various devices and browser sizes, I designed a mobile version of the homepage. Showing the new latest music video on the banner helps users like Hayley view the latest videos the moment they visit the site.
Accessibility considerations
Headings: To enhance accessibility, I considered the use of large headings, varied font size & styling, and a distinct hierarchy.
Landmarks: I incorporated familiar landmarks such as navigation bars, hero images, and product grids, which aid in screen reader navigation and helps the user experience.
High-Contrast: High-contrast colors to signify interactive elements in the design, complying with WCAG standards.
High-Fidelity Prototype
The high-fidelity prototype I created followed the same user flow as the lofi prototype and incorporated feedback gathered from the usability study I conducted. Putting social links in the nav bar address concerns that Hayley may have, allowing her and other users to find the bands social pages.
Next Steps
The mobile user flow needs to be completed as I only had the opportunity to address a part of the design flow.
Conducting additional user studies on the high-fidelity website would be beneficial.
One potential next step would be to create a Webflow site to get a practical, more polished prototype for further testing.
Takeaways
“The website was easy to navigate and followed a typical user flow that made it easy to get to the final page.”
Making sure that user's needs, like Hayley and Julian, are addressed helps the user experience for all users. Giving users the option to link out to sites that the band can found on, allows users get to the place they are looking to go, all in a centralized and fun to use platform.