The document provides guidance on designing solutions for hackathon projects, emphasizing user-centered design principles such as understanding user needs and behaviors rather than forcing users to change. It outlines best practices for each stage of design including brainstorming, prototyping, testing, and visual design tips to create an intuitive and polished final product. Resources are also listed to help teams design and prototype their solutions without an expert designer.

1. Everyone Hacks:
Design Workshop
Sheba Najmi & Gwen Brinsmead
Twitter: @snajmi | @gwenbrin

3. Design solves a specific problem
for a specific user

4. User Centered Design
Design to enhance the user experience by
mimicking natural user behaviors.
Avoid forcing users to change their behavior
to accommodate the product.

5. The Chair

6. The Chair

7. The Door Handle

8. What problem will your hack's
design solve?

9. What problem will your hack's
design solve?
For [target audience],
[who want to do x / are dissatisfied with y],
our service is a [product category]
that provides [benefits].
Courtesy of Hot Studios

10. Brainstorming & Prioritization

11. Brainstorming Rules
1. Defer judgment
2. Encourage wild ideas
3. Build on the ideas of others
4. Stay focused on the topic
5. One conversation at a time
6. Be visual
7. Go for quantity

12. Evaluation & Prioritization
When in doubt,
make a list

13. Prototyping &
User Testing

14. Sketching

15. Wireframes

16. Number of Test Users

17. Lo-fi: Paper Prototype Testing

18. Iteration
Design
Test Prototype

19. Market Research
● Surveys
● Talk to other hackathoners
● Ask people online
● Find stats
● Research competition
This is very valuable information for when
you present to the judges.

20. Visual Design Tips

21. Visual Design Tips
Color
● Use no more than
3 colors
○ Main
○ Accent
○ Text

22. Visual Design Tips
Layout
Present a clear
content hierarchy.
How-to:
● Use a grid
● Use familiar design
elements

23. Visual Design Tips
Typography
● Give sufficient line spacing ~1.2
● Use colors with a good contrast
● Only 1 or 2 fonts
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in
voluptate velit esse cillum.

24. Visual Design Tips
Personality Layer
● Use humor
● Evoke a reaction
from your users

25. Visual Design Tips
Streamline Your Process
● If No Developer
○ Mockup screens, click-through demo
● If No Designer
○ Sometimes designers join multiple teams. Ask!
● For Web Apps
○ Use Twitter Bootstrap + a theme
● For iOS/Android Apps
○ Use pre-made UI elements + icons

26. Resources

27. Surveys HTML/CSS Frameworks
● Wufoo ● Twitter Bootstrap
● SurveyMonkey ● Zurb Foundation
Color
Pre-made UI Elements
● Colourlovers
● Kuler ● Native GUI - Teehan + Lax
● Noun Project
Typography ● Design Kindle
● Google Web Fonts ● Pixel Eden
● Font Squirrel ● Pixel Bin
● We Love Icon Fonts
Mockups ● Subtle Patterns
● Invision
● Moqups

28. Q&A