Sanghoon Hwang | HP Sprocket Photobooth

Overview

Challenge

Designing for first-time users in high-energy social settings required an intuitive, frictionless experience, while also adapting quickly to a sudden rebrand from Kodak to HP.

Goals

Ensure the first-time user flow is quick and free of road blocks.
Create an entirely new design system.
Design a companion mobile app for event planners.

Purpose

Enable guests at social events to effortlessly take and print photos, capturing memories without hassle.

SECTION 1

Rebranding

Polar Opposites

For the first 6+ months I worked on this project, this photobooth device was intended to under the Kodak brand. All of the screens were designed and developed, almost ready for release.

While the shift to HP caused a little bit of internal confusion and panic, it was personally a fun challenge in which I was able to establish a new look for the photobooth.

Home Screen

Rationale

Ensure that the lighthearted and fun nature of the product shones through the more "corporate" image of the HP visual guidelines.

Photo Capture

Rationale

Keep the background elements minimal to keep the focus on the live view. A dark tone will be suitable for the user's eyes as we do not want to blind the users in potentially dark social gatherings.

Event Creation Dividers

Rationale

These transition screens should have very easily readable text, as they will only show briefly.

SECTION 2

User Flows

Two Types of Users

The photobooth has two distinct halves: The Admin flow, and the Guest flow. During the design process, our UX team carefully considered the ease of use for both types of users.

Admin Flow

Admins are the event organizers and the actual owners of the product. Their primary goal will be to set up the "events" prior to the occasion, which houses all of the settings that will determine what the guests will experience.

Guest Flow

The guests' job is easy, but imperative to how the product is received. The ultimate goal is to take a photo and print one out, but the process of doing so was optimized for simplicity and speed to ensure there isn't a long queue for the photobooth.

SECTION 3

Mobile App

This mobile app was designed to be primarily used by event planners who may own multiple photobooth devices and would need to manage them in real-time while hosting an event. For this reason, I prioritized ease of use to prevent cognitive overload in a busy and crowded setting.

The mobile app uses the same design language as the actual device to maintain coherence and give assurance to the users that they are using the correct companion application.

Below are some key screens of the mobile app; including the sign up, device pairing, and alert management.

SECTION 4

Design Language

The rebranding provided the perfect opportunity to establish a design system that was previously lackluster. Below is the visual style guide for the mobile app, modified from to the on-device software's design guidelines.

Color Styles

To maintain the casual nature of the device, we opted to sway away from grayscale for the neutrals and use eye-catching colors for the accents. In accordance to the HP visual guidelines, we removed all use cases of gradients.

Iconography

To maintain a consistency in the icons, we set the following rules:

Most icons should be outlines, rather than solid. Where appropriate, there will be exceptions.
The icons are used at the following sizes. Header icons : 32px. Toast message icons: 48px. Pop up icons: 64px.

Buttons

Since the footer takes up the entire width of the screen, the full size and small buttons can be used universally across the app. The only exception is within the pop ups, which require slightly smaller buttons due to limited screen space.

Elements (Mobile App)

Shown here are some other UI elements seen across the mobile app.

SECTION 5

Looking Forward

Reception at CES and IFA

As of October 2023, the HP Sprocket Photobooth has been at major technology summits for use by the general public. The device garnered positive attention, and we were able to learn about key pain points which have since been addressed.

Frame Overload

A huge part of the job for this product that went unmentioned is the production of 269 unique frames that the guests will be able to use to decorate their photos. The user interface to handle the frames was designed to be scalable for the future, as we plan to keep adding new frames alongside QoL features.

Expanding the Mobile App

Preliminary designs for the mobile app expansion have already been created, as we look to give the users more features at the convenience of their phones. The most impactful feature will be the ability to create and edit events on the go, expediting the setup process.

Lessons Learned

This project was an opportunity for me to craft a design system from scratch.

In summary, here are some key takeaways and improvements that will help me in the future.

Push for your vision. Although HP's branding could not be further from the casual vibes that a photobooth brings, we pushed forward with a design system that strays far from HP's typical blue and white.
Intuition is valuable. There was an internal debate over some navigational aspects of the Event Creation flow. This flaw had been in place before I joined the project, and I was met with denial when I suggested a change. It took a long time and some user testing data, but I was able to change the mind of higher-ups to implement my change, which has been received positively.