Client: Amazon.com Your Media Library Service: Application UI, IA & Visual design
The first version of Your Media Library
The design of the project began where most projects do - wireframes. After reading and understanding the business requirements and functional spec, I created a series of wireframes to define the space, and outline all of the functionality. An example of one of the wireframes is shown below.
At the wireframe stage I developed the idea of a "split" view to show the details of a selected item in the library. In the early wireframe example, this "split view" had the item details at the bottom. Over the course of iterating on the design, I determined that moving the split view to the top made the content more discoverable, and created a better user experience.
Color Mock-ups & Two Basic Design Directions
After approval of the wireframes, it was time to create color mock-ups and further evolve the design. It eventually came down to two completely different looks and concepts, one was what I called the more "designed" look, and the other one the more "utilitarian" look.
The designed look had more movement, and was less symmetrical than the utilitarian look, which was almost completely symmetrical. It was with these two designs that we presented to the senior executives and the CEO in order to get approval for a final direction.
The "Utilitarian" design. View larger.
The "Designed" design. View larger.
During this series of meetings, the "Utilitarian" design was selected as the final direction to go with. I took this design, and moved it forward by adding some color and subtle shading to it in order to give it more visual interest, which resulted in the current live site design.
More Pieces to the Puzzle
There are obviously many different elements that need to be created with a project of this size. Some of them are shown below.
Your Media Library Logo Design
An "About" page that users see while the system fills your "library" with content.