FirefoxOS - The Beginning! What we learned? FirefoxOS - Today! What is our work process? The Tools We Use?

1. Pavel Ivanov
UX/UI Engineer at Mozilla
Bulgaria Web Summit, 31.05.2014 at Inter Expo Center (Sofia, Bulgaria)

2. What is Firefox OS?

4. How we started the project?

5. “The Web is the Platform”

6. The first Gaia Interface ...

7. Work Weeks

8. UX/UI (Day 1)

9. UX/UI (Day 2)

10. Start Coding (day 3)

11. First Devices (Day 4)

12. More Devices :) (Day 5)

13. The Results

14. WORK TOGETHER ALL THE TIME (24/7)

15. Firefox OS | V1 Design

16. V1 Design Principles
consumption focus / magazine feel
content is king
ease of use
emphasis on color and circle forms

17. Font Face
Fira Sans commissioned for readability
on mobile

18. Dark
media / entertainment
Content Focus
Light
productivity
differentiate productivity vs media
theatre experience
(content vs experience)

19. Icon Shape
Unique circle shape for app icons
and action icons

20. Value Selector
Ease of use
Value Selector
full screen dialogs & value selectors

21. Home screen LockscreenLockscreenHomescreen

22. Contacts CalendarMessagesContacts

23. Music VideoMusicMusic

24. Keypad On CallIncoming CallCall Log

25. The Problems with FFOS v1

26. Problem 1
Performance

27. Problem 2
Performance

28. Problem N
Performance

29. The Solution
Improve the Web Standards
Improve the Platform
Improve the Work Process

30. Where we are Today?

31. Where we are Today?

33. Firefox OS | V2 Refresh

34. Design by Code
Spacious
Content Focus
Emotion Through Motion
Design Principles for v2

35. Design by Code

36. Design by Code
flat, elegant design style
less dependency on bitmaps
easily scales across a larger portfolio of
devices
SVG iconography
V2 RefreshV1

37. Home Screen MusicContactsHome Screen

38. Keypad On CallIncoming CallCall Log

39. V2 RefreshV1
Spacious
larger controls

41. The Work Process v2

42. The Tools
design, wire frames, code,
build, automations, tests etc.

43. Questions?

44. Thank You :)
I Support the Open Web <3