On April 7, 2016, I collaborated with two other coders at the DocuSign ’16 Momentum hackathon, where we built an app for Team Rubicon. We won “Best Mobile App Solution” and 2nd place overall.

Disaster-proof design for Team Rubicon

Learning on the go at DocuSign’s 2016 Momentum hackathon

I worked with two other coders as the UX/UI designer at DocuSign’s “Hack for good” hackathon in 2016. DocuSign pairs with a nonprofit each year, so that designers and coders get to work on real life challenges — this year, we partnered with Team Rubicon, an American non-government disaster relief organization comprised of over 35,000 veterans.

Our team built a web and mobile app to help Team Rubicon manage liability and consent waivers that need to get signed on mobile in disaster zones by volunteers and disaster victims (renters and homeowners), utilizing the DocuSign API.

Team

  • Jessie Black, Developer — C#, Windows Visual Studio
  • Nick Reed, Developer — Cordova, JavaScript
  • Clayton Hopkins, Designer — Sketch, InVision App

Timeframe

28 hours on April 6–7, 2016.

Tools

I designed wireframes and UI assets with the Sketch App, and made a prototype using InVision App.

Challenge

Team Rubicon deploys volunteers to disaster zones. Once on site at homes destroyed by a disaster, about 15–100 Veterans show up per event. The site coordinator also gets inundated by other volunteers from the community, such as church groups or fraternities. Every volunteer and disaster victim (renters and homeowners, alike) must sign waivers before any work gets done.

At the time, Team Rubicon had a 20% Waiver Compliance Rate. All signed waivers collected on site were often lost due to mobile connectivity issues — hence, Team Rubicon had a large liability on project sites where they lost waivers signed by homeowners, granting them permission to conduct disaster relief work at people’s homes.

Results

We demoed our working app and prototype to a panel of judges after 28 hours:

  • Won 1st Place for “Best Mobile App Solution”
  • Won 2nd Place overall
  • Competed against 10 groups for a total of 75 coders

Highlights from our process

  • User interviews — Team Rubicon staffed the hackathon with volunteers and team leads. I spent time interviewing several of the target users to understand their needs, behaviors, and pain points associated with the challenge.
  • Fast, iterative sketching —Due to the lack of available time, I sketched a lot of ideas to align our team.
  • Wireframes using the Sketch app — Once we talked through a few of our options and got feedback from Team Rubicon, we proceeded with the winning design solution.
  • Prototype using InVision — I stitched together wireframes to show key interactions into the form of a lightweight prototype.
  • Feedback and iterations — I used the prototype to test and validate our ideas. We sorted through user’s questions and confusion to decide what iterations to prioritize.
  • Demo — We presented the clickable prototype and working code to the panel of judges.

Thank you for checking out our work. All in all, it was a really fun 28 hours learning about Team Rubicon’s technology needs to support disaster relief efforts and veteran reintegration efforts in the US.

Product designer focused on UX/UI and customer development (he/him) claytonhopkins.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store