Glossy Finish Responsive Web App
Glossy Finish (GF) is a youth sports action photography company that prints on-site athlete photos via their mobile-photo lab - a trailer outfitted with 11 computers. Customers can view, save and order photos from customized software installed on these computers.
GF wanted to rebuild their software into a responsive web app so customers could more conveniently access their athlete’s photos on their mobile devices. I designed this app and worked remotely with the front-end developer for 5 months for the first release in December 2021.
Role: UX & UI Designer, Project Manager
Design Tools: Axure, Illustrator
Client: Glossy Finish
The Problem
Customers had to physically come to the lab to view and order their photos. There was no way for them to access the photos during the event from their own devices or from their lodging.
Having only 11 computers caused a bottleneck at large tournaments. Dozens of parents were stuck waiting in line waiting for their turn to view their athlete’s photos. Many would skip buying photos entirely if they didn’t want to wait in line, resulting in lost revenue.
The Solution & Project Scope
Rebuild photo lab software into an AWS-based responsive web app so customers could more conveniently access their athlete’s photos on their mobile devices without having to come to the lab.
I was responsible for designing a responsive prototype for workflows that allowed the customer to:
Login to the app using the her phone number and 2FA
Search for her athlete’s photos across multiple event galleries
Save photos from an event gallery to her profile
Mark a saved photo as a Favorite to narrow down her choices
Customize a multi-shot print product by choosing from saved photos
Share a direct link to her saved photos gallery
Order and pay for a print product or digital download
Discovery Phase
In my dual role as Project Manager, I outlined a timeline for the overall project. Based on the Agile framework, the developer and I divided the work into 3-week sprints. At the end of each sprint, we demoed completed items for client feedback via Google Meet. We then incorporated the feedback as tasks to prioritize in the following sprint. We kept track of tasks using ClickUp.
**Timeline created in Google Docs**
In requirements gathering sessions with the business partner, I identified the primary and secondary user personas for the app. I created the templates below and focused on Rachel as the primary persona since moms are typically the customers choosing and ordering photos of their athlete at the event.
**Personas created in Axure**
To verify requirements and navigation, I mapped out high-level workflows from Login to Checkout.
**Workflows created in Axure**
Design Phase
Using Axure’s responsive prototyping feature, I created desktop, tablet and mobile views of the designs.
For example, the slideshow below features:
Responsive navigation - Layout of nav header changes across breakpoints. I also depicted UI variations based on logged in status, cart status, and saved photos activity.
Event Finder - Provide customers with an easy way to search for their athlete’s photos across multiple event galleries.
By observing customers’ behavior in the photo lab, I know they spend the most amount of time in the event gallery grid view, where they scroll through hundreds of photos to find ones of their specific athlete.
The client wanted to give customers the ability to “Save” a photo to their profile as well as mark it as a“Favorite” to help them narrow down selections when it came time to order a product. I used the prototype to test different icons to represent this functionality.
I conducted usability testing.
Based on the feedback, I recommended that buttons explicitly labeled “Save” and “Favorite” would lessen confusion about the actions the customer could apply to a photo. The labels would switch to an icon after being clicked, which would train the user on the meaning of the icon.
Customizing & Ordering Products
Demo of prototype interaction for choosing a product.
In the photo lab, there was only one cashier. After choosing photos and placing an order, customers would have to wait in another line to pay. This created a bottleneck. The lab was also only open for certain hours during the event. Parents wouldn’t be able to buy anything if they arrived at the lab outside of working hours.
By allowing customers to customize and order products from their devices, this increased revenue opportunities. Customers could submit orders anytime during the event from wherever they had an internet connection. They could also self-select whether they wanted to pick up their photos at the lab or pay a small shipping fee. Previously, the cashier would have to manually ask for their preference.
The Impact of the App
-
Matt Winer, CTO of Glossy Finish
“The customer experience from a new technology perspective was awesome. 90% of the people hitting the site are mobile users.
People are super excited to be in the stands after their 8am game and getting a link to view their photos. We have online chat support running and haven't had anybody yet say they were completely lost or it didn't work or anything like that.
AND... we are also tracking the online upsell capability. It's at 65-70% which is ON PAR with how staff does [face-to-face upselling].
In our first of eleven busy weeks, we exceeded sales goals, we're upselling, customers are viewing until 1am, it's ALL GREAT! We are already realizing the potential of this new app and already expanding it to more events next weekend.
Awesome work and well done.”