The City of Oakland, a major hub in California’s urban landscape, sought to make its government services more accessible, transparent, and efficient for both residents and employees. With a diverse, multilingual population and a strong commitment to digital inclusivity, the City required streamlined, user-friendly portals: a resident-facing portal to provide access to municipal services such as permits, payments, and records, and an internal portal for employee tools, resources, and collaborative workflows.
The project involved creating fresh, intuitive portal applications for Oakland’s residents and employees, with a cohesive user interface that would also simplify future app developments and improve long-term maintenance. It also involved creating a scalable Style Guide to ensure uniformity, adaptability, and efficiency across multiple OutSystems applications for the City of Oakland.
We needed to establish a strong UX and UI framework, enabling the City to maintain digital consistency, enhance usability, and deliver a modern experience aligned with community expectations.
We created user flows, wireframes, and high-fidelity mockups for the resident and employee portals, ensuring accessibility and responsiveness for all users.
We also conducted usability reviews and iterative testing sessions to validate design decisions and improve the overall experience. Our approach emphasized consistency, scalability, and alignment with Oakland’s digital inclusivity goals, setting a strong foundation for development.
User flows and wireframes were developed to prioritize intuitive navigation, enhancing the user experience on both portals.
A back-office interface was designed to empower City administrators, allowing for easy updates to portal content and management of user access.
A style guide was established to document design decisions and ensure interface consistency across all digital touchpoints.
We used OutSystems UI Framework and Reactive Patterns to develop the front-end for the OAK APPs, building a mobile and web-responsive theme. We also created a live-style guide that documented our design decisions and provided guidance for developers.
In the second phase, we developed a back-office, an internal and an external app portal, and some core services to be used by all applications and ensure common systems such as “login”, “create account”, “create password”, “user profile”, etc.
Using the OutSystems UI Framework and Reactive Patterns, we developed mobile and web-responsive themes for both portals, ensuring consistent performance and accessibility.
Common system elements—such as login, account creation, and user profile management—were built to standardize key functions across all applications.
The style guide was embedded within the system to serve as a practical reference for developers, ensuring cohesive and scalable future updates.
After deployment, Hi Interactive continued to work closely with the City’s team, offering ongoing support to guarantee the correct and consistent use of all digital assets. Our involvement went beyond initial implementation, ensuring that every resource was applied in alignment with the established guidelines.
We also remained available to assist the client’s internal teams during the development of new features, providing guidance and technical expertise whenever necessary. This collaborative approach not only safeguarded the quality and consistency of the solution but also empowered the client to evolve the platform with confidence and efficiency.
Reach out to explore tailored solutions for your business challenges.
Hi Interactive Corp. 1030 Salem Road Union, NJ 07083
Alcântara-Rio Bloco A, nº36 – 2º Dto, R. Cozinha Económica 1300-149 Lisboa
info@hi-interactive.com
+351 213 630 796