A design system is a set of standards, components, and documentation that guides digital product development. It acts as a single source of truth for designers and developers, ensuring consistency across projects. It includes component libraries, style guides, design languages, and documentation for elements like typography, colors, and spacing. By establishing common understanding between design, engineering, and product teams, it enables smooth collaboration and delivers consistent user experiences.
These designs are presented for portfolio purposes only. All intellectual property rights remain with Roche. Certain details have been simplified or omitted to maintain confidentiality.
💥 Process and impact
The delivered design systems improved enterprise apps by creating a consistent user experience and cutting development costs in half through shared design elements.
In my role as Design System Manager, I oversaw planning and updates, worked with team members, created the designs and kept documentation up to date.
This helped project teams work better together, establish enterprise assets and deliver harmonized, user-friendly design standards.
1️⃣ OneRoche Design System
The OneRoche Design System made all company apps look and work the same way by using shared design rules. We created a set of ready-to-use UI components and patterns that helped build apps faster and ina a much cheaper way.
Proper documentation was also delivered where all rules for text styles, colors, patterns, behavior etc. were described.
2️⃣ B2B Design System
We developed the B2B Design System to meet the specific needs of business users in their industry.
We worked closely with stakeholders and experts to create a user-friendly system. It features clear layouts, simple workflows, and high-contrast designs that are easy to use.
We also created a low-fidelity version that helps teams quickly test their design ideas with users.
3️⃣ B2C Design System
We updated our B2C Design System to improve accessibility and interaction patterns by following WCAG standards and providing guidelines and documentation to share within project teams. The close cooperation with developers was vital to deliver efficiently and bringing in stakeholder’s voice.
We created also a low-fidelity version to enable quick validation and iteration with stakeholders.
Thank you for reaching the end 🙏