Frost Bank

Above: This is a hi-fidelity mockup of what the Frost member would see on a desktop. The mosaic layout allows a member to see an updated gallery everyday, and would incentivize users to upload their own photos to share.

Above: This is a hi-fidelity mockup of what the Frost member would see on a desktop. The mosaic layout allows a member to see an updated gallery everyday, and would incentivize users to upload their own photos to share.

 

Customer Photo Of The Day Gallery
A project I was entrusted to redesign was the Customer Photo of the Day; a portal and process for bank members to upload photos to be considered for display on the Frost Bank homepage.

Inspiration And Exploration
I conducted competitive analysis of existing photo-based web sites like Pinterest, Instagram, and Flickr to understand what the trends were and more importantly, how to users interact with those sites. I had to explore the question, “What motivates someone to take a picture and share it with the world?”.

Make It Fun
At the end of the day this should be a fun experience for the user. The primary focus should be encouraging a bank member to take beautiful photos and share them with us. We share their photo with the community, and they get public recognition for it. We even had conversation about possibly creating a photo book of all the photos and making them available in bank lobbies.

View the full InVision Prototype of this solution here.

Strategic Approach

Above: Start with a goal. Establish what it is we want to achieve, and the reasons why.

Above: Start with a goal. Establish what it is we want to achieve, and the reasons why.

Above: Based on the data and findings, I form a hypothesis.

Above: Based on the data and findings, I form a hypothesis.

 
Above: Data helps back up the reason for this redesign.

Above: Data helps back up the reason for this redesign.

Above: It is important to document the existing flow, how many steps are involved, what are the pain points.

Above: It is important to document the existing flow, how many steps are involved, what are the pain points.

 
Above: It is healthy to establish what we do NOT know.

Above: It is healthy to establish what we do NOT know.

Above: Using a paper wireframe prototypes, I illustrate the overall concept of fewer steps and enhanced experience.

Above: Using a paper wireframe prototypes, I illustrate the overall concept of fewer steps and enhanced experience.

Prototyping and Design

Above: I provided developers with the gestures and behavior for buttons. I designed the illustration above from scratch, using behaviors I found in other photo based web sites as inspiration.

Above: I provided developers with the gestures and behavior for buttons. I designed the illustration above from scratch, using behaviors I found in other photo based web sites as inspiration.

Above: A high-fidelity prototype of the photo criteria a bank member would see as they progress thru the submission flow.

Above: A high-fidelity prototype of the photo criteria a bank member would see as they progress thru the submission flow.

 
Above: After I have the overall concept and steps accounted for, I design low-fidelity wireframes for what the gallery would look like for desktop, tablet, and mobile platforms.

Above: After I have the overall concept and steps accounted for, I design low-fidelity wireframes for what the gallery would look like for desktop, tablet, and mobile platforms.

Above: Intake form for the photo.

Above: Intake form for the photo.

 
Above: Low-fidelity wireframes for what the gallery would look like for desktop, tablet, and mobile platforms.

Above: Low-fidelity wireframes for what the gallery would look like for desktop, tablet, and mobile platforms.

Above: Designs for tablet and mobile devices.

Above: Designs for tablet and mobile devices.