{"id":2184,"date":"2019-03-15T19:25:30","date_gmt":"2019-03-15T19:25:30","guid":{"rendered":"https:\/\/www.clockwork.com\/?p=2184"},"modified":"2023-08-07T19:50:44","modified_gmt":"2023-08-07T19:50:44","slug":"how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend","status":"publish","type":"post","link":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/","title":{"rendered":"How my team used prototyping tools to build a web app MVP in a weekend"},"content":{"rendered":"\n

Think you can\u2019t build a functional and well-designed MVP app in 16 hours? Think again.<\/p>\n\n\n\n

I flexed my quick delivery chops recently at Hack the Gap<\/a>, 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

First, what we did and who we did it for<\/h2>\n\n\n\n

A team of five developers and I built a mobile-first online book catalog for the Little Free Library<\/a>. If you haven\u2019t heard of it before, chances are you\u2019ve 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.<\/p>\n\n\n\n

Now, how we did it<\/h2>\n\n\n\n

Time is precious in a hackathon\u2013the goal is to build something as quickly as possible. If our team was going to have a working prototype for our demo, we couldn\u2019t afford to have developers sit on their hands while I crafted a fully polished design. Everyone had to start working immediately<\/em>. Here\u2019s how we did it.<\/p>\n\n\n\n

We quickly aligned on features and flow<\/h3>\n\n\n\n

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\u2019d 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.<\/p>\n\n\n\n

Real-world take away<\/h3>\n\n\n\n

Sometimes all you need is just enough <\/em>of a roadmap for team members to see the vision. By sticking to the lowest fidelity of needs, you don\u2019t waste time on details. Even when you\u2019re not timeboxed to 16 hours, you can apply this approach. Overproduction can waste time on details you don\u2019t need to know now.<\/p>\n\n\n\n

We worked separately by communicating updates instantly<\/h3>\n\n\n\n

Next, the developers started setting up their environments and creating back-end functionality while I created high-fidelity wireframes in Sketch<\/a>. 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.<\/p>\n\n\n\n

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<\/a> and let the team know that new updates were ready.<\/p>\n\n\n\n

Real-world takeaway<\/h3>\n\n\n\n

A waterfall process doesn\u2019t 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 \u201cThis isn\u2019t what I was thinking, let\u2019s touch base\u201d is way easier after hour two (or week two) than at hour 14 (or a week before launch).<\/p>\n\n\n\n

We shared evolving CSS styles in real time<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Next, I synced all my styles in Sketch with Invision\u2019s Design System Manager<\/a> using their Sketch plugin. None of my team had Sketch or Invision inspect, so there wasn\u2019t an easy way to share the CSS styles in my document.<\/p>\n\n\n\n

That\u2019s where DSM saved the day. I could communicate everything about heading styles\u2013like color, font sizes and even line heights\u2013with a few clicks and a handy public share link. This let me focus on wireframes and design and not<\/em> creating style guides that would be outdated in an hour.<\/p>\n\n\n\n

Real-world takeaway<\/h3>\n\n\n\n

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).<\/p>\n\n\n\n

We saved finishing touches for last<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Ta-da!<\/h3>\n\n\n\n

Have questions about design, design collaboration, or working on cross-functional teams? Email me.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Think you can\u2019t 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[53,23],"tags":[],"coauthors":[4],"class_list":["post-2184","post","type-post","status-publish","format-standard","hentry","category-culture","category-experience-design"],"acf":[],"yoast_head":"\nHow my team used prototyping tools to build a web app MVP in a weekend<\/title>\n<meta name=\"description\" content=\"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How my team used prototyping tools to build a web app MVP in a weekend\" \/>\n<meta property=\"og:description\" content=\"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\" \/>\n<meta property=\"og:site_name\" content=\"Clockwork\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/clockworkactivemedia\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-15T19:25:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-07T19:50:44+00:00\" \/>\n<meta name=\"author\" content=\"cw_admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Clockwork_Tweet\" \/>\n<meta name=\"twitter:site\" content=\"@Clockwork_Tweet\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\"},\"author\":{\"name\":\"cw_admin\",\"@id\":\"https:\/\/www.clockwork.com\/#\/schema\/person\/c1e00961e7d1743d3346473083b7ce43\"},\"headline\":\"How my team used prototyping tools to build a web app MVP in a weekend\",\"datePublished\":\"2019-03-15T19:25:30+00:00\",\"dateModified\":\"2023-08-07T19:50:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\"},\"wordCount\":1019,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.clockwork.com\/#organization\"},\"articleSection\":[\"Clockwork culture\",\"Experience design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\",\"url\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\",\"name\":\"How my team used prototyping tools to build a web app MVP in a weekend\",\"isPartOf\":{\"@id\":\"https:\/\/www.clockwork.com\/#website\"},\"datePublished\":\"2019-03-15T19:25:30+00:00\",\"dateModified\":\"2023-08-07T19:50:44+00:00\",\"description\":\"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.clockwork.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/www.clockwork.com\/insights\/category\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Experience design\",\"item\":\"https:\/\/www.clockwork.com\/insights\/category\/topics\/experience-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How my team used prototyping tools to build a web app MVP in a weekend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.clockwork.com\/#website\",\"url\":\"https:\/\/www.clockwork.com\/\",\"name\":\"Clockwork\",\"description\":\"We create human-centered digital experiences.\",\"publisher\":{\"@id\":\"https:\/\/www.clockwork.com\/#organization\"},\"alternateName\":\"Clockwork: Custom Software Solutions & Experience Design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.clockwork.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.clockwork.com\/#organization\",\"name\":\"Clockwork\",\"url\":\"https:\/\/www.clockwork.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.clockwork.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.clockwork.com\/wp-content\/uploads\/2022\/07\/clockwork.svg\",\"contentUrl\":\"https:\/\/www.clockwork.com\/wp-content\/uploads\/2022\/07\/clockwork.svg\",\"width\":93,\"height\":48,\"caption\":\"Clockwork\"},\"image\":{\"@id\":\"https:\/\/www.clockwork.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/clockworkactivemedia\",\"https:\/\/x.com\/Clockwork_Tweet\",\"https:\/\/www.linkedin.com\/company\/clockwork-active-media-systems\"],\"description\":\"Experience design & technology consultancy. We build enterprise websites, software platforms, and mobile apps with a human-centered approach.\",\"legalName\":\"Clockwork\",\"foundingDate\":\"2001-01-01\",\"naics\":\"541511\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"51\",\"maxValue\":\"200\"},\"actionableFeedbackPolicy\":\"https:\/\/www.clockwork.com\/accessibility-statement\/\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.clockwork.com\/#\/schema\/person\/c1e00961e7d1743d3346473083b7ce43\",\"name\":\"cw_admin\",\"sameAs\":[\"https:\/\/www.clockwork.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How my team used prototyping tools to build a web app MVP in a weekend","description":"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/","og_locale":"en_US","og_type":"article","og_title":"How my team used prototyping tools to build a web app MVP in a weekend","og_description":"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.","og_url":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/","og_site_name":"Clockwork","article_publisher":"https:\/\/www.facebook.com\/clockworkactivemedia","article_published_time":"2019-03-15T19:25:30+00:00","article_modified_time":"2023-08-07T19:50:44+00:00","author":"cw_admin","twitter_card":"summary_large_image","twitter_creator":"@Clockwork_Tweet","twitter_site":"@Clockwork_Tweet","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#article","isPartOf":{"@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/"},"author":{"name":"cw_admin","@id":"https:\/\/www.clockwork.com\/#\/schema\/person\/c1e00961e7d1743d3346473083b7ce43"},"headline":"How my team used prototyping tools to build a web app MVP in a weekend","datePublished":"2019-03-15T19:25:30+00:00","dateModified":"2023-08-07T19:50:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/"},"wordCount":1019,"commentCount":0,"publisher":{"@id":"https:\/\/www.clockwork.com\/#organization"},"articleSection":["Clockwork culture","Experience design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/","url":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/","name":"How my team used prototyping tools to build a web app MVP in a weekend","isPartOf":{"@id":"https:\/\/www.clockwork.com\/#website"},"datePublished":"2019-03-15T19:25:30+00:00","dateModified":"2023-08-07T19:50:44+00:00","description":"Hackathon team rapidly prototypes digital products that impact the community. After the prototypes are done, we pitch them at a public demo-day event.","breadcrumb":{"@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.clockwork.com\/insights\/how-my-team-used-prototyping-tools-to-build-a-web-app-mvp-in-a-weekend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clockwork.com\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/www.clockwork.com\/insights\/category\/topics\/"},{"@type":"ListItem","position":3,"name":"Experience design","item":"https:\/\/www.clockwork.com\/insights\/category\/topics\/experience-design\/"},{"@type":"ListItem","position":4,"name":"How my team used prototyping tools to build a web app MVP in a weekend"}]},{"@type":"WebSite","@id":"https:\/\/www.clockwork.com\/#website","url":"https:\/\/www.clockwork.com\/","name":"Clockwork","description":"We create human-centered digital experiences.","publisher":{"@id":"https:\/\/www.clockwork.com\/#organization"},"alternateName":"Clockwork: Custom Software Solutions & Experience Design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clockwork.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.clockwork.com\/#organization","name":"Clockwork","url":"https:\/\/www.clockwork.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.clockwork.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.clockwork.com\/wp-content\/uploads\/2022\/07\/clockwork.svg","contentUrl":"https:\/\/www.clockwork.com\/wp-content\/uploads\/2022\/07\/clockwork.svg","width":93,"height":48,"caption":"Clockwork"},"image":{"@id":"https:\/\/www.clockwork.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/clockworkactivemedia","https:\/\/x.com\/Clockwork_Tweet","https:\/\/www.linkedin.com\/company\/clockwork-active-media-systems"],"description":"Experience design & technology consultancy. We build enterprise websites, software platforms, and mobile apps with a human-centered approach.","legalName":"Clockwork","foundingDate":"2001-01-01","naics":"541511","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"51","maxValue":"200"},"actionableFeedbackPolicy":"https:\/\/www.clockwork.com\/accessibility-statement\/"},{"@type":"Person","@id":"https:\/\/www.clockwork.com\/#\/schema\/person\/c1e00961e7d1743d3346473083b7ce43","name":"cw_admin","sameAs":["https:\/\/www.clockwork.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/posts\/2184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/comments?post=2184"}],"version-history":[{"count":12,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/posts\/2184\/revisions"}],"predecessor-version":[{"id":5628,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/posts\/2184\/revisions\/5628"}],"wp:attachment":[{"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/media?parent=2184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/categories?post=2184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/tags?post=2184"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.clockwork.com\/wp-json\/wp\/v2\/coauthors?post=2184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}