UI/UX Design for Startups

This is the presentation deck i've made for the speak at Daily Social DevClass on March 20, 2014.

link : http://dailysocial.net/post/dcsparxup14

It contains some basic UI/UX design thinking for startups.

Transcript

1. UI & UX Design Startups for
2. WHY?
3. Not just for the sake of beauty.
4. “For me, design is a major priority because i know it’s what will set my business apart.” Boo-keun Yoon CEO of consumer electronics, Samsung
5. What is the difference between UI and UX?
6. This is the User Interface What users see and perceive.
7. This is the User Experience How users feel and interact.
8. Synergy
9. HAVE A GOOD START
10. The Hierarchy of Needs CREATIVITY PROFICIENCY USABILITY RELIABILITY FUNCTIONALITY Reference taken from Smashing E-Book “Psychology of Web Design”
11. Define Your Core Values. Why You’re Making This Product.
12. Know Your Target Market. What problem they have. Who are they exactly.
13. Think Benefits. Not Features.
14. Plan Your Product Roadmap. Launch, Learn, Iterate, Repeat.
15. 9 STEPS TO BETTER UI/UX DESIGN
16. Make Use Case & User Journey.
17. Plan the journey. Help user get what they need / want.
18. Start with goal and define where users come from.
19. Just One Goal in One Page.
20. Stripe
21. Basecamp
22. Nasty Gal - Product Details
23. Create Visual Hierarchy.
24. Guide the users. Which information they should read first.
25. Hopskoch
26. AirBnB - Place Details
27. Time
28. Use Proximity & Contrast.
29. Emphasise your message. Make use of “White Space”
30. Group similar level of navigation / information.
31. Use contrast but not too much. Click Me! Good! Click Me! Meh… Click Me! Ouch!
32. Handle User On-Boarding.
33. Step by Step Tutorial
34. Introduce “how it works” on-the-go.
35. Mind Your Typography.
36. Pick your font-type to match the personality of your product. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
37. Attention: Line Height. Font Size + (4px or 6px) = Good! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
38. Attention: Column Width Depend on Font Size. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Too Wide Just Right!
39. Set The Right Tone & Voice.
40. MailChimp
41. Maskoolin
42. The Design Quality Affects Credibility.
43. Do Not Try This, Ever…
44. Yep…
45. Kill Me!
46. Prototype. Feel the User Experience.
47. Flinto
48. MarvelApp
49. Thank You! Let’s do the Q&A :) Follow Me @madeforyou This has been a presentation by Richard Fang.