Secret 13 Music
User Experience design case study for a pre-existing eclectic music and artist journal website. One of three final independent study projects for the DesignLab UX Academy program.
Secret 13 is a web journal focusing on exclusive DJ mixes by artists, musicians, label owners, record collectors, and other creatives in the underground electronic music community.
The Problem
Secret 13 needed a responsive website created for their music web journal. This site needed to provide different genres of music, in-depth details for each radio episode, featured streaming DJ mixes, as well as the ability to save mixes and view a user’s listening history.
Market Research
I studied websites that had similar features to Secret 13 to better understand how to approach implementing them. Spotify, Mixcloud, and Pandora displayed different genres of music as tags that could individually be explored to show similar radio episodes or music mixes. Details for the mixes and radio episodes were listed right below the music player plugin, which gave me the idea for this information to be contained within a drop-down section. This would prevent radio and mix pages from being too long on a user’s arrival.
Only Spotify had the ability to save mixes, but to do that users had to create an account. Secret 13 clarified they didn’t want user member functionality so we decided to omit the saving of mixes for now. Finally, viewing a user’s listening history was tied to having an account, but I had encountered a solution before where a user’s history was tied to their IP address. We decided to implement this and provide users with a notice asking them not to wipe their cache if they wanted to maintain listening history.
The design patterns and research brought me to these conclusions for for Secret 13’s website :
Keep navigation simple and uncluttered, especially on mobile
List information about the mix or episode immediately so user’s instantly know what they’re looking at
Make sure the music playing functionality allows for scrubbing back and forth through an episode or mix
Information architecture on these other sites often displayed a lot of clickable content, but all at very similar hierarchy levels. Keep the amount of information displayed concise, and clearly define hierarchy
Empathy Map
I developed an empathy map to define and understand Secret 13’s audience.
‘Underground’ electronic music fans, often already a part of online music communities
Musicians, composers, DJs, sound designers, and people with similar types of focus
Tech / design industry workers that are constantly around computers
About 20 - later 30’s in age range, in touch with popular culture but focused on niche content
These users need to be able to easily access the streaming music content and let it play while they do other tasks
As Secret 13 requested, users want detail information on participants, tracks, genres, how to save favorite content, and how to view listening history for the DJ mixes and radio episodes
Low Fidelity Sketches
I moved into sketching how Secret 13’s site would be structured to best implement features based on my research :
The homepage is divided into sections, featuring the most recent post / mix / episode for each content category
At the very top of the page, a slider displays featured content which may or may not be the most recent
The menu on desktop, tablet, or mobile should only display no more than 6 items, as any more would create clutter
For radio episodes and mixes the title, music player, and genres all appear first on the page so users know immediately what they are getting into. Detailed information about the content, track-listing, and participants / artists are all below the music player
Task Flows
Consistent with the needs of the site and my research I determined the two most important tasks for users to perform. Task 1 was the same whether you were navigating to DJ mixes or radio episodes, so I combined them. Task 2 included all the other forms of navigation from the homepage to the rest of the Secret 13 content.
Task 1 :
Navigate from the homepage to the main mixes or radio page, be able to search by filters for or immediately view and select the most recent mix / radio episode, listen to the content, and either save the content to a list or move on to the next recent mix / episode.Task 2 :
Navigate from the homepage to the interviews, festival reports, music reviews, and viewer listening history
Low Fidelity Wire-Frames
My initial wire-frames focused on the homepage, since that was the first place users would land on the site. The ‘TripFinder Tool’ was to help guide users immediately to finding and exploring their desired trips. Other areas on the homepage emphasized the attractive experiential benefit of trips, and the accessibility to common activities on the trips.
Final Designs
I incorporated the results of all my research findings, and expanded the low-fidelity designs into fleshed out designs for the Secret 13 homepage, mobile menu, mixes archive, and page for an individual mix.
About Me
The intersection of art and technology fascinates me, and I’ve always been a curious and avid learner hungry for new knowledge. Early pixel pushing in Photoshop and basic HTML / CSS laid the foundation for my exploration across diverse disciplines: graphic design, stop-motion animation, video production, no-code web development, UI/UX design, audio engineering, and artificial intelligence research. Each project, big or small, has been a stepping stone, solidifying the rich skillset and knowledge base I carry today.
In 2023 I joined the Software Development Bootcamp at Coding Dojo, and learned how to translate my design ideas into functional applications. This combination of creative problem-solving, insatiable curiosity, and diverse perspectives allows me to collaborate meaningfully and spearhead innovative design solutions.
What truly excites me? Crafting experiences and solutions that resonate with users, empower their endeavors and make a real difference.
PREFERRED TECH
Front-End Development:
HTML5, CSS3 (including frameworks like Bootstrap), JavaScript (ES6+), React/Vue.js, Next.js, PrismicDesign Thinking:
User research, persona development, problem framing, ideation, prototypingUX/UI Design:
Information architecture, wireframing, interaction design, visual designDesign Systems:
Creating and implementing design systems for consistency and efficiencyBranding:
Brand strategy, brand identity development, brand experience designSoftware Tools:
Adobe Creative Suite (Photoshop, Illustrator, InDesign), Figma, prototyping tools, Git, version controlCollaboration:
Cross-functional collaboration, stakeholder management, communication, presentation skills
SKILLS
Accomplishments
— Bachelor's Degree in Graphic Design from The Art Institute of Portland, Oregon
— Certification in UX Design from DesignLab
— Pursued a Master of Business for 1 year at the City University of Seattle
— Full-Stack Software Development Bootcamp at Coding Dojo
— Years of shared experience in Graphic Design, Web Development, UI / UX Design, and Design Consultation