Intelligent city operating system
The Intelligent city operating system(ICOS) is an operating system designed for urban infrastructure and services. It is the integration of ten different products.
As a product designer, my task was to research exciting products and set design requirements based on briefs from internal teams and external partners.
Overview
The intelligent city operating system had issues with pertaining visual consistency and brand identity. In addition, there were challenges in terms of interaction design, including low usability and operational inefficiencies. Our team minimized the costs associated with repetitive communication and iterations.
Problem
Our team enhances the ICOS through a standardized design language, user research, simplified interfaces, improved information architecture, responsive design, and collaborative iteration, leading to improved teamwork and productivity.
Solution
Discover the problem
Ten different products within the ICOS required integration. These products were developed by separate product managers and designers, resulting in inconsistent interface design and operational processes.
Initial problem
I interviewed product designers, product managers, and engineers to get their inputs on the project at the beginning.
Conduct Interviews
From my research on the products, I realized that we needed a solid design language. There eixited heavy redandency from operations of many different components, different color palette applied to different products and finally inconsistencies between component styles.
Key findings
Explore the solution
How could we bring a more consistent product experience and make it easier for engineers to implement and maintain ?
Design goal
After finalizing design goals, I facilitated a workshop with product deisgners and engineers to ideate various soultions by brainstorming.
Ideation
Re-establish a new design language
The new design language was created from the ground up for two reasons:
1. Helps designers to improve quality and stability.
2. Makes it easiser for Engineers to implement and maintain.
The primary design goal is to help designers and engineers to easily use templates for constructing interfaces. By providing numerous form and table templates within the operating system which is benefical for subsequent systematized workflows.
Design template pages
Responsive design offers optimized content display and layout, enhancing the user experience of the ICOS. It also facilitates unified maintenance and management, reducing maintenance costs and workload while streamlining administrative processes.
Responsive design
Through the following steps, a consistent design language and brand culture can be established at the MVP stage, and a good foundation can be laid for subsequent product development
MVP
Design
Iteration plan
A new language
The design language was recreated according to the tonality of the product, and all component specifications in the system are sorted out, which can improve the efficiency of design and development.
Light Mode and Dark Mode can provide user personalization options in the design system, improve readability and visibility, and bring a unique interface style to the product.
Interactive design guidelines
The interactive design guidelines I created highlighted the following three aspects: functionality, interaction, and based on real-world examples. These guidelines ensure consistency, predictability, and a great user experience.
Functionality
Specifies how users interact with components, including behavior and feedback.
Interaction
Demonstrates the application of guidelines in actual products.
Example
Defines components and their purpose, such as buttons and input fields.
Homepage
Use cards to display product information, allowing users to quickly understand product functionalities.
Take the experience hall as the title, expand the content of each module, and enhance the enthusiasm of user experience.
Set up a help center to solve problems and provide basic support.
Sheet
Clean layout to ensure that the table layout is concise and easy to read.
Emphasize important content to highlight important data and interactive elements.
Provides the function of sorting and filtering table data.
Solution
Form
Clear labels and directions help users understand the purpose of a field and what to expect.
Provide real-time verification and error prompts to ensure the accuracy of form data.
Use default values and autofill to reduce user input workload and provide a smoother user experience.
Solution
Others
Dashboard
Calling code
Usability testing is vital for a city operating system. It helps evaluate usability and user satisfaction through test plans, participant recruitment, task execution, and feedback collection. Benefits include issue identification, improved user experience, reduced churn, enhanced reliability, and increased competitiveness. Ongoing usability testing enables continuous optimization, aligning the system with user needs and providing high-quality solutions for city management.
Usability testing
Usability testing with 6 participants achieved 100% task completion on all 5 tasks and a high usability score using the high-fidelity prototype I created. Based on the test results, I made some changes to the design to further optimize the user experience.
Responsive design
Responsive design is essential for a city operating system, offering benefits like cross-device compatibility, improved user experience, cost efficiency, SEO optimization, and future flexibility. By researching, creating scalable layouts, optimizing interactions, adapting content, and conducting testing, we achieve a consistent user experience, enhancing the system's market competitiveness.
Epilogue
Metrics
We will use this metrics to measure whether the design can help users have a more consistent product experience and help engineers maintain and implement the system more easily
Consistent visual style and brand identity
Unified user interface and interaction patterns
More consistently
More easily
Clear design documentation and specifications
Reusable components and modules
Ongoing user testing and feedback
Business impact
Reflection
What did I learn from this project?
Importance of consistency: I have recognized the significance of consistent product experience for user satisfaction and brand image.
Value of design guidelines and documentation: I have understood the importance of establishing design guidelines and documentation to facilitate team collaboration and development work.
Significance of user testing and feedback: I have realized the value of conducting ongoing user testing and collecting user feedback for product optimization and improvement.
What are the most challenging parts of this project?
The biggest challenge may lie in integrating inconsistent product experiences and establishing a systematic component library and guidelines.