Valet65
Streamlined valet parking with an iOS app and QR code ticket.
The problem
For the customer
Valeting your car can be frustrating—even though it’s a luxury. You need cash to pay and tip your valet but society is increasingly cashless. Waiting is painful. Before queuing to pickup your car, you spend 5-10 minutes wrangling your kids and belongings. Then you wait outside for another 5-20 minutes in 30 degree heat. Hot climates help valet companies succeed.
For the valet company
Managing a valet business is difficult. Often, valet companies operate on antiquated systems. I mean, cash only??? Too often payments and tips slip into the valet’s pocket instead of the company bank account. The company doesn’t have visibility into their locations to understand who’s working, the number of cars parked at a time, revenue collected, and tips shared.
The solution
We streamlined the management of valet parking and improved the experience for customers in two key ways: we allowed for payment on the user’s smartphone rather than in cash and we created a virtual line up system, where users can notify the valet a few minutes in advance of when their car is needed. For the system to work, we built these five elements:
- An identity and brand to bring consistency across the system.
- A consumer smartphone app for paying the valet and requesting your car.
- A valet management app for valets to use.
- A scannable printed ticket for the customer and valet to scan.
- A hosted online service to tie the previously mentioned services together and provide the valet companies visibility into transactions.
Identity and brand
To kick off the project, I developed Valet65’s identity and brand. I presented 3 directions for Valet65 to choose from. They selected the first because it most closely aligned with the tastes of people who typically valet their car. This clear direction for Valet65’s identity paid off as we built out the system.
Architecture
Before starting in on any wireframing or visual design, I mapped actions and decisions a person would make to complete goals. This gave me an inventory of design needs.
With this high-level architecture mapped out, I was then able to start wireframing screens. The following is a deep dive into the user experience for the consumer and company apps.
Consumer app
Scan ticket
The QR code scanner is the first thing you see when opening the app. You hover your phone over a QR code. When the scan is successfully, you are taken to the home view. If the QR code is invalid, an error is appears.
Request your car
To request your car, tap the “Request Your Car” button on the home view. Allow push notifications from Valet65 and select when you want your car. You’re then taken back to the home view where the “Request Your Car” button now displays an “Arrives in ...” countdown.
Payment
On the home view, tap the “Pay Your Valet” button. Then enter your credit card information and tap submit. You’ll see a summary with the total. After you “Confirm payment”, you’re taken back to the home view. The “Pay Your Valet” button updates to “Paid”. We used Stripe for security and to speed up future transactions with stored credit card info.
Notifications from the valet
You recieve notifications from the valet when your car is on the way or ready. This way you don’t have to open Valet65 again after you’ve paid and requested your car. The “Arrives in ...” button changes to “Arrived” when your car is ready for pickup.
On the way
Ready
Scan a new ticket
The app resets to the QR code scanner after the valet closes out your transaction. You can scan another ticket any time by tapping the “Scan a new ticket” button on the home view.
Company facing app
For design of the company facing app, we used stock iOS 7 components because it isn’t customer facing.
Scan ticket
After logging into the Valet65 enterprise app, you see the “Cars In Queue”. To add a car to the queue, tap the “+” button and scan the QR code on the ticket. The “Add Details” view appears. Add a note with details about the car.
Photograph the car
Take a photo of the car to protect yourself from any liability issue.
Liability check and adding the car to the queue
After doing some beta testing with Skyline Valet—a Vancouver valet company—we added a “Liability Check” feature. This is a 1-tap way for the valet to be protected from any liability while the car is parked. Tap “Done” and the car is added to the “Cars In Queue”.
Notifications from customers
When a customer requests their car, you receive a push notification with the who, what, where, and ticket number of the car being requested. Tap “View Details” on the notification to see the car details in Valet65.
Car details and notifying customers
Tap on one of the “Cars In Queue” to see the car details. Tap “Car is on the way” or “Ready for pickup” to send a push notifications to the customer—letting them know you’re on the way or their car is ready.
Finding a car in a long queue
To find a car in a long queue, rescan the ticket by tapping the “Scan” button. When the scan completes, the car details appear.
Close out transactions
To clear completed cars from the “Cars In Queue”, tap the “Close Out” button in the car details. Confirm the “Close Out” on the action sheet.
Sharing a phone with another valet
Employees can log out when on a break or end of shift and share the phone with their coworker. The log in and log out data is also available to the company on the admin site.
Scannable printed ticket
Physical characteristics
I designed the tickets to be slightly oversized(2.75" x 7") so customers could easily find their stub burried deep in their purse. The ticket has 2 horizontal perforations for easy separation. The valet keeps the top half and customer keeps bottom half.
Structure of URL for QR codes
Valet tickets were printed using variable data printing. Big words, eh? Essentially, this means we could dynamically generate new QR codes for the tickets, which pointed to the “digital ticket” on the Valet65 servers.
The system for generating the QR codes had to scale along with the web service. Tickets were printed in batches for valet companies so the company ID number doesn’t change as often as the individual ticket number. Before the ticket number we inserted an random set of 8 numbers and characters. Without this a hacker could request someone’s car by generating a QR Code on the internet.
Web app for company management
I designed and did the front-end development for the company admin web app. This is where admins could check sales, set rates, enable/disable features within the iOS apps, and edit their company information. Nigel then hooked up my work to Valet65’s Parse instance.
Landing page
I also designed and developed a simple marketing website to direct traffic to the App Store.
Reflection
I really enjoyed working on this project because it served consumer and business needs. Valet65 came to us with an idea and we were able to build them what they needed to launch. We delivered an identity, app, printed ticket, admin web app, marketing websites, and App Store listing in less than 3 months!
Their concept wasn’t rocket science but as we followed our process, we simplified complexity lingering below the surface. As with every project, there are things I would change. Language on buttons and in push notifications could be more consistent and contextual. Many other UI elements within the system could have been improved.
The release of iOS 7 mid-project threw a wrench into the gears. We suddenly had back buttons that didn’t look like buttons. Product designers at that time were all to familiar with worry over buttons that didn’t look like buttons.
When I designed Valet65, good prototyping tools didn’t exist so we could’ve worked harder on UI animations instead of remaining in static spec-land. All of these stresses were compounded by time and budget constraints—meaning the number of iterations for various stages of the project were limited.
All of that said, I am super proud of how we actualized Valet65’s idea into fully functional startup in less than 3 months—otherwise I wouldn’t have this in my portfolio! 😁