GRADIMAGES.COM

02_GradImages_HOW_Web_002.jpg

"You should be able to order your photos when standing in line at Starbucks"

Goals: Redesign GradImages.com to:

  1. Enable mobile first web design

  2. Improve product offerings

  3. Implement new branding and UI design system

  4. Identify up-sell and cross-sell opportunities to increase average order

  5. Identify new features to increase sell through rates

  6. Streamline the checkout flow to increase conversions

www.gradimages.com

UI/UX Sample Documents

Design System Styleguide

Wireframes

Prototypes

Research

MY ROLE

As a hands-on director I led the UX/UI and Visual Design team through competitive research, brainstorm sessions, rough sketches, wireframes, prototypes, UI design, gift and frames product design, photo shoots and content creation.

On Boarding: Photo Gallery:

Tell Us Who You Are! We want to know so that we can tailor the experience to you. This is the first place a customer lands. Directed from an email,  a student or parent can see all of their photos taken from the ceremony. They can zoom, crop favorite and share their photos with family and friends.

D Gallery Sharing v3.png
D Gallery Enlarge Overlay.png

Take a Closer Look

A close up view of each photo using a left and right arrows to navigate to the next photo.

D Gallery Share Overlay.png

Share Favorites

Allows students to share the photos they liked with a family member through sms and email.

The integration of this feature showed an increase in conversions by 5%

Launch the sharing document>

Ordering Steps

We created an easy to order stepped flow for the customer to: 1. Pick a photo package, 2. Select and edit their photos, 3. Customize their order.

SteppedNav.png

STEP 1: Pick A Package

This is the product listing page offering a variety of products including Digital, Print and combo packages as well as Gift & Frame products.

 

Goals:

  • Show the breadth and the depth of the products offered.

  • Incorporate a featured space to highlight digital and print packages and seasonal promotions.

  • Integrate new brand direction including colors, icons and text styles to the UI elements.

  • Incorporate a "Compare" feature to help customers see the difference in package prices and content.

See Prototype

Product Listing Rebrand V3.jpg
Product Listing Rebrand V3.jpg
Compare Page D ALT.png