Swag International

Design system BO & VO

⬤ 01. Challenges

A scalable design system for multiple back offices and virtual offices

This case study focuses on developing a scalable design system to handle extensive data tables across various back offices and virtual offices.

The core challenge is to present large datasets in a clear, user-friendly layout while enabling a well-structured page hierarchy for smooth navigation and consistent user experiences.
⬤ 02. Reflection

From data to delivery:
synthesizing insights
to guide decisions

Interviews
We conducted interviews with a representative sample of our target users through online surveys and remote sessions. This approach allowed us to accurately identify the daily challenges users face. Our analysis revealed that breadcrumbs are not sufficiently visible and that the complexity of the organizational charts hampers smooth navigation.
Organization chart
0%
Navigation
0%
Other issues
0%
0
Days
0
Questions
0
Participants
Problem
From our analysis, we identified that the main challenge lies in managing complex data, specifically organizational charts, tables, and financial information. Additionally, navigation is hindered by the large number of sections, making it difficult for users to find their way through the interface.
⬤ 03. Ideation

A scalable
design system for internal and external teams

I developed a design system with over 314 components, organized into 14 pages. I created a changelog to track updates and a guide explaining semantic versioning and component usage.
Clear documentation was essential since many implementations are handled by external teams, ensuring consistency and immediate understanding.
0
Components
0
Days
0
Pages

⬤ 04. Experience

Design system prototyping and validation through interviews

Organitation chart
To optimize the display of the organizational chart, I designed an expandable system that avoids both horizontal and vertical scrolling while maximizing the available screen width and height. Certain sections are collapsed and expand on demand, providing a clearer overview. For enhanced navigation, I introduced breadcrumbs and contextual tooltips, improving overall structure comprehension. Additionally, I implemented an advanced search bar with filters, allowing users to quickly locate a specific individual.
Tag, searchbar and truncate
We developed a system of tags and icons to instantly identify specific qualifications or roles, differentiating both the icon and color. For breadcrumbs, we follow the pattern defined by the design system: if the text is too long, it is truncated in the middle. Additionally, when the organizational chart is resized, a tag appears to indicate the number of people in that particular row or column.
⬤ 05. Optimize

Continuous testing and iteration for an inclusive design system

I used multiple tools to ensure the design system meets user needs, emphasizing WCAG 2.2 accessibility. In particular, I performed color testing with Able and tracked user behavior via Hotjar.
Ongoing interviews and surveys with stakeholders enable continuous iteration, ensuring the product is refined and improved over time.
Impact
Overall, the design system proved to be a valuable ally, delivering tangible results. In the first Virtual Office implementation, the data highlighted increased efficiency and reduced development times, clearly demonstrating the improvements achieved.
- 0 %
Development times
+ 0 %
Team Efficiency

Work with me

giuseppebussolari@gmail.com
Back