Design for Technology Companies: why you should never use Photoshop again.

Design for Technology Companies: why you should never use Photoshop again.

My opinions on how we should be doing design at tech companies. Hint: lean + jobs to be done.

First given at #SFRails, June 2014

Reading on jobs to be done:
- Hayden Christensen on the Harvard Business School blog: http://hbswk.hbs.edu/item/5170.html
- An interview with Basecamp designer Ryan Singer who describes JTBD applied to the design process in great detail: http://insideintercom.io/an-interview-with-ryan-singer/

toot me @fredsters_s

F08e30292b15e08a478dfd869a447c6c?s=128

Fred Stevens-Smith

June 19, 2014
Tweet

Transcript

  1. @fredsters_s rainforest Design for ! Tech Companies:! why you shouldnever

    use Photoshop again.
  2. @fredsters_s rainforest Why should I care? • • Because design

    is how your users experience the code you ship. • Trends
  3. @fredsters_s rainforest About me Fred Stevens-Smith! CEO of Rainforest (YC

    S12) ! Designer Programmer Lover of emoji
  4. @fredsters_s rainforest What is Rainforest? • ✨QA as a Service

    (dev tools)✨ • YC S12 • Built in Rails • We’re hiring!
  5. @fredsters_s rainforest

  6. @fredsters_s rainforest Designer: someone who makes it easier for your

    users to do the job they hired your product to do.
  7. @fredsters_s rainforest The traditional design process!

  8. @fredsters_s rainforest Traditional process 1. Produce multiple flat image designs

    2. Get a design ‘approved’ 3. Re-build the design in code 4. Ship to users 5.
  9. @fredsters_s rainforest What’s broken? • Creates bad design • Slow

    • Duplicated effort
  10. @fredsters_s rainforest Why is our process like this?! Because agencies

  11. @fredsters_s rainforest Is there a sane design flow ! for

    tech companies?
  12. @fredsters_s rainforest 1. Sketch

  13. @fredsters_s rainforest

  14. @fredsters_s rainforest 2. Build a wireframe ☕️

  15. @fredsters_s rainforest 3. Get people to use it

  16. @fredsters_s rainforest 4. Iterate ! (repeat steps 1-3)

  17. @fredsters_s rainforest 5. Polish

  18. @fredsters_s rainforest Tools - why is this possible now? •

    CSS3 • continuous delivery • Front-end stuff (livereload, SCSS, SASS, grid systems, bootstrap)
  19. @fredsters_s rainforest In action:! Rainforest’s run button

  20. @fredsters_s rainforest

  21. @fredsters_s rainforest

  22. @fredsters_s rainforest

  23. @fredsters_s rainforest

  24. @fredsters_s rainforest

  25. @fredsters_s rainforest

  26. @fredsters_s rainforest

  27. @fredsters_s rainforest Implementing this process where you work

  28. @fredsters_s rainforest Questions