UX Director : Tetrisly

Introduction

In the fast-paced world of digital product design, consistency, speed, and efficiency are crucial. Design teams often struggle to maintain these qualities across their projects, especially when working with complex design systems that are difficult to manage, update, and implement consistently. This case study illustrates how Tetrisly, a design system tool, addresses these common challenges, enabling design teams to streamline their processes and deliver higher-quality products faster. The Tetrisly design system was created by a Polish based IT services company named Virtuslab who reached out to me with a contract to work on their team.

My Role

I was contracted by Virtuslab to be the sole UX designer working on the Tetrisly design system, alongwith a team of 3 UI developers and a project manager. My task was to research, ideate and prototype the UI components to be used in the figma library, based on multiple rounds of brainstorming with the company founders and stakeholders.

In all my responsibilities included, but were not limited to :

• Research and wireframe multiple visual styles with interactive prototypes: With multiple designers working on a project, ensuring that components remain consistent and up to date is a constant battle.

• Create and maintain the FIgma source file for the project and manage backups: Designers often spend more time searching for or recreating components than on actual design work, leading to bottlenecks in the development process.

• Gather feedback and iterate over design for future releases: Misalignment between design and development teams can result in designs that are difficult to implement or that don’t meet the project’s requirements.

The Challenge

Design systems are essential for ensuring a unified visual language across products. However, many design teams face significant obstacles in creating and maintaining these systems. Traditional methods often lead to disorganized files, inconsistent components, and communication breakdowns between designers and developers. These issues result in wasted time, increased costs, and ultimately, products that fall short of user expectations.

Common challenges include:

• Inconsistent Design Components: With multiple designers working on a project, ensuring that components remain consistent and up to date is a constant battle.

• Inefficient Workflows: Designers often spend more time searching for or recreating components than on actual design work, leading to bottlenecks in the development process.

• Poor Collaboration: Misalignment between design and development teams can result in designs that are difficult to implement or that don’t meet the project’s requirements.

  
  

The Solution

Tetrisly offers a solution that directly addresses these pain points, empowering design teams to build, manage, and maintain design systems more effectively.

Key features of Tetrisly include:

• Pre-Built UI Components: Tetrisly provides a comprehensive library of pre-built, ready-to-use UI components that are meticulously crafted to ensure consistency and usability. This allows designers to quickly assemble interfaces without worrying about minor inconsistencies that can disrupt the user experience.

• Scalability and Flexibility: The tool is designed to scale with teams as projects grow. Tetrisly’s flexible structure allows for easy updates and modifications, ensuring that the design system evolves with the product.

• Streamlined Workflow: Tetrisly integrates seamlessly with popular design tools like Figma, enabling designers to incorporate high-quality components into their workflows effortlessly. This integration reduces the time spent on repetitive tasks, freeing up designers to focus on creativity and innovation.

• Enhanced Collaboration: Tetrisly fosters better collaboration between design and development teams by providing clear, standardized components that are easy to implement. This reduces friction and miscommunication, ensuring that the final product closely aligns with the design vision.

  
  

Having formulated a plan of action, outlining goals, desires, grievances and success metrics, I laid out a 5-step plan to design, test and build a react native library of design system elements.

Stage 1. Usability Audit

Initiated the project with a comprehensive usability audit of the existing design systems, employing heuristic evaluation, user interviews, and performance analytics to identify friction points. This audit revealed significant areas for improvement, particularly in the app's navigation system, goal tracking features, and social engagement mechanisms.

Stage 2. Design Strategy

Formulated a design strategy that prioritizes modularity and encapsulation, added data visualization elements for goal tracking, and new elements to foster experimentation and engagement among potential users. Developed a detailed design roadmap, categorizing changes into short-term fixes and long-term enhancements, to guide the redesign efforts effectively.

Stage 3. Prototype Development

• Wireframing: Undertook the redesign of core design system screens and user flows, addressing the audit's findings. Emphasized the creation of a more intuitive and goal-oriented user journey for all components in the system, reducing cognitive load and enhancing the overall user experience.

  
  

• High-Fidelity Prototyping: Leveraged Figma to construct detailed prototypes that brought the new design system to life. These prototypes featured multiple combinations of design system elements that aligns with the motivational needs of 'designers who are developers first', showcasing the design system's flexibility, modularity and interactivity.

  
  

• User Interface Design: Enriched the visual identity, incorporating vibrant colors and dynamic elements that motivate users to engage with their goals actively. Carefully selected typography and iconography that aligned with native React compatibility, ensuring the system is not only beautiful but also functional.