The Magic iPod Rebrand
A two day personal design challenge where I sought to redesign The Magic iPod, a little slice of 2000s interactive nostalgia that I loved.
The design of the current site, while straightforward, is very minimal where users are prompted to click and drag one song on the left of the screen over another song to the right that "creates" a mashup of the two songs that play at the top of the screen.
In my redesign, I sought to maintain the simplicity of the original site while introducing more interactive elements and a brand new look and aesthetic.
.png)
Objectives
My main goals for the redesign of the site were to:
-
Maintain the simplicity of the original site while introducing more modern UI elements.
-
Create a delightful user experience that encourages users to discover song mashups on their own without the process feeling overly repetitive.
The Magic iPod's current design
Ideation Process
Exploration 1
In keeping with the one-screen integrity and click-and-drag feature of the original site, I wanted to emphasize the mashup aspect and the idea of a Venn diagram where users can click and drop song choices into the middle aligned with this vision.
Something I noted after my initial design from the original site was that there were two clearly delineated groups of songs. While users could click and drag songs from List 1 to List 2, they could not do the reverse. This meant that users who wanted to make a mashup from a song in List 2 had to go through each song individually from List 1 to see if they were compatible.
Exploration 2
In line with the name of the site which calls to mind days when iPods and other digital music players were a mainstay compared to today's modern smartphone, I wanted to introduce an element of nostalgia with an image of the iPod with the classic scroll wheel.
Rather than the one-screen display of the original site, each subsequent screen would follow a linear process leading to a final play screen.
Mid-fidelity
I proceeded with my initial design exploration as I quite liked that the Venn Diagram emphasized the mashup aspect.
After running through several design tweaks however, I ended up scrapping the play button and timeline until users could actually play their mashup to lessen confusion.
After soliciting feedback regarding my initial designs from five of my peers, I designed and included a visual of an actual iPod along with an animation which demonstrates two circles joining together in a Venn Diagram, priming users to how the Magic iPod would function.
.png)
The Main Screens
Built using Adobe XD and Adobe Illustrator.
High-fidelity
Demo the prototype below!