Design Process
1. Problem definition
As ServerMania experienced continuous growth, we encountered fresh challenges within our design process. With the evolution of the company and its website over the years, maintaining design consistency, reviewing mockups, and collaborating effectively with the development team became increasingly complex.
As a product designer, the problem was apparent to me, and I identified a solution: implementing a Design System that could serve as a solid foundation for ServerMania's entire online presence. However, before proceeding with the transition, it was crucial to convey the issue and educate my non-designer colleagues, as well as the management team, about the benefits and significance of Design Systems.
I devised a comprehensive plan outlining the transition process to gain their support and collaboration for a smoother and more effective design workflow.
Design Process
2. Research
During the initial research phase, the focus was on gaining in-depth knowledge about design systems in general, as well as selecting the most suitable software for the task, which led us to choose Figma. A deep dive into the methodology of a design system, particularly exploring Brad Frost's Atomic Design, provided valuable insights. Additionally, I engaged in courses to fully grasp Figma's toolset and capabilities.
To ensure a smooth transition to the new system, I conducted regular meetings with the development team to collaboratively decide on the best course of action. As they were already in the process of updating our CSS framework to Tailwind CSS, this presented a great opportunity to align our efforts and build the design system around Tailwind's core concepts.
Throughout the research phase, I maintained close collaboration with ServerMania's stakeholders. The advantages of having a single source of truth in the form of our design system immediately appealed to everyone, as they recognized the benefits in terms of consistency, maintenance, and collaboration. As part of this, I also outlined a new process for handling design projects using Figma's collaboration tools and integrating them with Jira.
Design Process
3. UI Design
With both the marketing and development teams fully on board with the project, I delved into the foundations of our design system. Our aim was to elevate our online presence to new heights while preserving our brand's visual identity. To achieve this, it was crucial to seamlessly integrate our existing brand colors, fonts, and identity into the system, ensuring a well-organized and documented approach.
The subsequent step involved creating all the essential building blocks as Figma components, with a strong emphasis on consistency and responsive design. Our primary objective was to ensure the ServerMania website displayed flawlessly on any device, offering a consistent user experience across the board.
Design Process
4. Final Product
Leveraging the components we meticulously developed, we began assembling the entire user experience. Notably, we introduced a completely redesigned navigation and footer, revamping every section with utmost attention to detail.
To enhance the overall visual appeal, I crafted custom-made server illustrations and refreshed the iconography while also introducing other supplementary visual assets.
Design Process
5. Implementation and QA
I collaborated closely with the development team, actively assisting them in translating my Figma designs into fully functional and polished live websites. A key aspect of my role was conducting rigorous quality assurance checks, ensuring that every bug and visual inconsistency were promptly addressed prior to the launch.
Through our continuously evolving and meticulously maintained design system, we successfully enhanced the overall user experience of our website. Simultaneously, we streamlined the design process and fostered better collaboration between our teams, resulting in a more efficient and effective workflow.
