Implementing a Design System in a Small Team by SnapTravel
•Download as PPTX, PDF•
1 like•602 views
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Implementing a Design System in a Small Team by SnapTravel
Similar to Implementing a Design System in a Small Team by SnapTravel (20)
More from Product School
More from Product School (20)
Recently uploaded
Recently uploaded (20)
Implementing a Design System in a Small Team by SnapTravel
- 1. www.productschool.com Implementing a Design System in a Small Team by SnapTravel
- 2. Join 40,000+ Product Managers on Free Resources Discover great job opportunities Job Portal prdct.school/PSJobPortalprdct.school/events-slack
- 3. CERTIFICATES Your Product Management Certificate Path Product Leadership Certificate™ Full Stack Product Management Certificate™ Product Management Certificate™ 20 HOURS40 HOURS40 HOURS
- 4. Corporate Training Level up your team’s Product Management skills
- 5. Building and Implementing a Design System in a small team T O N I G H T ’ S S P E A K E R Mostafa Elhefnawy Jake Janosik
- 6. 6 Design systems are collections of elements with interconnections and rules supporting them in order to drive purpose.
- 7. 7 By utilizing a collection of repeatable components and a set of rules to use them, teams are able to change the pace of creation and innovation.
- 8. Purpose: Create a visual cue or text to indicate an action Interconnection & Rule: 3 levels to indicate importance and hierarchy Elements: Colour, contents and indicator
- 9. Only for purchase path Main action on the page Links and actions on a page High Emphasis Low Emphasis Purpose: Create a visual cue or text to indicate an action Interconnection & Rule: 3 levels to indicate importance and hierarchy Elements: Colour, contents and indicator
- 10. A design system brings a team together around a universal language. Provides teams the time to solve more significant problems, and the ability for teams to communicate more precisely. Why make one? ● Bring order to chaos ● Improve the user experience ● Improve workflow efficiency ● Allow you to iterate faster ● Faster standardized employee onboarding ● Lower the cost of long-term maintenance
- 11. Why do we need a design system?
- 12. Without a design system... Every new project and every new hire increases chaos in the process and slows down velocity.
- 13. That leads to... ● Software development process becomes gradually slower and slower ● The users’ experience suffers from growing inconsistencies.
- 14. Do you answer no to some of these questions? ● Are we always happy with the speed of product development? ● Do our interfaces share the same design patterns, colors, typography and other styles? ● Do we always have enough time to deliver a quality product to meet KPIs/OKRs? ● How much time and money do we spend on redundant design or code tasks? ● How much time and money do we spend cleaning up design or technical debt?
- 15. Let's take a look at an example Every single one uses different styling, CSS classes, and JSS components. Purpose: These all seem to have similar jobs? Interconnection & Rule: Different structure, layout, and no consistency Elements: Each is custom use of elements
- 16. Every unnecessary colour slows us down, forcing confusion, hard coding and overrides everywhere. No order or purpose to the choices made. All the versions of gray (20+) 9 versions of green OR what was happening with colours
- 17. But, we are not alone.
- 18. To overcome these challenges thousands of companies are investing in Design Systems
- 19. Getting buy- in to start this ● Figure out who you need buy-in from ● Involve allies and emphasize design system co- ownership ● Focus on the value proposition ● Be prepared for questions and push back
- 20. Getting buy-in to start this ● Figure out who you need buy-in from This varies from company to company. It will probably be a CEO, a head of product, or a head of engineering. In our case, it was the CTO
- 21. Getting buy-in to start this ● Involve allies and emphasize design system co- ownership. Don’t go to war on your own. Build a combined initiative with the front-end/engineering team, and your chances of getting executive buy-in will be much higher. It’s not just a set of beautiful components built in your preferred design program, but a set of design and coding principles and UI components ready to be used in your products. So for them, it’s as important as it is for you.
- 22. Getting buy-in to start this ● Focus on the value proposition Scalability: you’ll be more prepared to scale both the design and front-end areas in the future. This allows you to move faster. Creativity: by building a repository of rules and components, you’ll spend less time on pixels, which gives you more time to redesign your customers’ experience and come up with disruptive solutions. Themes: you will prepare your products for themes! This is especially important if you’re planning to build white-label solutions or products for third-parties. User Learning-curve: once your products are consistent, their interfaces will be more predictable, leading to a reduced learning curve across products. Employee Onboarding: you’ll get the most out of every new hire, due to faster standardized onboarding with the design system. Updates: it will be faster and easier to update your products’ UI.
- 23. Getting buy- in to start this Be prepared for questions and push back ● How much time will it take to implement? ● Will it have an initial negative impact on your already arranged deliveries? ● How are you planning on rolling this out? ● What if it lowers our funnel conversion? ● Are we going to change it all again in a couple of years? ● Will this slow down the team as they learn a new system?
- 25. ● Moving fast but not reckless ● Not always 100%, taking risks for rewards + learnings ● This is a living thing not a piece of art to hang on the wall How did we build this in 6 months
- 26. Prepare to move fast and test Approach this like any other project, it is going to have fails, learnings, and iterations.
- 27. Ok, now where to start
- 28. Audit and understand The first step is to audit and understand what you currently have designed. ● Ask what components are doing the same job? ● What can work as one? ● Why do we have different components? ● What are we missing?
- 29. Components: ● Cards ● Lists ● Tables ● Navigation ● Headers ● Tabs ● Footer ● Forms ● Error cards ● Drawers ● Overlays UI atoms + Elements: ● Palette ● Buttons ● Inputs fields ● Radio buttons ● Check boxes ● Search bar ● Tooltips ● Typography ○ Headers ○ Paragraph ○ Lists ○ Labels ○ Links ● Icons ● Dropdowns ● Progress indicators ● Loaders ● Alerts ● Dividers Templates: ● List view ● Map view ● Hotel page ● Sub-pages ● Error pages Creating a catalog
- 30. Leverage a base framework (material) ● We don't need to spend time building the basics and the base of our system. ● Don't be afraid to leverage existing frameworks or libraries to assist you. ● We took advantage of a react material design library. Material is the base of a lot of common apps and still gives the freedom to be your own. Others who have used this: ● Airbnb ● Lyft ● Momondo ● Simple Habit ● Eventbrite ● Evernote ● Uber (until 2018)
- 31. Design language (Building blocks) Rules and Documentation Review and Governance Colour Palette Typography Scale Grid Definition Icons and Assets Spacing Structure Design Library Templates Elements Components Modules Design Principles Implementation Guidelines Voice and Tone
- 32. Building a system for spacing, grids and colour ranges allows things to be consistent and organized. Design becomes faster and more organized while development spends less time measuring and creating. Grids, Spaces, Colours and Type
- 33. Rebuild the base layers We first created a system for navigation and page templates. This gave the team the framework to start building on.
- 34. Using the base for Material we were able to customize the small pieces to make them uniquely ours. UI Elements
- 35. Elements are combined based a purpose using the grids & spacing system, this give us the components we use. All of this is constructed so that modifying copy, states and sizes are done without breaking our rules. Elements into Components
- 36. Understand how the component will work across devices, scenarios, states that you would need based on the purpose of the component. Versions & states
- 37. Now we build With these component and elements it makes it easy to construct pages and flows based on our needs.
- 40. Some of the final product
- 41. Review process & maintaining the system We have collaborative design reviews and discuss items as a team. During this, we look at the experience, its needs and how the purpose fits into existing components.
- 42. Ability to test fast Some of the first tests we did were to help find the direction for the palette and design system. We did a CTA test to help find the primary action colour.
- 43. Getting it built 🛠
- 44. ● What are your code bad practices? ○ Containers vs components ● What could be done better? (more functional, reusability) ○ Reusability: React is component-based to reuse those components, but we don’t ○ More functional components (hooks) ● How much effort it takes? Step 1: Evaluate the current state of your app
- 45. ● Sit down and hear them out! ● Discuss with the design team what components they need built: ○ Layouts ○ Components ○ Elements ○ They might have some suggestion ● Make sure we are all on the same page ○ Px or Rem! ○ Color pallette ○ Grid size and spacing Step 2: Figure out design requirements
- 46. ● No duplicate components ● Better/More test coverage ● Ensure components are SSR (Server-Side Rendering) compatible ● Theming ● Ability for other teams to easily implement this system (NPM package) ● Backward Compatibility IE11, iOS 9, Android 5 Step 3: Discuss with the engineering team the technical requirements
- 47. A. Build it from scratch B. Adopt a good component library and tweak it to your needs ElementsUI pieces Components Templates Step 4: Make a call
- 48. We are not reinventing basic elements to create standard patterns. ● It’s a react library ● Well tested ● Good documentation ● It has the components that we need. ● Surrounded by a huge community Choosing B saves you a lot more time!
- 49. ● Are we separating mobile vs desktop? ● Are we going to release it all at once or page by page? ● Are we going to A/B test it? ● Do we want to roll it out to all users? (or 10%, 40%, 60%, 100%) Consider all of these and figure out what is best for your team and situation. Step 5: Figure out how you will roll it out
- 50. ● Configure the design system library itself (ssr functionality, theme, folder structure) ● How many engineers do you have to dedicate? ● Set-up a/b test experiment env ● You might want to: ○ Use Storybook to independently test and document our components ○ Use dynamic import eg: react-loadable to prevent a bundle increase ○ Implement the components in a reusable manner Step 6: Build it
- 51. With our theme file we are able to make fast global changes to components and UI
- 52. Storybook: Our source of truth
- 53. THANK YOU! Q+A We’re hiring! ● QA Engineer ● Data Analyst ● Product Manager ● Product Designer
- 54. www.productschool.com Part-time Product Management Training Courses and Corporate Training
Editor's Notes
- If you’re interested to connect with other Product Managers, aspiring PMs, or those within tech, join our Slack community of over 40,000 professionals. It’s a great place to network and to find interesting content. We host a weekly AMA through our Slack channel on Tuesdays from 11:15am - 12pm PST. We have also recently launched the Job Portal where you can find the latest Product Management opportunities! As members of the Product School community, we'd like to provide you with these resources at your disposal.
- Product School’s Product Management Certificate Path comprises of 3 part-time courses for professionals with strong technical or business background who want to further explore Product Management at software-based companies. During Product Management Training you will first learn Product Management fundamentals to understand the software product lifecycle and what it takes to successfully transition into a product management role. You’ll then be trained to retrieve data, understand its value and make impactful decisions with SQL, data visualization and Tableau. Learn to understand your users to deliver exceptional UX/UI design and develop a robust digital marketing plan. During the Full Stack Product Management Training, you will deep dive into the technical knowledge to enhance your ability to work with agile teams. Finally, Product Leadership Training will elevate your product knowledge to become an effective Product Leader. You'll do an in-depth analysis on how to implement best PM practices on a strategic level to significantly impact your company’s portfolio and revenue. Learn the soft skills to manage product teams and manage stakeholders to deliver performing products.
- As well as individual courses we provide corporate training across the world! If you’d like to upskill your product team this is the best option for you. We have trained employees from multiple companies such as Deloitte, Salesforce, JP Morgan, Bank of America amongst many other companies across all industries.
- Jake
- Design systems are collections of elements with interconnections and rules supporting them in order to drive purpose. A house, you have plugs, wall switches all connected by wires and have rules for how they are organized, flow and work. All of this to drive power to users in need.
- By utilizing a collection of repeatable components and a set of rules to use them, teams are able to change the pace of creation and innovation. Back to the house this is all pre-sold in department stores, you need a new component, we have it, but this doesnt mean all the jobs will be the same Think lego!
- Jake
- Jake
- Jake We want our team to be able to speak the same language around design and development Accelerate parts of the design process so we can focus on the bigger problems to be solved More consistent and predictive We already know the restrictions and rules
- Mostafa
- Mostafa Every single team or company I’ve been at that didn’t have a design system, I would see the following pattern happen.
- Mostafa So the outcome of that is that the software
- Mostafa
- Jake Example of a card we had Custom each time Same job
- Jake All different colours not varients or values of the same All of this is from moving fast, new team members, new features etc. which was great to get team to a point...
- Mostafa
- Mostafa
- Mostafa
- Mostafa
- Mostafa A design system isn’t something that affects the design team exclusively, so don’t go to war on your own. Build a combined initiative with the front-end team, and your chances of getting executive buy-in will be much higher. It’s not just a set of beautiful components built in your preferred design program, but a set of design and coding principles and UI components ready to be used in your products. So for them, it’s as important as it is for you.
- Mostafa
- Mostafa
- Jake
- Jake Moving fast but not reckless - proper meetings, process, reviews, and testing Not always 100% and taking risks for rewards + learnings - try that new thing out! This is a living thing not a piece of art to hang on the wall
- Jake Designs and products are living thing Approach this like any other project it is going to have fails, learnings, and iterations. You are going to be building things that help you move faster in the future, and those things will change as you learn more from users and your design team.
- Jake
- Jake The initial step we took was gathering all of the design components that currently exist in our product. Which allowed the team to start evaluating the design, grouping common components and exposing misalignments in components that could be fixed. Ask what components are doing the same job? What can work as one? Why do we have different components? What are we missing?
- Jake We were able to create this If you dont have an existing you might start here Well talk more about the buckets in a min, but this is your a la catre menu to begin
- Jake We don't need to spend time building the basics leverage existing frameworks or libraries to assist you. material design library. Material is the base of a lot of common apps and still gives the freedom to be your own.
- Jake We started to structure how this could come together, what was the ideal end state. Not all of this is even built yet, but it drives us.
- Jake Building a system for spacing, grids and colour ranges allows things to be consistent and organized. Type system, colour system
- Jake We first created a system for navigation and page templates. This gave the team the framework to start building on, think of this like framing a house before drywalling it or move in the furniture. Gives the teams consistent jumping off points
- Jake We also only used what we needed, this is not a time to start over working things or building on “What if”’ when it’s a living thing that can grow later.
- Jake Elements are created based on the grids & spacing system, when combined they give us the components. Components are the core blocks that build all the experiences but they need to be flexible and easy to use in different situations.
- Jake Now lets think of what we know and how these components work. One size wont fit all, but the base is the same Loading, error, interaction, different cases or needs
- Jake Lets look at the lego blocks that we started with for this page we planned out the hierarchy and purpose for it prior, but now we can see the pieces and states we will use
- Jake Boom magic! Grids and spacing come into play and all the states are ready. This makes design and development move super fast now along with quick iterations.
- Jake Lastly is hand-off, this becomes easier the more you have the system as you dont need to specify all the minor details because they are in the components We look at interactions, flows, sticky headers, anything else that is rule based for the page
- Heres how some of this looks when combined You can start to feel the unified design and experience which will also be felt by your users as they go through your product
- Jake We are a small team Weekly design reviews on new things Look at existing and new components being considered Should we add, combine - lets not hurt the job of the component but avoid adding for adding If we need something new, the team agrees, and it is added to the system. This helps ensure that any new component we add is not a duplicate of an existing one and follows the system’s rules and purpose.
- Jake Lastly, heres the power it gives us A quick design change, few lines of code and we can run multi varient tests rapidly One test we ran that was simple awas a CTA colour test
- What are your code bad practices? (containers vs components) Bad usage of containers vs components too many HOC vs pure, memo What could be done better? (more functional, reusability) reusability: React is component-based to reuse those components, but we don’t. more functional components: (hooks) How much effort it takes? (estimate better for next steps)
- Hear’em out: Discuss with the design team what components they need built: Layouts Components Elements They might have some suggestion evaluation result: designers might have some suggestions
- you want to make sure you are not going to have…. Duplicate components And your gonna have Better test coverage Ensure Ssr compatible theming
- Opening: the two ways that you could it create this… Building it from scratch Adopt a good library and build on top of that But on components you have to only worry about components and templates
- We looked at several libraries and landed on this We didn’t want to rethink basic functionality, and restyle common UI So we chose… 1: on react 2: well tested 3: amazing documentation 4: already has what we need (accordion, tabs, dropdown) 5: huge community We are not reinventing basic elements to create standard patterns.
- Opening: So we had to answer these questions to figure out how are we going to roll it out… Are we separating mobile vs desktop? Are we going to release it all at once or page by page? Are we going to A/B test it? Do we want to roll it out to all users? (or 10%, 40%, 60%, 100%) Consider all of these and figure out what is best for your team and situation.
- Opening: Configure the design system library itself (ssr functionality, theme, folder structure) How many engineers do you have to dedicate? maintain current platform Keep shipping New features implement the design system Set-up a/b test experiment env tools Backend support You might want to: Use Storybook to independently test and document our components Use dynamic import eg: react-loadable to prevent a bundle increase based on the bucket the user is in you might want to dynamically import Implement it reusable
- So here we have our theme file and we are going to change primary color of the app to indigo and boom!
- Kam
- Jake/Mostafa wrap up
- Feel free to speak with me and I can point you in the right direction (explain where to apply). Or you can visit www.productschool.com Have a good night!