Feature list options for donors during an auction
Preston Crouse
Sr UI/UX Designer
Givi + Auctions
Designing a new way for donors to interact in a non-profit auction using their mobile devices
Challenge
Several of our clients hold charity auctions for their donors and we offered no product to help them with these events. We lost many perspective organizations simply for not having any auction related. So how do we build a product that not only meets our clients needs but exceeds them? Enter the Givi Auction app.
Research
We started out researching how charity auctions were ran and viewing ways we could improve the experience. What we noticed is many auctions using pen & paper to capture bids, using volunteers to record the bids, and then watching chaos in-sue during checkout. Long lines, difficulty of know what bidder won what item and worst of all donor complaints were all common.
We even explored other auction apps at charity events. We found that the overall UI in these apps were lacking and many apps were simply web views within the app. The act of placing a bid took time, out-bid notifications were often slow and ages behind the bid history. The whole checkout process was confusing and unintuitive.
So… how could we make it better?
Our findings
Build the auction app inside the current one time donation app called Givi. The auction app should have it's own styling similar to Givi but separate. This will cut down on development cost.
Attendees for the auction should be able to register in app and manage multiple registrations.
Notifications are huge. We need a view to see all notifications on the bidders items and allow them to manage notification settings.
Bidding must be dead simple. This should be something a donor can do with one hand and a drink in the other.
Gamify the experience. This app needs a killer hook to catch the donor and keep them bidding.
Leverage QR codes for check-in and use them as the bid paddle for silent auction events. The bidder should also be able to scan an items QR code to quickly place a bid in the app.
A bidding history per item to see who all is bidding and who is the current winner on the item.
Checkout should have a list of all the items the bidder won and be able to pay within the app.
Kickoff + Whiteboard sessions
My team of our Product Head, Mobile Team Lead/Android Developer, iOS Developer and me the UI/UX Designer set out to determine our key findings from all the research we had done.
We did a few whiteboard sessions to try flesh out ideas and features to include in the app.
The auction home screen
Wireframing Phase
With the kickoff and whiteboarding sessions done, I dove into the wireframing of the app using (at the time) a new tool AdobeXD. I started with framing out the tentpole screens of the app and to get an idea of the structure of the app.
This helped me define the main navigation, notifications, item details, and bid paddle functionality
Auction homepage with the new UI
UI Design
With the wireframes approved by stakeholders and general flow mapped out I moved on to the UI design of the app.
This proved to be challenging as we wanted the auction app to have a separate styling from the main Givi app. It needed to have a distinct look and feel to reinforce that the donor was entering a new section of the app.
This shows some other micor-animations I designed but were cut due to time constraints. The "Swipe to Bid" was ultimately built and a big hit with our client/donors.
Swipe to Bid Interaction
One key aspect to the mobile app is the Swipe to Bid action for placing a bid on an item. During our in-house testing with the Qgiv team and perspective clients, they fell in love with this little feature. It has become the central hook in the app and reinforced the feedback loop to keep donors bidding on items.
Many noted how they loved swiping and then seeing the outbid notification immediately after bidding, this in turn led them to keep swiping to get the winning bid notification.
Lessons Learned
Make sure your design tools are a right fit for the project. XD at the time was still fairly new and I had only lightly experimented with it. It seemed like it could handle the task, however once I got further into the nitty gritty of the app it started to show holes.
I also would have liked to push more micro-animations. We only ended up keeping a few but it's something I think could have added polish to the app.
I was privileged enough to go to the very first auction to use the Givi app. I got to see the app in action with real donors and I saw a lot of what worked and what needed to be improved. I took detailed findings and eagerly worked on improving the app.
3
Internal Testing Sessions
2
Organizations Testing Sessions
10+
Auctions within the first 3 months of launch
+10%
Increase in Organizations signings