Design + Build Team Hackathon

Project overview

In this one-day design-a-thon, you will be asked to work through the life cycle of a project brief: design, build, and review/critique.

In the morning, pairs will generate wireframes (hand drawn is fine) and a comp in Sketch. In the afternoon, pairs will swap comps with another team to build. At the end of the day we will have a formal group critique of both comps and static sites.

Why do this project and why do it in this format? Because it puts you in the designer’s shoes and in the shoes of a developer who is responsible for understanding and building a comp handed to them by a designer. You will build empathy and understanding around why design/UX matters, why it is important to understand the thinking behind a layout, follow a comp to the letter, and you will be pushed to explain and defend your design choices which will reinforce that the decisions that go into creating a layout are intentional, deliberate, and important.

General Requirements:

  • Take as much creative license as you like.

  • We provide fonts and a color palette below: we recommend you use them so you don’t burn through time looking for your own (but you totally can if you want to).

  • Your comp must have a desktop and mobile version. Be prepared to speak to your layout choices and be able to back them up. Your final live project must match the comp, be responsive, and be live on github pages.

  • Include a README with the repo that provides a brief overview of the project, and images of both the original comp and your version.



Design a user dashboard for a fitness tracking app. It must include the following elements:

  • a log of your recent workouts
  • the ability to set and track goals
  • a calendar to track your workouts

If you feel there are additional elements that should be a part of your comp, include them!


Data can be hard-coded in the final build – these will static pages. Remember: just like a designer, you do not have control of how the dev team you hand your comp off to chooses to build it.

We recommend finding 3 examples of reference/inspiration. These could be products you currently use, or could be examples you find on dribbble, behance, or similar sites. They don’t have to be the same product type, but should offer good examples of how to approach organizing content and effective UX. Screen grabs are fine, having 152,384 browser tabs of references open is fine (if you’re into that kind of thing), just have something to to help get the creative juices flowing.

Deliverables for THE MORNING

  • Complete the user persona worksheet to explain who your target user is, how the choices you’ve made solve a problem for them, and be ready to speak to how you address their preferences/needs with your design solution.
  • Wireframes (hand-drawn is fine) of your comp for mobile and desktop – we want to see your process and thinking.
  • Final comps for mobile and desktop layouts built in Sketch (or another tool you’re comfortable using). Button/hover/active states must be included (if and when applicable). Should be ready to hand-off to a dev team to build.


Deliverables for THE AFTERNOON

  • The static site pushed up and live on github pages. It should be fully responsive and match the comp.
  • A ReadMe in the project repo. It should include:

    • Screen Grabs of your final live site to compare with the original comp.
    • An brief overview of your product and thinking.

NOTE: This ReadMe will most likely be a collaborative effort between the Design and Build Teams to make sure all the information and thinking is covered. Therefore, you should make sure you have the following from the Design Team:

  • The explanation of who your target user is, and how the choices made solve a problem for them, address their preferences/needs, and are tailored to them.
  • Wireframes of the comp for mobile and desktop
  • Final comps for mobile and desktop


All Design Team + Build team combos pull up their comp and static site on the TVs and we go through them together as a group to celebrate what you’ve accomplished today. Lots of clapping, cheers, weird Louisa Noises, and high fives.

ASSETS: Use them, or don’t use them, but probably use them


Open Sans

  • Bold 700
  • Light 300

Open Sans for web

Open Sans to download to use with Sketch

Icon Set:

Download the icon set

Color Palette:

Use this palette

Lesson Search Results

Showing top 10 results