🔎 Analysis & Research Given the scale, the first step was to analyze the platform and understand the business side: - Service Audit: Reviewed existing services, their flows, and differences in design and implementation. - Stakeholder Interviews: Met with multiple business owners to identify their needs and constraints. - Pain Point Collection: Analyzed user feedback and support tickets to highlight recurring issues such as: • Inconsistent navigation patterns across services. • Different UI elements and terminologies creating confusion. • Redundant form structures that slowed down completion. • Lack of accessibility standards across services. Outcome: A clear understanding that inconsistency was the biggest barrier to usability and efficiency. 👤 Persona Development: To ensure user needs guided the redesign, we developed personas representing the platform’s diverse audience: • Citizens seeking permits, licenses, or submitting reports. • Business Owners applying for commercial approvals or certificates. • Municipal Employees reviewing and approving applications. • Consultants/Contractors submitting technical documents. These personas helped prioritize simplicity, trust, and efficiency as core design principles. 🎨 Crafting the Design System The biggest challenge and opportunity was creating a Design System that could unify 400+ services. Key Principles: 1.Consistency Every service should feel like part of Balady, regardless of the team managing it. 2.Scalability The system should support new services without reinventing the design. 3.Efficiency Reusable components should speed up design and development. 4.Accessibility All services must be usable by citizens with different levels of digital literacy. Components & Patterns: • UI Library: Buttons, inputs, dropdowns, progress bars, alerts, and tables designed once and reused everywhere. • Form Templates: Standardized form structures for applications, reducing errors and speeding up submissions. • Navigation Patterns: Clear, predictable menu and service flows across all services. • Status Tracking Widgets: Unified way for users to follow their application progress. • Color & Typography System: Modern, accessible palette aligned with MOMRAH’s identity. Documentation & Handoff • Created design documentation to guide developers and business owners. • Built a Figma component library with usage guidelines for each element. • Established a governance model to maintain consistency across teams. Impact: Instead of redesigning each service separately, business owners could now plug into the design system, ensuring both speed and consistency. 👨‍💻 Testing & Iteration Each redesigned service went through usability testing, focusing on: Form Completion Rates Were users able to complete services faster? Error Reduction Did inline validation prevent mistakes? Navigation Clarity Could users easily find their service and track its status? Feedback led to refinements like shorter labels, clearer error messages, and larger touch areas for mobile users.