We went through all the key sections and outlined what features we needed
Preston Crouse
Sr UI/UX Designer
Mobile Virtual Terminal
Auctions
Crafting a event management mobile/tablet app built specifically for non-profit auctions
Challenge
Many organizations use volunteers to help during their charity auction events. These volunteers help with registration, donors placing bids, and checkout services for the event all using our Virtual Terminal web app. With many of these helpers being volunteers they often don't have experience using the web app which isn't terribly intuitive. The auction side of the web app was built quickly to launch with the mobile app and it needed some good'ole TLC.
Our organizations need something they can give access to all their volunteers and without the need for purchasing laptops or additional hardware. A volunteer with no prior knowledge of the Virtual Terminal system should be able to accomplish tasks such as registering a donor, placing a bid on an item, and opening checkout.
Organizations also were requesting a high level overview of the auction to see live totals during the auction.
Research
I reached out to our customer experience team to see what our organizations were looking for in the Virtual Terminal for Auctions. I met with several CX team members one-on-one to discuss complaints with the current web app, and gather feature requests also requested by organizations. One of the largest feature requests was a Dashboard overview specifically for the auction. Organizations wanted to be able to view high level stats on how much money was raised, top items, bottom items, and total registrants during the auction.
With these discussions and notes and hand I set off to consult with the team.
Kickoff + Whiteboard sessions
With every project, the team and I start with a kickoff meeting to go over the objectives of the project. What we are looking to accomplish and set our KPIs. I am leading these sessions and getting insight from our dev team and crucially from our customer experience team. They both are included in these meetings so I can capture everything we need in the mobile app. Here are some examples of sketches were we planned out the beginnings of the virtual terminal app.
Feature List
A dashboard view with live updating auction statistics and performance metrics during the event
The ability to take one-time donations from donors quickly and efficiently
Register bidders with available ticket packages
Place bids, make purchases, and donate to fund a needs on behalf of bidders
Check-in registered bidders by leveraging QR scanning of their ticket on the device.
An item detail view with an activity feed on it is performing in the auction
Facilitate checkout from the device by taking payment and managing item fulfillment tasks.
Usability was key. This app needs to be simple to use and something our organizations could give to volunteers who are unfamiliar with our system, but still be able to complete any task given to them.
Sample Process: Checking In a Attendee
Below is a map of how a virtual terminal operator can check-in a bidder using multiple methods that are available to them on the device.
The most important thing here is being able to check in the attendee as painlessly as possible and intuitive to use since many operators are going to be volunteers with the organization with limited exposure to the virtual terminal.
Requirements to check-in an attendee:
Be able to quickly search attendees and easily scan attendees who are not checked-in
Ability to scan attendees QR code via device
Enter/Edit any ticket information for the attendee prior to completing check-in
Verify a payment method is attached to the bidder and if not, the ability to add one.
Allow external card readers to connect to the app and have credit card swiping for adding quick payment methods to the bidder.
Here is a flow map on the process of checking in a bidder.
This was designed in Sketch and the prototype was built out in Invision
Sample Process: How to Place a Bid on an Item
Details:
This is a quick rundown of the steps involved with placing a bid for a bidder during the auction.
Design System
This entire app was designed and built using a design system. I created custom built scalable UI components in a Sketch library file to be referenced when needed and to keep my work files neat and organized. This helped tremendously in the design phase, I was able to complete the design in only a few weeks and the developers on my team could easily build out the components quickly and efficiently.
Tablet App Examples
In addition to the mobile app, we also developed a tablet app. This was crucial to our client since many of them use tablets to run checkout counters and registration stations.
Full Prototype
What I Learned
Design systems are an absolute game changer for both design and development. This was my first time spearheading the creation of one and it was an invaluable learning experience.
I also learned I should have pushed back more when we reached Auction Checkout. We had a new enhancement go into effect mid way thru development that did not fit with the old design. I would have liked to rethought the UX and molded it to something more compatible, but we had time restraints to launch the app that made it impossible.