Niagahoster Design System
Role: UI Engineer
Overview
As a UI Engineer at Niagahoster, I undertook a significant project focused on developing a robust design system. My responsibilities included creating new components, updating existing ones to accommodate changes, and meticulously documenting each component in a dedicated web guide. This comprehensive design system served as a crucial resource for full-stack developers, providing them with clear guidelines and references for consistent UI implementation across all Niagahoster applications. Leveraging my expertise in Vue.js and the Sass CSS preprocessor, I seamlessly integrated the design system, enabling efficient development processes and ensuring a cohesive user experience. Through this project, I demonstrated my proficiency in front-end development, attention to detail, and commitment to delivering high-quality design assets and resources.
Goals
The primary objective of the design system project at Niagahoster was to establish a unified and consistent user interface across all applications. By creating and maintaining a comprehensive design system, the goal was to streamline the development process, promote reusability of components, and ensure a seamless and cohesive user experience. Additionally, the documentation of each component in the web guide aimed to provide clear guidelines and references for full-stack developers, enabling them to efficiently implement the design system and maintain design consistency throughout the organization's various applications. This project aimed to enhance collaboration, improve development efficiency, and elevate the overall user experience for Niagahoster's customers.
Process
Here is the process flow of creating a design system involving all stakeholders:
Product Manager:
The product manager plays a crucial role in the creation of the design system by collaborating with stakeholders to define the goals and vision of the system. They work closely with the UX team to understand the needs of the target audience and allocate appropriate resources. Additionally, they prioritize the design system project and ensure alignment with the overall product strategy.
UX Designer:
The UX designer conducts user research to gain deep insights into user behaviors, preferences, and pain points. They utilize wireframes and prototypes to visualize the user interface and interactions, ensuring optimal usability. Collaborating closely with the UI designer, they maintain consistency and coherence throughout the design system.
UX Researcher:
The UX researcher collects valuable data by conducting user interviews, surveys, and usability tests. They analyze user feedback and behavior to provide insights that inform the design system's decision-making process. Collaborating with the UX designer and product manager, they ensure that the design system aligns with user needs and expectations.
UI Designer:
The UI designer translates wireframes and prototypes into visually appealing and intuitive interfaces. They create a cohesive visual design language encompassing color palettes, typography, and iconography. Collaborating with the UX designer and UI engineer, they ensure that the design system is visually consistent and aligns with user experience goals.
UX Writer:
The UX writer plays a vital role in crafting clear and concise messaging for the user interface. They carefully choose labels, instructions, and error messages to provide a seamless user experience. Collaborating with the UX designer and UI designer, they ensure that the language used in the design system is consistent and effectively communicates with the users.
UI Engineer:
The UI engineer implements the design system components using front-end technologies such as HTML, CSS, and JavaScript. They work closely with UI designer and Full-stack developer to bring design concepts to life, ensuring the system is both functional and aesthetically pleasing. Additionally, they ensure the codebase is maintainable, scalable, and optimized for performance.
Full-Stack Developer:
The full-stack developer integrates the design system components into the application's architecture. They follow the design system guidelines and best practices to ensure consistent implementation. Collaborating with the UI engineer and other stakeholders, they address technical challenges and provide valuable feedback for continuous improvement of the design system.