Design Bootcamp Asia's 5th series #5 - Design on-the-go: Start-ups shift the paradigm of design & research Design on-the-go. Start-ups shift the paradigm of Product Design and Research. Speed matters in a startup world. In this event, we will be discussing about responding to its speed, and how it shifts the paradigm of the way we design and research in a startup world. You will gain a number of insights from two amazing product design team in Singapore, and learn about what it means to have a startup mindset as a design professional. Agenda: • Opening & Intro by Julee (Organizer) & Trechelle (Hyper Island) • UX research at Grab by Feng Yi Yu, Senior UX Researcher at Grab • Effective mobile design prototyping by Miguel Saballa, a Product Design Lead at honestbee

1. Effective Mobile Design
Prototyping
22 June 2017

2. Hi, I’m Miguel.
/miˈgεl/

3. Studied
fine arts
Started with graphic
design
Product design
today

4. Let’s talk about
Prototyping

5. A prototype is the first full-scale and
usually functional form of a new design.

6. Why prototype?

7. Evaluating and testing the design.
By creating a prototype, it is possible to sit down with a
real version of the product and determine which
aspects are worthwhile and which parts need to be
revised or discarded.

8. Clarifying production costs & issues
By prototyping before pro-duction begins, it is possible to
take a glimpse at the production process and see if any
steps can be changed, combined or even removed. This not
only streamlines production, but keeps the cost of the actual
production to a minimum.

9. Selling the product to others
Without a prototype, it’s only a concept. With a
prototype in hand, the concept instantly becomes real
and it is far easier to demonstrate to a stakeholder,
engineer, or test with a user.

10. When the prototype stops working
during a meeting with the CEO.

11. Prototyping on
the job

13. In most companies and especially startups, you find
yourself juggling between business needs, tech
capabilities, and user needs.

14. FAST
GOOD CHEAP
PICK 2
When it comes to production…

15. FAST
GOOD CHEAP
PICK 3
When it comes to prototyping however…

16. Suggestions for
good design
prototyping

17. Think about the problem
Prototypes are design solutions brought to life. Since it
is relatively quick to create a prototype, consider
different solutions to a problem and measure the pros
and cons of each.

18. Use the tool that best suits what
you’re trying to achieve

19. Yes, a Steve Jobs quote…
“It’s not just what it looks like and feels like. Design is
how it works.”

20. Work closely with engineering
• Engineers are the translators of ideas into reality
• Want to make stuff happen? All you need to do is just convince one or two engineers
• Things go easier if the engineer you’re working with appreciates the value of good design
• Save yourself time; understand engineering constraints early
• Save the engineers time; help them understand how final the design is at any given stage
• The best way to ensure designs are implemented as intended is to work extremely closely with the engineer
• The quickest way to an engineer’s heart is to be complete with your designs
Julie Zhou
Product design VP at Facebook

21. When I’m paired with my favourite
dev and told to go “innovate”.

22. Work closely with
content writers
Provide better context by
including the right content
integrated into your strategy.
LOREM IPSUM won’t cut it.

23. Use good motion design
The devil is in the details. Even the grandest project
depends on the success of the smallest components.

24. Why does motion
matter?

25. How the elements are
going to move & react to
the user interaction is a
must from the beginning:
movement provides
personality, content and
can improve usability.

26. 12 Animation
Principles
Ollie Johnston and Frank Thomas in their
1981 book “The Illusion of Life: Disney Animation”

27. TIMING ANTICIPATION APPEAL SQUASH & STRETCH
ARCHS EXAGGERATION
FOLLOW THROUGH &
OVERLAPPING
STAGING
SECONDARY ACTION SLOW IN & SLOW OUT SOLID DRAWINGS
STRAIGHT AHEAD &
POSE TO POSE

28. Prototype examples

29. Rating module
We wanted to gain
more insights from our
users based on the
star rating that
they’ve provided.

30. Things to consider
BUSINESS NEEDS
The operations team wanted to tag specific issues to either the driver or the shopper to be
able to track performance.
TECH CAPABILITIES
APIs were in development for the user to be able to select specific tags and enter
comments. We already had ability to rate via stars in production.
USER NEEDS
Since an order can be fulfilled by 2 people, it’s a lot of clicks to rate each. The goal was to
find the most efficient way to perform the tasks.

31. First drafts

32. Refining the visuals
Telling a story

33. Large icons?
Too messy

34. Tiles?
Not balanced

35. Small icons?
Too messy

36. No icons?
This was the cleanest version

37. Putting the prototype
together
I used Origami because it had
the capability to perform logic based
interactions.

42. Good rating interactions

43. Bad rating interactions

44. Editing a rating from bad to good

45. Thanks for
listening!

46. Questions?
When people ask advice about being a UX
professional…