Made You Look
A COLLABORATION WITH SONY MUSIC NZ
Supporting the debut of artist duo Made You Look with a webpage that keeps fans coming back for more.
Research Phase
Understanding the problem space as well as the client and user needs through comprehensive research
Problem Statement
Made You Look, a new and upcoming music duo who had recently signed with Sony
Music
New Zealand,
were on the look-out for unique and edgy brand identity that would launch them into the
music
scene
with the release of their new singles.
Part of this launch included the need for an engaging webpage that would tell their story,
showcase
their new upcoming music releases and keep their fans coming back for more.
Research Methods
- Artist analysis
- User surveys
- Competitor analysis
- Cultural trend analysis
Key Findings
Artist Aesthetic
The artist duo were heavily inspired by the aesthetics of the band House of Protection, and were looking for a similar aesthetic for their own brand.
User Expectations
Through surveys we discovered our users would expect to see features like tour dates, ticket links, photo galleries, artist history and social media links.
Competitor Trends
With a rise in the popularity of 3D spaces within web design, we found that many artists like Drake and Bon Jovi were using this to create a unique and engaging experience for their fans.
Ideation & Strategy
Exploring solutions and defining the design strategy
User Personas
Jaz, 20 y/o female
Student / Retail Assistant flatting in Auckland
Sam, 26 y/o male
Chef flatting in Wellington
Design Principles
- Digital Natives
- Motivated by gamification features within experiences
- Value artists who feel authentic and approachable
- Value discounts and deals
User Journey Map
Discovery
User discovers artists through spotify and social media becoming a fan of their music.
Consideration
User then visits the artists website to learn more about them and their music through interactive objects scattered around the home screen.
Retention
User begins to feel more connected to the duo after finding every page within their domain. When it is announced further objects have been added they return straight away to find them.
Advocacy
User shares their experience with friends, encouraging them to visit the website.
Design Process
From wireframes to high-fidelity prototypes
Site Mapping
Started with site mapping to plan layout and information architecture
Lo-fi Wireframes
Mapped out key user journeys to ensure intuitive navigation
High-Fidelity Design
Development & Implementation
Bringing the design to life through code
Coding Methods
- HTML5 & CSS3 for structure and styling
- JavaScript for interactivity and animations
- GSAP for smooth animations and transitions
- Responsive design principles
Key Features Implemented
- Interactive 3D space navigation
- Smooth parallax scrolling effects
- Responsive mobile-first design
- Accessibility-compliant components
Code Showcase
User Testing
Validating design decisions through user feedback
Testing Methods
- Usability testing (4 participants)
- Accessibility testing
- Performance testing
Key Insights
- Users were highly motivated by the "treasure hunt" style gamification within the 3d space.
- Discovering one item made them want to find them all.
- Users wanted the "treasure hunt" experience to be harder.
- Mobile-first approach was essential.
Iterations Made
Iteration 1
Removal of the items list to make the experience harder and the UI cleaner
Iteration 2
Over all layout and coding troubleshooting
Iteration 3
Adding glow effects to the objects to make them still visible
Outcomes
Final deliverables and project results
Final Deliverables
Check out the live site →
Reflection & Learnings
Key takeaways and future considerations
This project was my first opportunity to work with real clients, and the team at Sony Music made it an incredibly valuable experience. Collaborating closely to bring their vision to life—and then presenting our work and receiving feedback—significantly boosted my confidence and prepared me for stepping into the industry.
I also saw my web development skills continue to grow as I built functional web flows that responded seamlessly across all screen sizes. Looking ahead, I'm focused on refining the overall design and layout of my webpages, as I feel these elements took a back seat during the intensity of the coding phase.