Preston Crouse
UX designer

Givi + Auctions

Designing a new way for donors to interact in a non-profit auction using their mobile devices

Image alt tag

Challenge

Be the first to the market with a native mobile auction experience that is far more responsive than the traditional mobile web options many of our competitors use for their events. We need to design an app that can leverage the devices onboard technologies like the camera for QR scanning and push notifications to deliver instant outbid notifications to the donor.

Feature List

  • A build the auction app inside the current mobile app called Givi. The auction app should have it's own styling similar to Givi but separate.

  • Givi one-time donation side of the app, should remain untouched as to not interfere with organizations fundraising goals.

  • Attendees for the auction should be able to register in app and manage tickets

  • Notifications are huge. We need a view to see all notifications on the bidders items and allow them to manage notification settings

  • 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.

  • An activity view per item to see who all is bidding and who is winning the item.

  • Ease of use and gamify the experience. This app needs a killer hook to catch the donor and keep them bidding. It also needs to be easy to use after a couple of drinks and something you can use while holding a beer (one-handed).

Feature list options for donors during an auction

Feature list options for donors during an auction

Kickoff + Whiteboard sessions

This was my first project with the team at Qgiv and when I joined some preliminary research and planning prior to my arrival. A few team members had gone to some physical auctions and gathered notes. This was incredibly helpful as I was unfamiliar with how these events worked.

We did a few whiteboard sessions to try and bring me up to speed and for me ask questions.

The auction home screen

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

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

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.