Hire a designer

Key Principles that Guide Gojek’s Design Decisions

One of the key principles guiding Gojek’s design choices is their commitment to collaboration. The team believes that great design emerges from the combined input of various stakeholders, not just the designers. This collaborative approach fosters valuable contributions from all team members, resulting in a more vibrant and diverse design process. Another important principle is accessibility; Gojek strives to make sure that every user, regardless of their abilities, can easily engage with their products.

Another key aspect is the focus on iteration and continuous learning. Gojek recognizes that design systems are dynamic and must adapt over time. They kicked off the development of Asphalt with just two designers, a daring choice that underscores their dedication to innovation, even when facing uncertainty. This iterative strategy has enabled the team to enhance their components and design patterns using real-world feedback and usage data, leading to a more robust and user-friendly system.

Challenges Faced at Scale and Their Impact on Design

Scaling up presented its own set of challenges for Gojek’s design team. As they rapidly expanded their product offerings, they faced significant pressures that resulted in design inconsistencies. Initial design files were often chaotic, riddled with redundant layers and a lack of standardized naming conventions. With multiple brand colors appearing on various artboards, it became clear that a unifying system was essential.

This disarray had a direct impact on the designers and developers who were pushed to meet tight deadlines. The urgency often led to shortcuts in design quality, which, in turn, affected the user experience. Recognizing this, Gojek's team began to explore common design patterns, such as colors, typography and shapes, that could serve as the backbone of their design language. The effort to establish consistency not only improved the aesthetic appeal of their products but also made it easier for teams to work collaboratively and efficiently.

In essence, the challenges faced during this scale-up phase were invaluable lessons that shaped the development of the Asphalt design system, steering it toward a more organized and coherent future.

Organizing and Managing Components Efficiently

To manage components effectively, Gojek has created a system that focuses on organization within Figma. The design team sorts components by their function and usage, making it easy to find and use them across different projects. Clear naming conventions are key; each component is labeled in a way that prevents confusion and duplication. This approach allows designers to quickly locate what they need without having to wade through countless files or versions.

Version control in Figma also helps maintain consistency. As components evolve, the team ensures that updates are reflected across all products, which minimizes errors and design discrepancies. This organized approach not only makes life easier for designers but also fosters a culture of clarity and efficiency within the team. With everyone speaking the same language when it comes to components, collaboration has become more seamless, leading to faster design iterations.

Implementing Design Tokens and Reusable Patterns

Another key strategy in Gojek's design system is the implementation of design tokens and reusable patterns. Design tokens act as the building blocks for design decisions, encapsulating aspects like color, typography, spacing and more into a central repository. This means that when a designer wants to change a primary color or adjust font sizes, they can do so in one place and the updates ripple across all components that utilize those tokens.

Reusable patterns enable designers to utilize proven design principles for new projects without having to start from scratch. These patterns can range from button styles to grid layouts, ensuring a consistent user experience. By making use of design tokens and these reusable patterns, Gojek not only streamlines its processes but also improves user interactions, making them feel familiar and intuitive. This mindful approach to component design is important, especially as Gojek continues to grow and broaden its services in various markets.

Using Variables to Make Components Dynamic in ProtoPie

In ProtoPie, variables really transform the design process. They add a level of interactivity that static designs just can’t provide. By incorporating variables for important aspects like booking status and user preferences, designers can build prototypes that react to what users do. For instance, when a user picks a ride option, the interface can instantly update to display relevant information, such as estimated arrival times or fare details. This quick feedback is not only satisfying for users but also significantly improves their overall experience.

The beauty of variables is in their flexibility. Designers can easily reassign them through triggers, creating a smooth interaction experience. For instance, think about a button that changes its color or text depending on whether a user has completed a form or made a selection. With variables, controlling these changes is simple, which helps make designs more intuitive and user-friendly.

Applying Conditions to Trigger User Interactions

After setting up your variables, the next step is to establish conditions that determine how and when those variables change. These conditions serve as guidelines that trigger specific actions based on user interactions. For instance, if a user completes a form, you can create a condition that activates the "Submit" button. If any required fields are left blank, however, the button stays disabled, giving users a clear visual indication that something needs to be addressed.

This conditional logic can be extended to create branching flows within the app. By using a single trigger combined with multiple conditions, you can direct users down different paths based on their choices. This is especially useful in a complex application like Gojek, where users might be making various selections across different services. Each choice can lead to a unique experience, crafted to guide them seamlessly through their journey.

Enhancing Accessibility Through Interactive Prototypes

Accessibility is a critical consideration in design, and interactive prototypes play a significant role in addressing this need. By using the features in ProtoPie, Gojek can test designs with users who have visual impairments. The Speak feature, for instance, allows users to navigate through the prototype using voice feedback, ensuring that everyone can engage with the app effectively.

Using variables and conditions can enhance accessibility by creating customizable user experiences. For instance, some users may prefer larger text or specific color themes, which can be set as variables. When these preferences are integrated into the prototype, designers can observe how different users engage with the app, allowing for more informed design choices. This emphasis on accessibility not only expands the user base but also creates a more inclusive environment, a core value at Gojek.

Creating interaction designs that incorporate conditions and variables really changes our perspective on user experiences. When designers focus on dynamic behavior and accessibility, they can develop prototypes that not only look appealing but also work well for everyone.

Securing Team Buy-in and Cross-Functional Collaboration

Getting the whole team excited about the design system starts from the ground up. It’s important to involve designers, developers and product managers right from the beginning, as this fosters a sense of ownership and belonging. When Asphalt first launched, the team prioritized gathering feedback and insights from within the organization. This grassroots approach laid a strong foundation, making everyone feel like their opinions were valued. The main point is to highlight the advantages of the system: quicker design processes, fewer inconsistencies and in the end, a better experience for users.

Cross-functional collaboration is equally important. By breaking down silos between teams, Gojek was able to create a fluid exchange of ideas and foster a more interconnected workflow. When everyone understands how their role fits into the bigger picture, it encourages a shared commitment to the design system.

Piloting with Key Products and Sharing Learnings

Once there’s a solid foundation of support, it’s time to put the design system into practice. Gojek chose to pilot the system with GO-RIDE, a product that was already familiar and had a large user base. This decision allowed the team to identify recurring components and flows that could be standardized. By leveraging an existing product, they could test the waters without overwhelming the team or risking major disruptions.

Throughout the process, sharing what we learned became essential. Instead of keeping our insights confined to the design team, it was important to communicate both our successes and challenges with all the product teams. This transparency not only helped us improve the design system but also inspired other teams to adopt similar approaches.

Utilizing Figma to Boost Efficiency and Collaboration

Figma played a pivotal role in Gojek’s journey toward a cohesive design system. Transitioning to this powerful tool transformed how teams collaborated, making it much easier to manage complex workflows and share resources. With Figma, designers could create, iterate and prototype all in one place, which streamlined the entire process.

By leveraging Figma’s capabilities, the design team saw significant boosts in productivity. It eliminated a lot of the frustration that came with previous tools, allowing designers to focus on creativity rather than getting bogged down in logistics. The real-time collaboration features meant that everyone could work together seamlessly, regardless of their location. This not only fostered a sense of community but also ensured that feedback was integrated quickly, keeping projects moving forward.

Gojek has laid a solid groundwork for a successful and scalable design system by gaining support, testing key products and using the right tools. The next step is to keep that momentum going and ensure the team stays aligned and motivated as they progress.

Documenting and Communicating Design System Updates

One of the most important things for keeping a design system thriving is solid documentation. Having great components isn't enough; everyone involved in the design process needs to know how to use them effectively. Gojek understands the value of clear communication when it comes to updates and changes to their design system. This involves creating detailed guides that not only show how to use different components but also explain the reasoning behind design choices.

Regular updates and clear communication help ensure that everyone on the team, from designers to developers, is on the same page and can collaborate effectively. By promoting an open dialogue, Gojek invites feedback and teamwork, which strengthens the design system. This approach empowers everyone and keeps them engaged, giving them a stake in the tools and processes that shape their work.

Building Plugins and Tools to Support Designers

To further enhance the design process, Gojek is committed to building plugins and tools that support their designers. The use of Figma has already streamlined many workflows, but there is always room for improvement. Custom plugins can be developed to automate repetitive tasks, enabling designers to focus on more creative aspects of their work.

These tools not only boost productivity but also promote consistency across the design system. By integrating specialized functionalities into Figma, designers can quickly access the resources they need, whether it’s design tokens or component libraries. This support structure is vital, especially as teams continue to scale and take on more complex projects across different markets.

Ensuring Scalability Across Multiple Platforms and Markets

Gojek operates in various regions, each with its unique set of challenges and user needs. As such, ensuring that the design system can scale effectively across multiple platforms and markets is a top priority. This involves adapting components to fit different cultural contexts while maintaining a cohesive brand identity.

The team is focused on creating a flexible design system that can adapt easily while still preserving its core principles. This adaptability is important for meeting the diverse needs of users in Indonesia, Singapore and other areas. By prioritizing scalability, Gojek improves the user experience and positions itself to quickly take advantage of new market opportunities. Their ongoing commitment to evolving the design system ensures it remains a valuable resource as they navigate the future of technology and design.