APIA 2018 Shenzhen

1. DESIGN HACKS!!
Zahra Tashakorinia | APIA July 2018

2. Hi,
I AM ZAHRA.

3. Back in 2003, we weren’t all
playing games on our
phones.You still had to have
two different devices:
one for games and one for
making calls.
Nokia’s N-Gage was an
attempt at combining
phones and gaming, it was
just a bad one!
WHY?!

4. Today product definition
In 2007, the majority of first
iPhone user were gamers!
Now, the mobile games market
is rising to new heights, and
most of the growth is thanks to
the iPhone.
WHY?!

5. Simplicity and ease-of-use are far
more important when doing
computing on a tiny screen.

6. JourneyThroughPrototypes

7. Whatisa
prototype?
§ Anything tangible that lets us explore an idea, evaluate
it, and push it forward is a prototype.
§ In each case an idea has been given expression
through an appropriate medium to show to others for
feedback.
§ Prototyping is always inspirational - not in the sense of a
perfected artwork but just the opposite: because it
inspires new ideas.
Tim Brown, IDEO

8. Whatisa
prototype?
§ There are many approaches to building prototypes for
hardware products and software user interfaces.
§ UI prototypes can be as simple as a drawing on a piece
of paper or as complex as web application
§ Or anywhere in between those extremes!
§ Acting it out the experience with a product or service is
best way to refine it!
§ In prototyping one has to plan to throw

9. BUILDTOTHINK
Build to think

10. 3 Stages of Prototyping

11. DesignProcess
Institute of Design 08.24.10 10
Build it yourself Low cost Embrace failure Expect changes Build it with an expert High cost Integrated model Have an expert build it
Framework

12. Whybother
with
prototypes?
§ Get feedback earlier, cheaper
§ Experiment with alternatives
§ Easier to change to throw away

13. Benefitsof
Prototyping
§ Low cost: requires little time, technical expertise
§ High return on investment:
§ Getting user feedback early in the design process
§ Uncovers problematic design choices before they are
committed to code
§ Minimizes miscommunication between designers
§ Generally results in a better UI and product experience.

14. APERSONALSTORY

15. TidyTilt
wasbornoffof
prototyping!
IIT Student Project > TT Design L abs,

16. TidyTilt
wasbornoffof
prototyping!

17. TidyTilt
wasbornoffof
prototyping!

18. TidyTilt
wasbornoffof
prototyping!
Designed as a school project was one
of the most funded successful design
projects on Kickstarter Featured on WSJ,
Wired magazine and ABC 7 News.
I Co-founded TT Design Labs and partnered with Chinese
manufacturer to launch 3 products and distributed them to
80+ countries.

19. BULID TO THINK
THINK TO BUILD

20. InPractice

21. Build it yourself Low cost Embrace failure Expect changes Build it
TODAY’s
FOCUSE
Test
Prototype
Build
Prototype
Enhance
Design

22. WHAT YOU NEED
§ Pen
§ Paper
§ Post in note

23. GatheringData
§ Who are your users? What tasks are they trying to
accomplish?
§ Don’t guess—do your research!
§ Observe users in their natural habitats
§ Check out solutions that already exist (even hacky ones)
§ Make sure you are focusing on a problem at the right
level of detail
§ At this stage,don’t think“bicycle cup holders”
§ Think“helping cyclists stay hydrated without getting hit
by a car”

24. Brainstorming
Warm-Up
§ It can be helpful to do some sort of warm-up before you
start brainstorming
§ You could allot ~5 minutes to free-form chatter about
related products or tasks
§ Or you could encourage your team to start thinking
creatively and feeling comfortable sharing their
thoughts with an associations game
§ Examples:“Songs David Hasselhoff should cover”,
“Mythological animal which would be most lucrative to
own”

25. CrazyEights

26. Brainstorming:
IDEORules
§ One conversation at a time
§ Stay focused
§ Encourage wild ideas
§ Defer judgment
§ Build on ideas from other brainstormers

27. ValuingIdeas
§ Define the importance of each idea:
§ Does it address the problem?
§ Will target users like it?
§ Are the technical requirements available?
§ Is it affordable to implement?
§ Rank ideas by importance
§ Pick the top N ideas

28. Low-Fidelity
Prototypes
§ Now that you’ve got some ideas, you can start making a
storyboards and paper prototypes.
§ It may seem difficult to represent something as
complicated as a modern software interface with
something as old school as paper

29. Wireframes
§ Visual representations of an
interface’s intended layout,
typically without its actual
content
§ Good for evaluating content
placement

30. Storyboards
§ Inspired by storyboards used by
animators
§ Series of images which represent
how an interface would be used to
accomplish a task
§ Could be a narrative
§ Good for evaluating workflow

31. Storyboards
§ Storyboarding means sketching an
actual situation, showing how a user
would use your solution (e.g. web,
mobile app, product) - where (s)he
clicks, what information (s)he
enters, what (s)he thinks etc.

32. Storyboards
Choose an opening scene:
§ How do customers find out that your
solution exists?
§ Where are they and what are they doing
just before they use your product?

33. Paper prototyping
§ Paper prototypes are an excellent
choice for early design iterations.

34. Paper Prototypes
§ Paper representations of an
interface used to simulate
interaction
§ Good for evaluating general
concept, specific workflows, and
usability
http://felixberger.info/wp-
content/uploads/2008/09/br_online_-_prototype.jpg

35. Whypaperprototyping?
§ Faster to build
§ Sketching is faster than programming
§ Easier to change
§ No code investment, no tooling– everything
will be thrown away (except the design)
§ Focuses attention on big picture
§ Designer doesn’t waste time on details
§ Customer makes more creative suggestions
§ Only kindergarten skills are required
Benefitsof
Paper
prototyping

36. User Testing
§ User Testing is a method of soliciting feedback
§ You display whatever lo-fi prototype(s) you
have developed for your product to a small
group of peers
§ They share their immediate reactions to your
ideas and weigh in on whatever open
questions you have identified

37. User Testing

38. § Introduction
§ Give a general idea of what the user is going to do
§ DO NOT give an overall guide to the application
§ It is important to instruct the user to“Think out loud”
§ You may need to gently remind them of this during the session
§ Start with an easy task or two to put the user at ease
§ If the user sees something unexpected then ask what they did
expect
§ Try making an on-the-fly design change
Howto run a User Testing session

39. HowtoGetthe
Mostfroma
UserTesting
§ Be clear about what sort of feedback you’re looking for
§ Overall idea?
§ Specific workflows or interactions?
§ Usability?
§ Technical feasibility?
§ Graphic design?
§ Answer questions and correct misconceptions, but do
not argue in favor of your design
§ Show alternative designs if possible

40. HowtoGivea
GoodCritique
§ If they ask for help
§ Do not give it to them. The idea is to see if the program
design makes sense to them.
§ Let them make mistakes.This gives your design team
places to consider changes.
§ If they get completely lost then help them get back on
track.
§ Follow-up on problems and design ideas
§ Ask about recommendations

41. HowtoGivea
GoodCritique
§ Hold a design team post mortem meeting
§ Discuss the areas that the user seemed to have problems
with or made suggestion about
§ Consider design alternatives
§ Iterative Refinement
§ Make design changes or changes to the scenarios before
next session

42. Fail Fast, Fail Often
Fail early,Try again

43. § Once you have developed a lo-fi prototype and
solicited feedback on it through peer critique and user
testing:
§ You may wish to create another lo-fi prototype (isn’t
iterative design fun?)
§ Or you may be ready to move on to a hi-fi prototype
§ Which choice you make will be a function of how much
of your original design you feel needs to change
Hi-Fi Prototype

44. § Rustling up an interactive wireframe might sound
like a daunting, time-consuming task. Don’t let it
be.
§ In Marvel app or Justinmind, you can benefit from
the pre-built widgets for both iOS and Android as
well as the pre-made icons mixed with the drag-
and-drop user interface means you don’t need to
spend one second designing anything if you
don’t want to— it’s all there for you to use.
Hi-Fi Prototype

45. KEEP IT SIMPLE
Minimum Viable Product

46. The hardest part of design,
especially consumer products is
keeping features out.

47. § Simplicity,isinitselfaproduct
differentiator,andpursuingit
canleadtoinnovation.”
–DonNorman

48. DESIGN HAKES!
THANK YOU

49. APPENDIX

50. Minimum Viable Product (MVP)
Before starting with product
development make sure that
the product that you will be
building is really the minimum
viable product (MVP).
This means that you’ll have to
answer “yes” to each
statement below.

51. Design Thinking!