Photo Editor

Redesign the kiosk product builder tools, which are used to compose photo books, calendars, cards, and other user customized products.

Project
Overview

As part of the kiosk redesign team, I was tasked with renovating the kiosk product builders. When a user selects a product at the kiosk that can be customized, they are taken to a product builder tool where they can personalize the merchandise by adding their own photos, text, and more.

Problem Statement

The existing product builders are inefficient, unintuitive, and not unified across all products. How do we design one system for building multiple types of products?

Goals

Compartmentalize buttons and features by categorizing them into groups.
Design a modular and flexible interface using interchangeable elements which can be added or removed as necessary. This also allows room for new features to be added down the road.
Design a consistent linear flow by guiding the user through a step by step process

Research

We researched competitor applications and interfaces like Shutterfly, Snapfish, Kodak Moments, CVS, Walgreens, and Mint to see what worked and what didn’t. Then we looked at other sites and apps such as Adobe Spark, Snapchat, TikTok and Nike for trends and creative inspiration.

Sketches & Wireframes

We reviewed our old builders and brainstormed what to keep or remove. Then we started sketching out our ideas.

Early Concepts

Our team met regularly to review our design progress with the kiosk project leadership and generate internal feedback and direction. The design team would then use that feedback to decide on specific actions to take to update the design.

Product Editor Redesign

Removed the home, back, cancel order, help guide, and shopping cart buttons. Then replaced them with the name of the product, unit price, and a cancel button. The cancel button takes the user out of the builder and returns the user to the shopping experience flow.
Removed the quantity control from the main builder page

Replaced the ‘Add to Cart’ button with a ‘Next’ button.

Moved the photo tray, change layout, change border, and add text options to a toolbar.
Added stickers as a new feature, which made the platform feel familiar to social-media savvy users.

Old UI

Redesigned UI

Edit Text Redesign

All the text options are on one panel under the text tab, making it easy to find and access.
Tapping on a text box will now zoom in to focus, making it easier to see the text while still giving context to where the text box is on the template.
Removed the clear text button and replaced it with a red garbage icon.

Old UI

Redesigned UI

Transform Redesign

Tapping on a photo will bring up the transform controls. The user can rotate, resize, or delete the photo.
The blue edit button brings the user to a new screen for editing the photo.

Old UI

Redesigned UI

New Features

Edit Photo

Tap the blue edit button to open the photo editor. The back arrow returns to the builder without saving. Use the ‘Save’ button to save changes and return to the builder. Swap photos in the ‘Photos’ tab.

Stickers

The new ‘Stickers’ feature lets users add graphics from a preset list, familiar to social media users. Stickers are sorted by themes but can also be searched by keyword.

Prototypes

Standard Editor

This editor covers products like mugs, wall decor, and other photo gift products. The review page lets users interact with a 3D rendered version of the product before adding to the cart. The user can adjust the quantity during the review page before adding the product to cart.

Card Editor

The card editor is similar to the standard builder, except cards can have a front and back. The user can flip the card to customize the front and back are both customizable.

Photo Book Editor

Creating a book is a two step process. Step 1 involves editing the cover, which ensures the spine and title text doesn’t get forgotten. Step 2 is where the contents of the book are added. The user can make final rearrangement of pages on the review page without having to return to the editor.

Photo Print Editor

The flow of the print editor is different than the others. The user edits one print at a time, and is brought to the print editor from the prints review page, so the ‘Done’ button takes the user back there.

The shopping experience outside of the produce editors uses a light theme. The dark theme for this editor is intentional, and makes the photos appear more vivid and easier to review. Many photo editing applications uses this concept, such as Adobe Photoshop, Google Photos, and the iOS photo editor.

Collage Editor

The collage editor is similar to the card, except the user taps on the photos to add to the collage. A check mark on the photo thumbnail shows that the photo is already in use, to help prevent adding repeats. The user can also tap on the ‘Shuffle’ button to generate a randomized, automatic layout of the photos in the collage.

Calendar Editor

The calendar is the only editor with the events tab. The user can select the holidays and events they want to show on the calendar, and they can also add custom events.

Conclusion

By designing the system to be modular and flexible, we can easily swap out elements based on the specific products users are creating. This approach also leaves room for future feature additions. The modular design should save developers time when making updates, as they'll only need to modify a single element rather than changing it across each product editor.

Photo Editor

Project
Overview

Research

Sketches & Wireframes

Early Concepts

Product Editor Redesign

Edit Text Redesign

Transform Redesign

New Features

Prototypes

Conclusion

Located In

Email

Social

Photo Editor

Project Overview

Research

Sketches & Wireframes

Early Concepts

Product Editor Redesign

Edit Text Redesign

Transform Redesign

New Features

Prototypes

Conclusion

Located In

Email

Social

Project
Overview