FAQ about ShopBack Design System
Background
Becher Ku and I have had the pleasure of being teammates for over five fantastic years, and oh, the things we’ve learned from each other! While Becher brings his graphic and visual design expertise to the table, my wheelhouse has always been research. However, what unites us is a shared passion for optimising operational processes to turbocharge team efficiency.
Recently, we had an absolute ball sharing the ins and outs of our work culture with Halo Designers, a vibrant design community based in Indonesia. A big shoutout to Wasil and the rest of the organizing team for bringing this event to life! Missed the talk? No worries — you can catch it via the link below.
I was eager to use the talk as a platform to highlight the diverse skills researchers bring to the table, beyond just producing insights. In this fast-paced industry, adaptability and a willingness to collaborate are essential. I encourage both designers and researchers on my team to broaden their skill sets. While researchers don’t need to be design experts, they should understand the fundamentals of our products and design principles, especially since they’re part of the product design team. This holistic view allows for better synergy among researchers, designers, and content strategists. My time at ShopBack, particularly working with Becher and our design team, has been a rewarding experience, offering me the latitude to venture beyond my usual responsibilities.
We were flooded with a variety of questions during the webinar. Unfortunately, the clock wasn’t our friend, so we couldn’t tackle them all. However, given the glowing feedback we received, we knew these questions deserved their own spotlight. So here we are, dedicating this blog post to answering those lingering queries. Enjoy reading! 😄
Table of contents
- Consistency: Marketing Assets, Design Audit.
- Communication: Documenting Design system, Collaborating on Design System, Communicating Value of Design System,
- Scalability: Design Token, Balancing Quality and Delivery, Organising Components, Starting a Design System.
Consistency
Marketing Assets
I saw in slides ‘Marketing Assets Guidelines’. How do you guys create it? Collaboratively or from Marketing team or Product Design team? Who initiated first?
Naning
I personally believe that the ideal way to manage operational workflow is to centralise efforts between the Graphic Design and Product Design teams. Currently, these teams are structurally separate in our organisation — Graphic Design falls under Marketing, while Product Design is part of the Product team. Despite this separation, we have been actively collaborating to align our practices, aiming to eliminate redundancy and enhance efficiency for both teams.
Becher
The Graphic Designers from our Marketing Team collaborate with us to define ShopBack app colours and styling. Components like marketing banners are primarily owned by the marketing team, but they strive to adhere to the UI guidelines we’ve established.
Design Audit
How do you conduct design system audit? Any format or templates that you usually use for audits?
Naning
Conducting a design system audit is a regular practice for us at ShopBack, and it’s not just the domain of designers; researchers like myself are actively involved too. Audits provide an opportunity for us researchers to understand how design issues, such as inconsistencies, affect the overall user experience. Our approach often includes visualising the user funnel, identifying key interactions, and analyzing user behaviour across different flows. This process helps us question why certain designs are effective in specific markets. After the audit, we collaborate with our design teammates to formulate actionable steps based on our findings.
Sharing is caring, so we also exchange audit results with designers to create a comprehensive picture. While our focus as researchers tends to be on broader topics like onboarding, redirects, and withdrawal experiences, designers like Becher zero in on specific components like search filters and tabs. Any inconsistencies we spot are flagged for design attention. Sometimes, designers also seek our input on the analytics of certain components. This collaborative approach ensures that our audits are thorough, informative, and ultimately beneficial for improving our design system.
Becher
I just do lor with Figjam. 🤷🏻♂️
Communication
Documenting Design System
in this case we are working a DS with a lot of products and different teams, how do we align them and build a comprehensive documentation for them to read?
Did you do documentation your design system in google docs or spreadsheet, if yes, how to documentation in google docs/spreadsheet?
Becher
In managing a design system with multiple products and teams, a layered approach to documentation is critical. We use Figma for documenting component styles and facilitating hand-offs to engineers. For detailed insights into the rationale behind components, tech documents, design patterns, and the dos and don’ts regarding component interactions, we rely on Confluence. Lastly, Google Sheets comes into play for measuring the effectiveness of the design system and tracking its adoption across various functional teams.
Naning: Here, I took screenshot from Confluence.
Becher: Use the ‘Component’ one.
Naning: Ok, den I use the green ones ah? Den people can see your work is good.
Becher: No! Get the one got yellow and red too.
Naning: Hah? Den people can see your components not adopted?
Becher: No, den people can see got real use one.
Naning: Ok can. 🤷🏻♀️
Naning
When it comes to tool selection for knowledge base, the emphasis is on reducing cognitive load and encouraging adoption. We stick to tools that ShopBack is already using, for several reasons: it’s easier for designers to track their work, more likely to be adopted by other teams, presents less risk in terms of data storage of user data, and, of course, is more cost-effective. So, despite our work being produced across different platforms like Google Workspace, Lokalise, and Metabase, we use Confluence and Figma as centralised knowledge bases for our team of Product Designers, Researchers, and Content Strategists. It also serves as a wiki to our insights repository and standards of practices to everyone in ShopBack.
Collaborating on Design System
how to make it easier deliver the design system to engineer and another stakeholder?
Hi, I want to ask is there any tips for us who collaborate in team, how to create consistent and seamless design sytem? So the team understand how to use it. Tq
How do we convey our concerns when there is a version change in the framework we use that will have an impact on the design systems we have created?
Becher
For effective collaboration in creating a consistent and seamless design system, communication is key. First, establish a common channel for team discussions in Slack or any communication channel in your organisation, where any member can flag issues and everyone relevant is instantly alerted. Second, it’s crucial to know your audience within the team. Identify who the main decision-makers are and make sure to have regular one-on-one conversations with them to communicate the value of the design system. Don’t just rely on communicating with the designers; it’s equally important to engage stakeholders with higher authority. This ensures that everyone in the team understands the design system’s importance and knows how to use it effectively.
Naning
Effective communication is a universal need, regardless of whether you are in design, research, content, or operations. To that end, your team should have multiple channels for varying types of communication. A two-way channel should exist for stakeholders to discuss and deliberate, while a separate one-way channel can be used for updates and announcements. For example, our research team uses multiple approaches that includes Slack for quick updates, Confluence for more detailed documentation, and one-on-one meetings for in-depth discussions. This allows us to cater to different communication needs while ensuring everyone is kept in the loop.
Communicating Value
How to “start” a design system? how to get approval from stakeholder, engineer, and product or other team? Do we need to create the UI kit first? thanks
How do you get a buy in from stakeholders to work on DS and making sure that DS is an integral part of development?
Becher
Starting a design system is a multifaceted process that requires both acknowledgement of the problem and alignment from the top down. Before even hiring for a design system designer role, it’s crucial that the company understands and is aligned with the need for a design system. If you are considering applying for such a role, be sure you grasp the rationale behind it to gauge how committed the company is to this endeavour. The direction for implementing a design system needs to come from the top. If it’s initiated from the bottom up, it risks becoming a side project with scattered focus and inconsistent prioritisation. Without top-down support, you will struggle to allocate resources, and your time management may even come under scrutiny. So, ensure there’s top-down alignment to make the design system an integral part of development.
Scalability
Design Token
Does Design Token is part of the design system? If yes, when we can include design token into our design system?
Do you apply design token in your design system? If yes, how does it work?
Becher
Absolutely, design tokens are an integral part of our design system. They act as the building blocks for all our components, ensuring a consistent and scalable design language across both mobile native and web.
Balancing Quality and Delivery
What is a reasonable timeframe for crafting an effective design system while ensuring quality and attention to detail?
Becher
Assuming the question refers to the time frame for releasing components within a design system, several factors can affect the timeline. First, the complexity of the component plays a significant role; simpler components like buttons can be created more quickly, while more complex ones like bottom sheets require more time and effort. Second, the ease of replacing existing variations, such as experiences built with legacy components or codebase, can also impact the duration. Finally, company priorities may shift focus and resources away from component development, especially if there are more urgent features in the pipeline. So, crafting an effective design system while ensuring quality and attention to detail is a dynamic process that varies depending on these factors.
Organising Components
As we know, DS can be defined first for common components, but sometimes there’re components that built in parallel in a project. so how to organize it ideally?
Becher
It sounds like the component in question is specific to a single project. This brings up an important consideration: is a design system necessary for your needs? Sometimes, components are unique to a particular project and may not warrant being included in a broader design system. It’s essential to evaluate whether a component should be added to your design system first.
Starting a Design System
How we do know if we need a design system? any circumstances that “ yes, we need a design system”. Thankyou.
How to create the design system from scratch?
What’s your starting point when you are building a design system
We cannot answer this question as we didn’t build the scratch. But you can look at the Design System in 90 days book by Dan Mall. You can also learn from Halo Designers’ book, that is in Bahasa Indonesia.
If you have stayed till the end of this post, know that I am super thankful for your time. I hope you’ll take a thing or two away from our experiences! Anyway, I’m always excited to meet new people, so hit me up for coffee or tea anytime. You may also find me in ADPList. 😁
❗️ Interested in what else we work on?
Follow us (ShopBack Tech blog | ShopBack LinkedIn page) now to get further insights on what our tech teams do!
❗❗️ Or… interested in us? (definitely, we hope 😂)
We are looking for a research intern for our team. Check out here how you might be able to fit into ShopBack — we’re excited to start our journey together!
