Connect with us:

Piczo

Brief UI Enhancement Case Study Mockups for Piczo.com

I was given a brief task to improve the design of a few pages of piczo.com. The following are the mock-ups I made compared to current pages.

The design that existed

The design that I proposed

 Existing Account page
New Account page

To come up with this design I looked at many different sites such as friendster and netflix and amazon. I saw that the account pages usually either have a box model like netfix or tab model like myspace. My design is a hybrid. When working on this I also felt it would be interesting to have a type of passport look and feel to this. Furthermore I used all the existing designs and palettes which are currently used on piczo for the sake of consistency. I made al the tips highlighted, and made that consistent. I also streamlined the information, and got rid of extraneous pieces. I made the boxes aesthetically pleasing by making it symmetrical and using the same type of divider. Lastly I got rid of the loud boxes on the side and made them look more consistent with the rest of the page.

Existing Account Settings Page
New Account Settings Page

I had consistency in mind all the way thru with this page. I made sure I also stay consistent with the account page, highlighting tip text again.

Existing Tools Menu bar
New Tools Menu bar

To do this I tried to get rid of redundancy by putting similar elements in one sub category. This meant there is going to be 3 sub categories which I highlighted for clarity. These were Page Design, which I put on top since its the first thing a user would do.Then I put Add Media, and finally the single action of change background. As the graphic shows when the images is clicked a popup opens containing pictures and clipart, and when text is clicked a pop up opens containing text and graphic text.

Existing Organizer Page
New Organizer Page

I found the current organizer overview page extremely confusing, and tried to make it more clear by proposing to show it as a simple flow chart. After having investigated all the organizer pages of the site I noticed alI they did was four tasks: upload pictures, preview, edit and delete although profile and homepage didn’t have the delete functionality. I also thought that a user would like to keep track of their assets be it pictures or video or whatever else which costs them web space. In their assets they would have new or deleted pictures. Also the bottom bar would just show how much space they are using, and how much they have left, at a glance.