We went through all the key sections and outlined what features we needed
Mobile Virtual Terminal
Crafting a event management mobile/tablet app built specifically for non-profit auctions
Adapt our existing virtual terminal web experience to a mobile platform, while also leveraging on-device technologies such as the camera for qr code scanning. We wanted to improve on some of the pain points from the web experience and introduce a new dashboard view to give a holistic view on the auction.
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.
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.
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.
Sample Process: How to Place a Bid on an Item
This is a quick rundown of the steps involved with placing a bid for a bidder during the auction.
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.
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.