Image for post
Image for post
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.

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.

Image for post
Image for post

Results

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

  • Won 2nd Place overall
  • Competed against 10 groups for a total of 75 coders
Image for post
Image for post

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.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Product designer focused on UX/UI and user research (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