• Work
  • Resume
  • About
Christopher Woodside
  • Work
  • Resume
  • About
Client Work - 2013
Giving Users an Album at their Desk and in Their Pocket
Rhye Woman: Promotional Website
 
Introduction
Elegant music deserves an elegant website.
I worked with Universal Music Group’s team to construct an elegant marketing site to accompany the album’s release. I wanted to keep business goals in mind but not at the expense of the key user goal: experiencing the album. With this in mind, I approached the project with two key goals in mind. I wanted to keep it simple and it elegant.
 
 

 
 
Early stage sketches
Building a UI with mobile in mind.
I approached the project always wanting it to move with fluid design between mobile and desktop. In both interactions I kept the branding front and center, to let the user know they were where they wanted to be. Then I moved the user directly into the album with obvious play options. I kept purchase prompts in both the individual tracks, as well as in the album art at the top of the page.
Sketch3.jpg
Sketch.jpg
IMG_0493.jpg
 
 

 
 
Mobile Interface
Mobile first without sacrifice.
When constructing the mobile UI, I worked to keep the main goals prominent (listening to the album and discovering how to add it on your favored platform). But I wanted second steps to be hidden until the user needs them so as to not clutter the flow. I built both the mobile and desktop UI with the ideology of show the user what they want and hide it when it’s no longer necessary.
Initial State
iPhone 7 - InitialState.png
Pause State
iPhone 7 - PlayState v2.png
Purchase State
iPhone 7 - Purchase Overlay.png
Play State
iPhone 7 - PauseState.png
 
 

 
 
Desktop Interface
Elevating the experience for desktop.
I used the mobile design as the basis for the desktop experience. I wanted to make the desktop experience feel more immersive by adding animations to make the UI feel like it was like it was floating over the image. This was to create the effect of added depth to the experience.
I wanted to be mindful of adding elegant animations to the interface, but not at the expense of the site. I kept the key user flows short and easily obtainable while folding in the added layer of animation.
Opening Animation
Cut1.gif
Activating Play State
Cut2.gif
Purchase RollOver
Cut3.gif
Brand Tie-Ins
Cut4.gif
Closing Play State
Cut5.gif
 
 

 
 
Thank you for your time.
 
email | cc.woodside@gmail.com