How do you create a system for microsites design, meant to promote solutions built on top of an existing, state-of-the art design system? By resisting the urge to reinvent the wheel. This system needed to allow for rapid iteration, enabling less technical teams to easily provide feedback on design and content.
Role:
UX/UI Designer
Company:
SAP
Duration:
2 months
Design Challenge
The TimesSites platform allows sales/presales teams to create microsites showcasing SAP products to clients. However, creating each microsite from scratch is time-intensive, and 75% of microsites require significant updates after the initial draft. The aim was to build a small and agile, Figma-based design system that would ensure consistency with SAP design language while reducing the time needed for iteration and feedback.
Research
Stakeholder interviews: I spoke with 10 stakeholders of the sales/presales teams to learn about their goals, and pain points in requesting microsites.
Existing design system audit: Conducted an audit of SAP Fiori to ensure brand consistency could be achieved in the new microsites.
Key insights: The feedback highlighted the importance of maintaining SAP Fiori’s visual identity to deliver a cohesive client experience across touchpoints. Stakeholders also emphasized the need for rapid, visual mockups to streamline decision-making on content and layout of information for the clients.
Discover
Survey: A follow-up survey conducted after the interviews with microsite stakeholders revealed that over 90% of microsites relied on a core set of sections, including headers, product showcases, and case studies. Those sections were key elements stakeholders looked for when assessing the right template for their client's microsite.
Outcome: With a clear understanding of these core sections, I could concentrate on building a minimal design system that would support the most commonly used elements, eliminating unnecessary complexity.
Defining Core Sections
Based on interviews and surveys, combined with the audit, I identified core sections for most microsites:
Hero sections with SAP anvil logo branding
Product showcases with visuals and descriptions.
Case studies and testimonials.
Team sections
Design
Color and typography: Applied the Fiori color palette and typography, ensuring all microsites matched SAP’s brand standards.
Component alignment: Adapted key Fiori components, such as buttons, fonts, headers, and footers, so each microsite had a consistent brand look.
Content-friendly templates: Designed flexible templates in Figma for common page types (e.g., Home, Product Overview, Case Studies), each with predefined content blocks that reflected SAP’s visual language while allowing easy customization.
Results
Consistent look and feel: By leveraging SAP Fiori’s established design language, the micro-design system created a way for my team to quickly propose visual and information layouts without overhead.
Faster feedback: The current system rollout hopes to reduce the iteration time on the TimeSites microsite.
Enhanced usability for non-technical stakeholders: Initial feedback from sales and presales teams highlighted the value of visually cohesive, editable prototypes. This validated our hypothesis that while content may be predefined, the final design almost always benefits from additional iteration once the visual hierarchy and information architecture are in place.
As the system is currently-rolled out, I am still collecting metrics allowing me to asses project impact on the microsite request process.
My Reflections
The journey to create this micro-design system was anything but linear. Although the above case study documentation might imply a step-by-step evolution, the reality was more exploratory and iterative. The polished, pixel-perfect Figma system I delivered may seem like the ideal solution, but in truth, it was better suited for our internal designers than for the less technical sales and presales teams—my primary stakeholders. Their initial feedback revealed that what they really needed was a more structured and straightforward request tool (even something as simple as a Microsoft Form or spreadsheet), rather than a high-fidelity design framework.
In hindsight, this personal initiative within the SAP Design Office underscored the importance of deeply understanding stakeholder workflows before committing to a solution. While my design system laid a foundation for visual consistency and quicker concepting for design team, it did not address the bottleneck in requesting microsites. In the next iteration, I plan to conduct workshops with the stakeholders to thoroughly map out the current request process and explore more practical, to-be scenarios.
