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.

Designing for scale

290 views

Published on

While designing complex software is not easy, maintaining a consistent user experience over years of development seems almost impossible. Dealing with ever-changing requirements, difficult stakeholders and technical obstacles makes this one of the biggest challenges for a designer. As a service supplier in enterprise projects, Zühlke has gained direct experience in the complexity and difficulty of creating large business applications. Working with teams of more than 30 people taught us a lot about the importance of investing in a continuous design responsibility. We will show you how we used pattern libraries for creating flexible design systems. We will compare the best tools for keeping a remote team together. And we will explain why knowing how to code can save your project even when your budget is running out.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing for scale

  1. 1. Designing for Scale How to rock design in large projects
  2. 2. Who am I? • born 1985 in Southern Germany • studied IT & Design in Lübeck • worked for Zühlke in Zurich • Freelance UX/UI Designer & 
 UI Developer in Hamburg • just came back from a 5 months Asia surf & work trip 2 Simon Schmalfeld simon@riija.graphics www.riija.graphics @riijagraphics
  3. 3. Challenges
  4. 4. Claudia UI Designer “It’s a complete mess. Everything looks different and when designing new features, you never know on which other features to rely on. People just do their own thing!”
  5. 5. “The designers hand over incomplete mockups and expect us developers to solve UI problems on our own. Then they are not available for a review because they are already working on something else.” Mitch Frontend Developer
  6. 6. “I want it to just work. My users are under high pressure and can’t spend much time learning the system. Right now, every screen looks different and no-one understands how to do anything.” Nicole Client’s Product Owner
  7. 7. Why is it so difficult?
  8. 8. Business - Value - Users - Consistency - Team - Work environment -
  9. 9. Software as a continuum 9 Many options, possibilities and opinions lead to inconsistent designs Changing requirements lead to development changes which slow down the process Communication problems inside the team and with stakeholders Team members joining and leaving the team
  10. 10. 10 Can design be agile?
  11. 11. “Every time you override a global component in one area of a product, you also erode the consistency of your design.” @colmtuite
  12. 12. Business - Value - Users - Consistency - Team - Work environment - Inconsistent UI Slow production Confusion
  13. 13. 13 A design needs to constantly adapt and evolve. Styleguide? Redesign? Let it happen? Design System!
  14. 14. 14 Where to start?
  15. 15. 15 Interface Audit
  16. 16. Interface Audit http://bradfrost.com/blog/post/interface-inventory/ Take screenshots of the application and save them in a powerpoint presentation, ordered by category. buttons, form-fields, navigation color palette, text styles, UI patterns interaction principles
  17. 17. 17
  18. 18. Creating a design system
  19. 19. 19 Styleguide vs. Design Systemand
  20. 20. Pattern Library Code Snippets Templates Styleguide Design system Documentation
  21. 21. Example: Airbnb DLS “Each component is defined by it’s required elements (such as title, text, icon and picture), and may sometimes contain optional elements. These elements are both defined in the Sketch document as well as in code.” @karrisaarinen
  22. 22. Example: Airbnb DLS
  23. 23. Example: Airbnb DLS “Lastly, we’re investing in code as a design tool. Moving closer to working with assets that don’t only include layout and design, but also logic and data. This helps bridge the gap between engineers and designers.” @alexoid
  24. 24. Example: Airbnb DLS https://github.com/airbnb/react-sketchapp
  25. 25. Elements of a design system (examples) Tools / Technologies Folder structure Naming conventions for files, artboards, layers Grid system Styleguide Components (Design & Code) -> Visual, HTML/CSS Templates (Design & Code) -> Visual, HTML/CSS Documentation
  26. 26. Different way: Microsoft Fluent
  27. 27. Benefits of a design system Faster time to market Increased product value and consistency Easier collaboration and knowledge sharing
  28. 28. Role of the designer
  29. 29. 29 UX/UI Designer Product Rules External Sources Brand Department Users Styleguide Trends Design System Expectations Feedback Developers
  30. 30. 30
  31. 31. 31
  32. 32. “A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.” @karrisaarinen
  33. 33. Dealing with Scale
  34. 34. 34
  35. 35. 35 http://demo.patternlab.io
  36. 36. Back to reality
  37. 37. “We still have so many features to implement. Let’s focus on them and consolidate the design later. It needs to be ready until next month.” Client’s IT Manager Thomas
  38. 38. But we don’t have the budget Create code snippets during design (if you can) Team documents the design itself Extract every feature you build to a library (design and code) Organise everything (Sketch layers, CSS classes, assets, …) Think modular Choose one designer or frontend developer in the team who is responsible for the design system Creating a design system on the go
  39. 39. Thank you! Simon Schmalfeld
  40. 40. Resources • Atomic Design: http://bradfrost.com/blog/post/atomic-web-design/ • Interface Inventory: http://bradfrost.com/blog/post/interface-inventory/ • Airbnb Design System: https://airbnb.design/building-a-visual-language/ and https:// airbnb.design/the-way-we-build/ • React Sketchapp: https://airbnb.design/painting-with-code/ and https://github.com/airbnb/react- sketchapp • Microsoft Fluent Design: https://arstechnica.com/information-technology/2017/05/taking-a- closer-look-at-microsofts-fluent-design-system/ • Creating a design system: https://blog.prototypr.io/design-system-ac88c6740f53, https:// medium.freecodecamp.com/how-to-construct-a-design-system-864adbf2a117, https:// www.atlassian.com/blog/apps/what-is-design-system-how-to-build-one • Sharing design systems: https://medium.com/ux-power-tools/the-simplest-how-to-guide-for- sharing-a-design-system-with-your-team-17bf191216ac • Tools: https://www.brand.ai, https://www.invisionapp.com/craft, https://www.frontify.com, http:www//patternlab.io

×