case study - 2020

Liff Happens

How we redesigned a lost-and-found tool for major event spaces
Liff Happens is a web application for event staff members to streamline the lost-and-found process online and in-person. We were asked to find solutions to its current inefficiencies with the business goal of higher ROI and partnerships in different industries once large events open up again.
The Team
Justin Kim, Product Designer
David Morales, Product Designer
Tools
Figma, Miro, Zeplin
My Role
Strategy, User Research,
Information Architecture, Visual Design
Timeline
3 weeks

The Problem

Defining the Challenge

After doing research with core staff users, we discovered the most relevant pain points based on the users' needs, the business's needs, and the product's needs.
Usability
Unclear button affordance, super long workflows to do 1 task, overlapping web pages with no defined goal, confusing information architecture
Visuals
Overly gray scale, confusing icons, lack of event branding
The original application

“It can feel like I'm going through a loop to get to the same spot”

- Angie, Coachella lost-and-found staff member

Our Design Goal

Staff User
Short tasks
Easy training
Intuitive navigation
Visual rebrand
Product
High marketability
Customer retention
Business

Our Solution

Our Solution

Skip to Design Process

“Makes me feel like they can do their job. I feel confident that my staff would be able to use this."

- Vicky, Goldenvoice Director

“This is way better. You guys are looking at it from the users’ perspective...this is really friendly."

- Elizabeth, Coachella lost-and-found staff member

We also had time to spare to redesign the customer-facing website, which helped to meet the business goal of customer retention by improving the experience for both staff and customers.

Key Features

1. Logging an Item
Reduces task flow from 4 pages to 2
Homepage
Logging item details
2. Processing a Claim
Proactively and automatically creates a lost-and-found claim for item without manual input from staff
In-Person
Remote
3. Creating an Alert
Allows flexibility for staff to create alerts for item owners and extend expiration dates for higher return rate in case item shows up
Creating alert
Viewing alerts
4. Returning an Item
Tracks all relevant info for shipping to item owners for guaranteed returns
Viewing item shipment info
Viewing approval status for shipment

Key Features

Design Process

Client Timeline

The biggest challenge was understanding what the product's MVP and separate features were to trainers and clients, and then translating that information to be easily digestible on a website.
Monday - Tuesday
Understand
Presentation for stakeholder approval and feedback on our designs
Tuesday - Wednesday
Ideate & Decide
Brainstorm design solutions from user research and stakeholder takeaways
Thursday - Friday
Prototype & Validate
Create low-fi wireframes for user testing and a second round of hi-fis

Understanding the Problem

To narrow down the most relevant issues to tackle, we created an affinity diagram to map out the overlapping findings among users after doing usability testing on the original application. What were the biggest pain points?
User Interview Affinity Diagram

Ideating a Solution

Information Architecture
After learning to focus on decreasing number of touchpoints and increasing ease of learning, we reduced the number of main navigation pages and re-ordered the sections by likelihood of traffic and order of steps in the lost-and-found process
Original IA
New IA
User Flows
After learning to focus on decreasing number of touchpoints and increasing ease of learning, we reduced the number of main navigation pages and re-ordered the sections by likelihood of traffic and order of steps in the lost-and-found process
1. Logging an Item
2. Creating an Alert
3. Processing a Claim
4. Returning a Claim

Testing Our Assumptions

Wireframes
We revised multiple elements, such as a navigational header, side filter, list view, clear CTAs, pop-up modals, glanceable analytics, and logo placement for easy usability for staff. These insights were found through our first round of usability testing.
Success
Opportunity
clear CTA
pop-up modal is easy to exit
side filter
unnecessary steps
missing scan feature
important CTAs hidden on default view
redundant questions
quick analytics
small emphasis on important info

Success Metrics

Out of a 5, we asked our users to rate their overall experience according to these categories. We did two rounds of testing for feedback: wireframes and hi-fidelity prototypes to prove improvement for the client.
Wireframe

4.0

Satisfaction

4.0

Usability

4.4

Clarity
rating scale: 1=strongly dislike, 2=dislike, 3=neutral, 4=like, 5= perfect
Hi-fidelity Prototype

4.4

Satisfaction
15% up

4.4

Usability
15% up

4.7

Clarity
7% up

Visual Design

Due to a tight deadline, we prioritized the usability over creating a full design system. The client wanted to keep the original brand colors and logo, so we created a style guide of cool hues, clear typography, and Material Design's consistent iconography.

Next Steps

We packaged our final designs to be handed off to the client's engineering team, with annotations on further improvements based on feedback from the last round of testing. The client was great to work with, as they gave us full confidence in our design decisions. However, we had a few constraints on our side from working remotely during a pandemic:
User Testing
Including feedback from our remote user testing, subject matter experts and client, we also made a lot of assumptions on how a real life stimulation would happen. However, they couldn't be full validated without testing the product at a real event.
Success Metrics
Due to the lack of public events, this product has not been shipped out to be used in real time yet. Otherwise, we would have measured our success metrics by the return rate of lost items and how quickly staff were able to process their workflows.

Next Steps

Next Project //

The Bright App

© 2021 by Brittany Nguyen | Made with lots of Youtube tutorials.