Design workflow in GoBike

UX Thailand 2017

- Challenges faced between design and engineering.
- Sharing of tools used to improve collaboration between design and engineering.
- Design workflow, showcasing materials
- Sharing of tools used from wireframes to prototypes
- Highlighting importance of prototyping process

Stan Tan
UI/UX Designer at GoBike

Transcript

1. GOBIKE UI/UX PROCESS
2. The Team Kuala Lumpur, Malaysia Bangkok, Thailand CORE ENGINEERING Mobile dev (iOS, Android) UI/UX API QA HQ Business Dev Ops Marketing Supports
3. Requirements gathering from Product Managers Our Process Research, Wireframings, Prototyping Sprint planning Development start Test :)
4. Research, Wireframings, Prototyping Research 1.0 - Play different apps Experience how other apps behave. Note down the clear difference between cross platforms
5. Definitely experiencing other apps, and not resting.
7. Research, Wireframings, Prototyping Research 2.0 - User research Empathy, Observe, Experience Design thinking process
9. To experience the biker journey, just be the biker.
10. In-depth interview with our partners.
11. Research, Wireframings, Prototyping Wireframings Design the flow first (UX), UI details second. Create UI design system
12. Go Messenger Flow Modified on 14 Jul 2017 by Stan Tan 1: Homescreen 2: Go Messenger - View map 3: Go Messenger - Select sender location 4: Go Messenger - Select recipient location 5: Go Messenger - View map add item 6: Go Messenger - Sender autofill recent search 7: Go Messenger - Recipient autofill recent search 8: Go Messenger - Add sender information 9: Go Messenger - Add recipient information 10: Go Messenger - Fare calculation 11: Go Messenger - Finding biker 12: add note 13: add tip 14: add promo code 15: Cancel finding biker 16: Go Messenger - Trip detail 1 17: Fail to find biker 18: Keep me notified 19: Biker cancel task 20: Go Messenger - Trip detail 2 21: Customer cancel task 22: Rate Biker 23: Rate Biker 2 Design positive flows, and cover as much negative flows as possible.
13. Prepare and consistently rollup up or update UI specs
14. Before kick start development, handoffs!
15. UI/UX Wireframing Design Handoffs
16. Sketch Cloud
17. Product “Guys, we need a screen to calculate fare.” Design Fare Calculation Screen Booking Screen Dev CheckFare
18. Design back icon Dev arrow
19. Research, Wireframings, Prototyping Prototyping Create interactive prototypes, to conduct usability test, and also to align expectations with developers
20. For more logic required prototype For more visual required prototype
23. Key Takeaway GoBike UI/UX Process Research > Wireframing > Prototype > Research This is a continuous process :)
24. Resources Research: 1. D.school Bootcamp Bootleg (pm me for e-book) Wireframing: 1. Design handoff - http://utom.design/measure/ 2. React Symbols UI Kit - https://www.designernews.co/stories/89568-reactsymbols-ui-kit 3. Airbnb Design System - https://airbnb.design/building-a-visual-language/ 4. iOS Human Interface guidelines / Google Material IO Prototypes (Interactive): 1. Tutorial to start Framer : https://framer.com/getstarted/tutorials/ 2. Tutorials to start on Protopie: https://www.protopie.io/learn/