LaUrsa - Design System
*This is not the full file, due to NDA
LaUrsa
The Design System Powering Recife's Digital Transformation
Introduction - Enhancing public services
Recife, Brazil, embracing digital transformation, created the design system LaUrsa for unified and scalable web portals, delivering a seamless user experience.
Problem Statement - A messy start
Citizens in Recife faced frustration and confusion due to inconsistent digital platforms, and hindering usability.
Objective - Consistency and scalability
LaUrsa aimed to establish a comprehensive design system for consistent digital experiences in Recife, streamlining development, fostering collaboration, and enhancing citizen interactions.
Tools
Zoom
Survey Monkey
Miro
Figma
Adobe XD
My Responsibilities
UX Research
UX Design
UI Design
Process
Design Thinking Workshops
Website Analytics
User Research
Information Architecture
User Interface Design
User Testing
Design System Documentation
Development Supervision
The City of Recife, Brazil
Design Process
The development of LaUrsa involved an iterative and collaborative design process with close interactions between the design team, the City Hall Innovation Team, and the developers.
The design team conducted extensive research to understand the needs, expectations, and pain points of citizens when interacting with digital services. Competitive analysis, user interviews, surveys, and web analytics helped the team to gather valuable insights.
Research
Analysing the state of the art
Extensive research was conducted to analyze multiple design systems, exploring recent design patterns and industry trends. This study provided valuable insights into effective UI component libraries, design guidelines, modular frameworks, responsive design patterns, and accessibility considerations. The findings informed the creation of LaUrsa, ensuring it incorporates the latest design patterns and industry standards.
Material Design (M2) - Google
Usability.gov - US
Polaris - Shopify
Chicago DS - City of ChicagoPolaris - Shopify
The main takeaway from these design systems analysis was to keep concictent with Material Design and une the Bootstrap V4 frontend framework. This would allow the city's development team with levarage to easily create any component not antecipated by the first version of LaUrsa.
User Research
After a survey with over 250 respondents and 14 interviews regarding the old web portal from Recife we could see three main pain points, that were fundamental for the Design System ideation:
Confusing Homepage
Users repeatedly left and return to the homepage within a short span of time, indicating difficulty in initiating interactions from the homepage.
Puzzling Find a Service Flow
Users abandoned the service-finding flow (after going back and forth), indicating growing frustration in locating information.
Bad Overall Architechture
Important pages were not being accessed by end users, possibly due to unawareness or difficulty in reaching them.
Ideation and Conceptualization
Based on the research findings, the team generated ideas and concepts for the design system along with the city hall innovation team during collaborative workshops. They explored various visual styles, interaction patterns, and information architecture to create a cohesive user experience.
Design Principles (Tokens)
The team defined a set of design principles that aligned with Recife's brand identity, usability goals, and accessibility standards. These principles guided the creation of the design system components.
LaUrsa- Color system (cropped detail)
LaUrsa- Type sample
Component Library
LaUrsa's design system comprised a comprehensive component library consisting of reusable UI elements such as buttons, forms, navigation menus, typography styles, and color palettes. Each component was meticulously designed and documented to ensure consistency and ease of implementation.
Content Cards
Service Status Cards
Primary Buttons (Desktop)
Secondary Buttons (Desktop)
Service Icons
Testing and Validation
The design system underwent rigorous testing to ensure its usability, accessibility, and responsiveness across various devices and screen sizes. Feedback from stakeholders, designers, and users was incorporated to refine the components and address usability and strategic issues.
Implementation and Integration
LaUrsa was integrated into the city's new public service web portal and in the new city's app. The design system's guidelines, documentation, and code snippets were made easily accessible to developers, enabling efficient implementation. The design team monitored the whole coding process.
LaUrsa Application on the City's Portal
You can read the city's portal project on the this link:
Benefits and Impact
The introduction of LaUrsa design system brought numerous benefits to the city of Recife:
Consistency and Branding: LaUrsa ensured a consistent visual and functional experience across all digital platforms, reinforcing the city's brand identity and fostering a sense of trust among citizens.
Efficiency and Scalability: By providing a centralized repository of design components and guidelines, LaUrsa accelerated the development process, reduced design debt, and enabled scalability for future projects.
Improved User Experience: The design system's user-centric approach, informed by extensive research, resulted in enhanced usability, intuitive interactions, and clear navigation, making it easier for citizens to access and utilize the city's digital services.
Collaboration and Alignment: LaUrsa facilitated collaboration among multidisciplinary teams, including designers, developers, and stakeholders. The design system served as a common language, fostering better communication and alignment throughout the design and development process.
Cost and Time Savings: With streamlined and well-aligned design and development processes.