Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop – UI audit of Mall.cz – May 2019, Brno

59 views

Published on

Workshop slides by Jan Toman (Kiwi.com) - Design Systems Meetup May 2019.

Published in: Design
  • Be the first to comment

Workshop – UI audit of Mall.cz – May 2019, Brno

  1. 1. Design Systems Meetup May 2019
 UI audit workshop (Mall.cz) @CzechDSC presents MEETUP SPONSORS & PARTNERS
  2. 2. Jan Toman Twitter: @HonzaTmn Design System Lead at Kiwi.com
  3. 3. Introduce yourself. #CzechDSC Mention what are your expectations from this workshop :-)
  4. 4. What are parts of the design system? #CzechDSC
  5. 5. #CzechDSC
  6. 6. #CzechDSC „A design system isn’t a project. It’s a product, serving products. - Nathan Curtis, Design Systems Consultant
  7. 7. #CzechDSC
  8. 8. Research Stakeholder interviews Inspirational hunt Articles #CzechDSC Audits
  9. 9. #CzechDSC Audits Audits give you insights necessary to start up design system from existing product. Why
  10. 10. #CzechDSC Audits Product audit Before you start new design system < Technology audit < Tools audit Processes audit UI audit
  11. 11. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by
  12. 12. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by
  13. 13. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by
  14. 14. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by
  15. 15. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by Starting for one product, scaling to other products later. ? You probably can ignore non-ecommerce.
  16. 16. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit owned by Starting with one product, scaling to other products later. You probably can ignore non-ecommerce. ROADMAP ITEM Support theming & component variations ROADMAP ITEM Create ecosystem for sub-design systems
  17. 17. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit The last possible time to invite front-end developers. Meeting agenda - explain what you are trying to achieve - ask them to help with auditing technology you use - picking the right framework to build your components ROADMAP ITEM Setting up front-end architecture for new components Technology audit
  18. 18. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit FROM JOB OFFERS Disclaimer: I am just guessing now…
  19. 19. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit FROM „PHP DEVELOPER FOR PLATFORM OF 3 E-SHOPS“ Disclaimer: I am just guessing now…
  20. 20. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit What tools your designers use? Do you have (and use!) some styleguide? Where? How? Where are your design files stored? Do you use some version control? What do you use for hand-over? … Tools audit
  21. 21. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit How designers and developers process assets handovers? How do you handle design specifications? For what screen sizes do we design? Do you have some component library already? What are the main communication channels? How the process of translations works? … Processes audit
  22. 22. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit User interface audit Colors Typography Components
 (UI inventory) Icons Shadows Image sizes Illustrations … Spacing Patterns Layouts
  23. 23. #CzechDSC Product audit Technology audit Tools audit Processes audit UI audit User interface audit Colors Typography Components Icons Shadows Image sizes Illustrations … Spacing Patterns Layouts
  24. 24. #CzechDSC User interface audit - Colors
  25. 25. #CzechDSC https://CSSStats.com
  26. 26. #CzechDSC https://CSSStats.com
  27. 27. #CzechDSC https://CSSStats.com
  28. 28. #CzechDSC https://CSSStats.com
  29. 29. #CzechDSC https://CSSStats.com
  30. 30. How will these data help to unify color palette for our design system? #CzechDSC tl;dr: They won’t. https://CSSStats.com
  31. 31. #CzechDSC It gives you only colors used for „color“ and „background-color“ CSS properties. Missing information about how many times is each color used. Missing information about where is each color used. CSSStats.com doesn’t provide context
  32. 32. #CzechDSC SolutionWriting your own color parser If you don’t know how, any experienced developer should be able to write it for you.
  33. 33. #CzechDSC Writing your own color parser What insights about colors may you need? Number of usagesProperty groups 
 background-color color border-color fill box-shadow outline 
 CSS classes
  34. 34. #CzechDSC User interface audit - Colors
  35. 35. #CzechDSC 311 unique colors ~140 shades of grey,
 half of them with blue tint ~15 variations of brand color Data from own parser Overview
  36. 36. #CzechDSC Data from own parser Backgrounds 250 unique colors 173 colors used only once 43 colors used two times
  37. 37. #CzechDSC Data from own parser Backgrounds First cleaning CSS classes check 218x .var-color—* classes Ask why
  38. 38. #CzechDSC Data from own parser Backgrounds First cleaning CSS classes check Where else? + 4 more like this You will need a special palette for energy labels. But it may use some of your status colors (red, green, orange).
  39. 39. #CzechDSC Data from own parser Backgrounds First cleaning CSS classes check Where else? Open discussion if you need that many different label/tags variations. If yes, add them to the palette and document how they should be used. + 10+ more like this, just for specific labels/tags
  40. 40. #CzechDSC Data from own parser Backgrounds First cleaning CSS classes check Pick another color. Repeat. At least for each color that is used less than 5x.
  41. 41. #CzechDSC Data from own parser Backgrounds
  42. 42. #CzechDSC Data from own parser Backgrounds Looking at the most used colors
  43. 43. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Starting with „brand“ CSS classes check The output: Replace #a90000 with #c00
  44. 44. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Starting with „brand“
  45. 45. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Then colors with many variations
  46. 46. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Light greys 👆 👆
  47. 47. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Light greys 👆
  48. 48. #CzechDSC Data from own parser Backgrounds Looking at the most used colors / Light greys 👆
  49. 49. #CzechDSC Data from own parser Border colors 100 unique colors 52 colors used only once 19 colors used two times 👆 👆 👆 👆 👆👆 👆
  50. 50. #CzechDSC Data from own parser Text colors 56 unique colors 33 colors used only once 3 colors used two times
  51. 51. #CzechDSC Data from own parser Text colors / Selecting the main text color
  52. 52. #CzechDSC Data from own parser Text colors / Selecting the secondary text color 👆
  53. 53. #CzechDSC Repeat until you are happy.
  54. 54. #CzechDSC Colors audited. Is it done then? Design part: making colors work together, adjusting lightness, saturation, …
  55. 55. #CzechDSC User interface audit - Typography
  56. 56. #CzechDSC https://CSSStats.com
  57. 57. #CzechDSC https://CSSStats.com
  58. 58. #CzechDSC We may need 2 typography scales. Mall.cz uses 2 font families – Arial and VAGRounded
  59. 59. #CzechDSC Start with a base size. For Mall.cz it’s 14px.
  60. 60. #CzechDSC …and move to UI inventory for more insights. tl;dr: Texts or titles are also components.
  61. 61. #CzechDSC User interface audit - UI inventory
  62. 62. An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. #CzechDSC „ - Brad Frost
  63. 63. #CzechDSC Why is it important? Identifying variations of the same Identifying which components can bring the most value Making inconsistencies tangible
  64. 64. #CzechDSC ? Where to start?
  65. 65. Mall.sk Mall.cz
  66. 66. #CzechDSC We don’t need to solve everything at once. „Nothing is invented and perfected at the same time. - John Ray
  67. 67. #CzechDSC Starting with design system for web. Scaling to mobile apps later.
  68. 68. #CzechDSC Use Pareto principle 80% of main components can be found on 20% of pages.
  69. 69. Offline or digital? #CzechDSC
  70. 70. #CzechDSC Tools Scissors Pen / Sharpie Post-its
  71. 71. #CzechDSC Preparation
  72. 72. #CzechDSC Who to invite? Designers Front-end developers Decision makersProduct manager(s), Scrum master, …
  73. 73. #CzechDSC What to do? Step 1: Cut Step 2: Group similar items Step 3: Label groups
  74. 74. #CzechDSC Step 4: Prioritize
  75. 75. #CzechDSC Present to other teams
  76. 76. #CzechDSC User interface audit - Report
  77. 77. #CzechDSC Who to share UI audit report? Possibly to everyone. Make it common knowledge. You may find partners in places you would not expect.
  78. 78. #CzechDSC What insights to share? Let’s pick a few screens from this presentation.
  79. 79. #CzechDSC 311 unique colors ~140 shades of grey,
 half of them with blue tint ~15 variations of brand color Data from own parser Overview
  80. 80. #CzechDSC Data from own parser Backgrounds 250 unique colors 173 colors used only once 43 colors used two times
  81. 81. #CzechDSC Data from own parser Text colors 56 unique colors 33 colors used only once 3 colors used two times
  82. 82. #CzechDSC Typography styles in mobile apps
  83. 83. #CzechDSC Button variations in mobile apps
  84. 84. #CzechDSC Describe worklow between designers and developers Images from Avocode.com
  85. 85. #CzechDSC Add estimates for creating component Images from Avocode.com
  86. 86. #CzechDSC Wrap up Narrow down scope before you start Don’t work in silo. Invite other roles. Use insights for showing an impact of not having design system Write down even smallest details from the audit.
  87. 87. Let’s discuss :-) + follow me on Twitter: @HonzaTmn

×