Open Circle
Design system for rebranded UI
How can a company ensure consistency and scalability when implementing a new visual identity across multiple applications? As part of Open Circle AG’s rebranding effort, a prototype was developed in Figma to establish a design system that supports their updated logo, color scheme, and typography. Designed with a desktop-first approach and aligned with the Bootstrap CSS framework already in use, the system ensures seamless integration into the company’s main application and other platforms. This setup enabled the development team to efficiently implement the new UI while laying the foundation for scalable future enhancements.
Sustainable Design Systems
Following the merger of two companies and a rebranding initiative, Open Circle faced the challenge of redesigning the “cockpit” — the primary interface through which both customers and company representatives manage the cloud computing service. A key aspect of this redesign was also the integration of the latest Bootstrap version, ensuring the cockpit's compatibility with modern frameworks and improving usability across the platform.
Understanding User Needs
Given the company’s long history and established user base, we conducted in-depth interviews to understand the specific needs and preferences of cockpit users. These insights guided the creation of low-fidelity mockups, allowing us to explore early iterations and gather feedback. Throughout this process, we worked closely with stakeholders and managers to ensure that our designs aligned with organizational goals and user expectations.
Special attention was given to information architecture due to the cockpit's complexity and its need to support multiple user roles. Each role requires tailored access and functionality, influencing the design of the navigation and layout. By understanding the role-specific workflows, we could develop navigation systems that intuitively guide users to their relevant tools and data.
After exploring a range of design variations, we made collaborative decisions with stakeholders and users, selecting solutions that best balanced usability with the platform's strategic objectives.
Design System for Development
To support development and ensure consistency, we created a comprehensive Figma Design System, along with a dedicated project file specifically for the cockpit interface. This structure allows the design components to be reused across the platform, promoting efficiency and uniformity. We began by designing the core views, followed by detailed custom components and interactions as needed. This project remains in development, with ongoing refinements based on user feedback and evolving requirements.
Explore More Projects
← Previous Project
Scentsory
Next Project →
