Role
UX/UI design
Client
Readiness IT
Plataforms
Web
Overview
Tuttifrutti served as our comprehensive internal design system, ensuring consistency not only within our design team but also across all products developed by Readiness IT.
Designed with an atomic approach, Tuttifrutti aimed to establish clear guidelines for deliberate and systematic design development, emphasizing explicit order and hierarchy. Over the course of a year, I dedicated my efforts to enhancing Tuttifrutti, focusing on improving both the research and design processes.
In the research phase, I actively participated in conducting user research, developing JavaScript prototypes, and conducting user testing. By engaging with users and gathering valuable insights, I gained a deep understanding of their needs and pain points, which informed the subsequent design iterations.
Collaborating closely with the development team, I ensured that the prototypes were effectively translated into tangible designs. Through meticulous analysis and documentation, I generated comprehensive reports that captured key findings and recommendations from the user testing phase.
As a result of this iterative process, I contributed to the creation of final guidelines for Tuttifrutti. These guidelines provided a valuable resource accessible to the entire team, offering clear direction and fostering consistent design implementation.
My involvement in the research, prototype development, user testing, and guidelines creation has been instrumental in shaping Tuttifrutti into a powerful tool for achieving design coherence and efficiency across Readiness IT's product ecosystem.
The team
At the inception of the project, our team comprised of two individuals who embarked on the comprehensive journey of developing the design system. Together, we navigated through every phase of the process, diligently working to achieve our objectives. While my primary responsibilities encompassed design, prototyping, testing, and reporting, the tasks often overlapped, and we collaborated closely to ensure smooth progress.
As the project progressed, additional team members joined our efforts, bringing in their expertise and perspectives. This influx of collaborators played a crucial role in streamlining our workflow and accelerating the development of the design system. With more hands on deck, we were able to allocate tasks more efficiently, ensuring timely completion of deliverables and enhancing overall productivity.
Throughout this collaborative journey, the contributions of each team member harmoniously merged, enabling us to leverage our individual strengths and talents effectively. The availability of diverse perspectives and skill sets within the expanded team fostered a dynamic environment, nurturing creativity, and driving innovation.
The seamless integration of new members enriched the overall process, enabling us to refine and optimize the design system even further. Our collective efforts, combined with the expertise of each team member, ultimately resulted in a more robust and comprehensive design system that successfully met our objectives.
The evolution from a two-person team to a larger, collaborative unit was instrumental in enhancing our capabilities, streamlining processes, and facilitating a more efficient and cohesive approach towards achieving our design system goals.
Our methodology
Our design process followed a structured approach, allowing us to effectively research and develop components for our design system. Here is a detailed breakdown of our process:
Annual Component Selection: At the beginning of each year, we defined the components to be researched and prioritized. We scheduled meetings with team members to assess project priorities, create a roadmap, and establish deadlines, ensuring a clear plan for the year ahead.
Research Phase: We conducted thorough research on selected components. This involved exploring relevant studies, benchmarking other design systems, and gathering essential information. We utilized this research to design initial wireframes and mockups, providing a foundation for our testing and validation process.
Use Case Presentations: We scheduled meetings with the rest of the team to present our use cases and close the research phase. This collaborative session allowed for feedback, insights, and alignment within the team.
Test Definition: After the research phase, we began defining the tests. A detailed document was created, specifying user flows, questions to be asked, and metrics to be recorded. This document served as a guide to ensure consistent and comprehensive testing.
Participant Recruitment and Logistics: We took care of recruiting participants, typically five individuals from diverse backgrounds. We also handled the logistics, ensuring a smooth testing environment. This included organizing recording equipment, preparing scripts for moderators and participants, and creating a comfortable atmosphere with treats like candy.
Test Execution: During the tests, we had a dedicated moderator and observer. Participants were provided with the script and encouraged to start when ready, while also following the "Think aloud protocol" by verbalizing their thought process. We engaged in interactive discussions with participants, answering questions without giving away instructions or placing blame on the participant for any perceived failures. Qualitative insights were particularly valuable, and at the end of the tests, we asked final questions to gather additional information.
Report and Presentation: Following the tests, we developed a comprehensive report summarizing the findings, insights, and recommendations. This report was presented to the team, fostering knowledge sharing and enabling informed decision-making.
Final Guidelines and Integration: The last step involved writing the final guidelines for the tested components. These guidelines were added to our design system's library, ensuring consistent implementation and usage across projects.
By diligently following this research-driven process, we successfully integrated tested and validated components into our design system, enhancing its comprehensiveness and ensuring a user-centered approach in our design practices.