Joanne Chang's profile

PicCollage UI Visual upgrade

Goal:
 
To give the PicCollage UI a revamp so that it looks a bit more grown up. Our app is popular amongst the teen crowd, however, we decided that we wanted to expand the market to a more mass market. Since our demographic has always mostly been female, the direction was for the interface to be more sophisticated, Feminine, but not girly.
Material:
 
In regards to the materials, we decided to try out the ios7 flat design look with blur and gradients, but for some areas, we wanted to leave in some elements of paper-like skeuomorphism so that it goes better with the collage methaphor.
Color:
 
Since our icon mostly consists of blue, with a hint of gradient that runs over to green, I decided that that should be the main theme--blue with hints of green. The top bar would be blue with gradient to give the feeling of summer, and a leisurely sky, the overall background is a very light cream color. Because of the attention the top and bottom bars bring out. the coloring in the body of the app has been made so that it is very subtle so as not to offset so many strong color details.
Font:
 
The only restrictoin I had for fonts was that it had to be an ios system font, this way, we would be less likely to run into problems when we had multiple languages. I wanted the app to be friendly yet elegant. Avenir roman is an elegant font, a bit more feminine, and very friendly.
Buttons:
 
For top tab bar system buttons, we decided to go for the ios7 flat design look. For other buttons that were within our app, the main idea was to make it so that the color of the the button could offset the whole look so that it would make the app feel more neutral, not more feminine. After trying out multiple colors green made the most sense, especially since our app theme was primarily blue with hints of green. Another reason why green turned out to be a good color is because users are familiar with the idea that green means "go" "press". When designing the bottom bar buttons we got multiple feedback, some users wanted color, others were iffy about ios7 lined icons. Thus we decided to go with something cool, blue-green gradients. 
 
User profile & photos
 
For the user profile, we decided on round images. On the default image we added a bit of playfullness so that the avatar would look more mysterious under a mask. Photo images we used rounded corners
The centerpiece:
 
The main centerpiece of the app is the gallery page. The design on this page is different from the rest in that it is more skeomorphic. The edges on the photo is not rounded. With this page, we want to make it feel more scrapbooky, it can't look too polished or perfect or else it won't feel like that used notebook that is worn out, yet it's what you write in every night.
Final Designs:
 
The end result is a beautiful interface that makes it easy to create and discover collages. With just a few taps, you can use a layout or template to help you make a fast collage, if you like creativity, you can crop you own images or add in stickers. Interact with other collage users by looking at the explore page--like, or better yet, respond to their collages with your own creative collage, lots of fun, just at your fingertips!
PicCollage UI Visual upgrade
Published:

PicCollage UI Visual upgrade

This is the visual redesign of PicCollage, coming out soon!

Published:

Creative Fields