CLOSE
The Israeli national websites (Gov.il) were inconsistent and confusing in terms of usability and familiarity. There are 124 government digital entities: 31 government offices, the judiciary, the legislature (the "Knesset"), 83 authorities and institutions, and 8 government hospitals. All of their presence and digital processes are developed by different departments and there's no standardization when it comes to deliverables.
Create a design system consisting of +30 components that will help government teams to create better interfaces more efficiently and at cheaper development costs.
Reducing development time by 30% and improving visual consistency.These components serve as the building blocks for innovation, creating digital processes that will reduce manual work and save citizens precious time.
In this project, our approach was: (1) initially focusing on the areas where we had clear direction and could progress immediately with design, and (2) addressing and clarifying any ambiguous tasks and components to prevent potential bottlenecks.
The project was managed on Monday.com, which allowed us to effectively track tasks, progress, communications, and documentation from initial drafts to final versions, providing a comprehensive overview both internally and externally.
Initially, we used Adobe XD and Zeroheight for design documentation, which was selected based on legacy limitations rather than efficiency and vision. Recognizing the need for a more effective tool, we transitioned to Figma, where we successfully developed a robust design system, enhancing our design process and output.
Our design foundation consisted of colors, grids, spacing, fonts, and essential components which we had from MyGov. We've standardized these elements to create a base and then built upon it to enhance the system. Understanding the importance of visual consistency, I thoroughly researched each component to grasp its unique features, behaviors, and states. This allowed us to design components that are responsive across both desktop and mobile platforms, with only a select few tailored as adaptive. Moreover, each component was crafted to include various states- Regular, Hover, Pressed, and Disabled - as well as validation states: In Progress, Success, and Failure. This ensures functionality without sacrificing visual harmony.
Ultimately, components cannot effectively serve a system without contextual understanding. Therefore, we conducted tests using these components within specific pages to provide relevant context. As a result, elements on these pages, including search functions and forms, went through necessary adjustments to ensure seamless integration and functionality.
Our goal was to reduce development efforts not just through the provision of components, but by developing modules that enable employees to edit content independently. For the first time, office staff, even those without technical expertise, can effortlessly update text and images on their web pages. This innovation eliminates the need for designers to create banners for every update.
.png)
