How my team used prototyping tools to build a web app MVP in a weekend

Think you can’t build a functional and well-designed MVP app in 16 hours? Think again.

I flexed my quick delivery chops recently at Hack the Gap, a two-day hackathon that teams designers, UXers, and developers together to rapidly prototype digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event to compete for prizes.

Basically, my team (of four developers) and I created something from nothing in 16 hours. And it was a great lesson in agility, timeboxing, collaboration, and problem-solving. All things that are essential daily in the digital industry, but thankfully at a slightly slower pace.

First, what we did and who we did it for

A team of five developers and I built a mobile-first online book catalog for the Little Free Library. If you haven’t heard of it before, chances are you’ve seen one in your neighborhood. The Little Free Library is a network of free micro-libraries run by members of the community where anyone is free to donate or take a book. We chose this as our project because we loved the cause of the Little Free Library and wanted to increase its reach by making the local inventory more visible to the public, particularly to communities who might have less access to books.

Now, how we did it

Time is precious in a hackathon–the goal is to build something as quickly as possible. If our team was going to have a working prototype for our demo, we couldn’t afford to have developers sit on their hands while I crafted a fully polished design. Everyone had to start working immediately. Here’s how we did it.

We quickly aligned on features and flow

Right away, the team started whiteboarding what the app should do and the user flow we wanted to demo. It was important that we all got on the same page with the features and functionality from the start so as we completed our individual tasks, we’d all have a shared understanding to refer back to. After we aligned, everyone had a rough understanding of what content would be on each screen and a broad-stroke idea of the layout.

Real-world take away

Sometimes all you need is just enough of a roadmap for team members to see the vision. By sticking to the lowest fidelity of needs, you don’t waste time on details. Even when you’re not timeboxed to 16 hours, you can apply this approach. Overproduction can waste time on details you don’t need to know now.

We worked separately by communicating updates instantly

Next, the developers started setting up their environments and creating back-end functionality while I created high-fidelity wireframes in Sketch. It was important to give developers solid layouts as soon as possible without getting slowed down by all the design details like fonts, colors, or image selection.

I quickly set up an Invision prototype for our project and shared out the public links in our team Slack channel. As I completed new screens (or got even close to complete), I would immediately sync the changes in our Invision prototype using Craft and let the team know that new updates were ready.

Real-world takeaway

A waterfall process doesn’t really serve digital projects well. Using real-time design tools allows the full team to work synchronously, which is key to digital culture and digital collaboration. For us, real-time sharing of design files allowed the developers to track progress, which enabled us to call out any misalignments quickly and easily. Saying “This isn’t what I was thinking, let’s touch base” is way easier after hour two (or week two) than at hour 14 (or a week before launch).

We shared evolving CSS styles in real time

As I was designing screens I made sure to add in my heading and fill styles in Sketch. This way, I could use placeholder colors and headings styles in my design, knowing I had the option to easily update them across all my screens at any time. Quick iteration was key to delivering design as fast as possible.

Next, I synced all my styles in Sketch with Invision’s Design System Manager using their Sketch plugin. None of my team had Sketch or Invision inspect, so there wasn’t an easy way to share the CSS styles in my document.

That’s where DSM saved the day. I could communicate everything about heading styles–like color, font sizes and even line heights–with a few clicks and a handy public share link. This let me focus on wireframes and design and not creating style guides that would be outdated in an hour.

Real-world takeaway

Experiment with new workflows and new tools to find solutions. Every project can benefit from this level of transparency between designers and developers. Tools like Invision, DSM, and Craft help me, as the sole designer, break up the work into sequences that allow everyone to fulfill their highest and best use (them: build, me: design the look and feel).

We saved finishing touches for last

Once the wireframes were done, it was time to start adding the finishing touches. The developers had everything that they needed to build a skeleton of each screen so I had a little more breathing room to craft a unique look-and-feel for the final product. I worked on refining type and adding a playful color palette. Thanks to Sketch, Craft, Invision, & DSM, all of my screens in my design document, online prototype, and online style library updated instantly as the look and feel evolved.

We worked so well within the time, that I even got to design above and beyond the prototype. Once I had final screen designs and a polished style guide, I had turned to some finishing touches, such as the book genre iconography and final copy.

Ta-da!

Have questions about design, design collaboration, or working on cross-functional teams? Email me.