Right after Google introduced their new design language, Material Design, we started working with GigTown – a service allowing users to browse local musicians and book them for events. I’m going to talk about the process of designing a native Material Design Android App while keeping in mind iOS app structure and product look and feel.

1. iOS to Android: how we translated
GigTown App into Material Design
Droidcon, Cracow 2015
Gosia Fiedorow @khyroslava

2. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

3. unregistered
users
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

4. unregistered
users
registered
users
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

5. unregistered
users
registered
users
artists
managers
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

6. iOS app
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

7. why not copy&paste?

8. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary
Material Design Guidelines

9. Artist Discovery
12:30
Sara
Masterson
All I Can
La Jolla Farms Rd
Jun 12, 2013 - 05:00
La Jolla Farms Rd
Jun 12, 2013 - 05:00
La Jolla Farms Rd
Jun 12, 2013 - 05:00
DECLINED
BOOKED
PENDING
Booking
12:30
My Profile
12:30
Booking Requests
Artist Availability
Pricing
Analytics
Manager
12:30
Sara
Masterson
All I Can
$
500/hr
Pat Rack
user
test@gigtown.com
card: xVDHT (pending)
3
12:30 12:30
Artist Discovery
12:30 12:30
Booking
12:30
2. Navigation Drawer
1. Tabs
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary
Copy of iOS navigation

10. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

11. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary
MD typography principles

12. roboto regular brandon regular
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

13. roboto regular brandon regular
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

14. roboto regular brandon regular
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

15. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

16. 3 ideasof general navigation
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

17. 1# calendar
drawer
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

18. 2# 2 drawers
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

19. 3# tabs
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

20. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

21. Milestones

22. Milestone 1:
Local Radio
iOS · Copy&Paste · Step Back · Milestones · Implementation · SummaryiOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

23. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary
Milestone 2:
Booking

24. Sara Masterson
Sara Masterson
Sara Masterson
Sara Masterson
2
1
Sara Masterson
BookingA vailabilityP ricin
Sara Masterson
BookingA vailabilityP ricing
ManagerEventsDiscovery
Jonathan
12:30
DECLINED
La Jolla Farms Rd
Jun 12, 2013 - 05:00
WAITING
La Jolla Farms Rd
Jun 12, 2013 - 05:00
CONFIRMED
La Jolla Farms Rd
Jun 12, 2013 - 05:00
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary
Milestone 3:
Manager Section

25. #TeamWorkMakesTheDreamWork
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

26. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

27. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

28. Issues
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

29. Material Design Pickers
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

30. Custom-made Pickers
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

31. Back Button Gate
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

32. Back & Cancel
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

33. Image Proportions
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

34. iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

35. Lessons Learned:
1# iOS app is a great starting point
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

36. Lessons Learned:
1# iOS app is a great starting point
2# but Android is a different platform
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

37. Lessons Learned:
1# iOS app is a great starting point
2# but Android is a different platform
3# step back
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

38. Lessons Learned:
1# iOS app is a great starting point
2# but Android is a different platform
3# step back, generate ideas
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

39. Lessons Learned:
1# iOS app is a great starting point
2# but Android is a different platform
3# step back, generate ideas to evaluate them
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

40. Lessons Learned:
1# iOS app is a great starting point
2# but Android is a different platform
3# step back, generate ideas to evaluate them & work with your team
iOS · Copy&Paste · Step Back · Milestones · Implementation · Summary

41. Thank you!
Droidcon, Cracow 2015
Gosia Fiedorow @khyroslava