Haifa City Reporting App—A Collaborative Journey
Haifa City Reporting App
A Collaborative Journey
Haifa City Reporting App—A Collaborative Journey
Introduction
Introduction
Introduction
In the dynamic landscape of smart cities, the Haifa City Reporting App emerges as a
tool for bridging the gap between citizens and municipal services.
As a UX/UI designer, my mission was clear: to create an intuitive, user-friendly platform that empowers residents to report issues seamlessly, thus helping the municipality understand and manage resources better.
Let’s delve into how this project unfolded.
In the dynamic landscape of smart cities, the Haifa City Reporting App emerges as a tool for bridging the gap between citizens and municipal services.
As a UX/UI designer, my mission was clear: to create an intuitive, user-friendly platform that empowers residents to issues seamlessly, thus helping the municipality understand, manage and resources better.
Let’s delve into how this project unfolded.
In the dynamic landscape of smart cities, the Haifa City Reporting App emerges as a tool for bridging the gap between citizens and municipal services.
As a UX/UI designer, my mission was clear: to create an intuitive, user-friendly platform that empowers residents to report issues seamlessly, thus helping the municipality understand and manage resources better.
Let’s delve into how this project unfolded.
My role:
My role:
UX research
Planning & wireframing
UI design & prototyping
UX research
Planning & wireframing
UI design & prototyping
Tools:
Tools:
Specs:
Specs:
Apps Platform: Mobile Android
Duration: ~1.5 weeks
Apps Platform: Mobile Android
Duration: ~1.5 weeks
1. Understanding the Challenge
1. Understanding the Challenge
1. Understanding the Challenge
The Problem
The Problem
Haifa City faced a common urban challenge: efficient communication between residents
and municipal departments.
Haifa City faced a common urban challenge: efficient communication between residents and municipal departments.
Haifa City faced a common
urban challenge:
efficient communication between residents and municipal departments.
How could we streamline issue reporting, maintenance tracking, and follow-up communication?
How could we streamline issue reporting, maintenance tracking,
and follow-up communication?
How could we streamline issue reporting, maintenance tracking, and follow-up communication?
The Solution
The Solution
The Solution
B2B2C mobile app that aims to empower citizens by providing a straightforward platform for reporting hazards, maintenance needs, and other concerns regarding Haifa city and municipality services. By leveraging computational processes, we envisioned a seamless experience that would foster civic engagement and instill a sense of community ownership while optimizing and managing resources more efficiently.
B2B2C mobile app that aims to empower citizens by providing a straightforward platform for reporting hazards, maintenance needs, and other concerns regarding Haifa city and municipality services. By leveraging computational processes, we envisioned a seamless experience that would foster civic engagement and instill a sense of community ownership while optimizing and managing
resources more efficiently.
B2B2C mobile app that aims to empower citizens by providing a straightforward platform for reporting hazards, maintenance needs, and other concerns regarding Haifa city and municipality services. By leveraging computational processes, we envisioned a seamless experience that would foster civic engagement and instill a sense of community ownership while optimizing and managing resources more efficiently.
2. UX Research
2. UX Research
2. UX Research
Despite limited resources in budget and time, I made strategic choices:
Benchmarking: I studied existing reporting apps. Two from which are global and two from the largest municipalities in Israel, along with the alternative options to report an issue nowadays. For example, see the Muni's web form below:
Despite limited resources in budget and time, I made strategic choices:
Benchmarking: I studied existing reporting apps. Two from which are global and two from the largest municipalities in Israel, along with the alternative optins to report an issue nowadays. For example, see the muni's
web form below:
Despite limited resources in budget
and time, I made strategic choices:
Benchmarking: I studied existing reporting apps. Two from which are global and two from the largest municipalities in Israel, along with the alternative optins to report an issue nowadays. For example, see the muni's web form below:
Unused Features and tools, that can be found on mobile platform. Such as Location, Interactive Mapping and camera.
Cognitive Load - multiple input fields and long dropdowns.
Lack of visual aids (Icons, Urban Location Map)
Statuses and user notifications
Useability and accessibility
Utilizing App Data for Better Urban Resources planning
Promoting transparency and accountability through public information sharing
Unused Features and tools, that can be found on mobile platform. Such as Location, Interactive Mapping and camera.
Cognitive Load - multiple input fields and long dropdowns.
Lack of visual aids (Icons, Urban Location Map)
Statuses and user notifications
Useability and accessibility
Utilizing App Data for Better Urban Resources planning
Promoting transparency and accountability through public information sharing
Unused Features and tools, that can be found on mobile platform.
Such as Location, Ineractive
Mapping and cameraCognitive Load - multiple input fields and long dropdowns
Lack of visual aids (Icons, Urban Location Map)
Statuses and user notifications
Useability and accessibility
Utilizing App Data for Better Urban Resources planning
Promoting transperancy and accountability through public information sharing
Collaborating with the Product Manager:
Noam Sadik, our experienced project manager, provided valuable insights.
As part of David Etzioni's campaign managment, his understanding of campaign goals
and user personas shaped our approach.
Collaborating with the
Product Manager:
Noam Sadik, our experienced project manager, provided valuable insights.
As part of David Etzioni's campaign managment, his understanding of campaign goals and user personas shaped our approach.
3. Designing for Simplicity and Intuitiveness
3. Designing for Simplicity
and Intuitiveness
3. Designing for Simplicity & Intuitiveness
Statistics to Support Assumptions
Assumption: Citizen prefer mobile interaction for reporting to the municipality.
Supporting Data:
88% of Israel's population owns a smartphone while another
10% own atleast a ‘dumbphone’ (Taylor and Silver, 2019).
The findings demonstrate that the adoption rate of municipal apps in Israel is 42.7%, in the advanced stage of the new technology adoption curve. (1)
Assumption: Quick reporting leads to higher engagement.
Supporting Data: 90% of citizens (USA) want to engage with the goverment service thorough an app (2)
of course, further supporting data is needed for israels echosystem.
Assumption: Citizen prefer mobile interaction for reporting to the municipality.
Supporting Data:
88% of Israel's population owns a smartphone while another
10% own atleast a ‘dumbphone’ (Taylor and Silver, 2019).
The findings demonstrate that the adoption rate of municipal apps in Israel is 42.7%, in the advanced stage of the new technology adoption curve. (1)
Assumption: Quick reporting leads to higher engagement.
Supporting Data: 90% of citizens (USA) want to engage with the goverment service thorough an app (2)
of course, further supporting data is needed for israels echosystem.
Assumption: Citizen prefer mobile interaction for reporting
to the municipality.
Supporting Data:
88% of Israel's population owns a smartphone while another
10% own atleast a ‘dumbphone’
(Taylor and Silver, 2019).
The findings demonstrate that the adoption rate of municipal apps in Israel is 42.7%, in the advanced
stage of the new technology
adoption curve. (1)
Assumption: Quick reporting leads to higher engagement.
Supporting Data: 90% of citizens (USA) want to engage with the goverment service thorough
an app (2) of course, further supporting data is needed
for israels echosystem.
Design Principles
Design Principles
MVP Flow: A stepped, intuitive process ensured ease of main use and communicating to the stakeholders.
Accessibility: Considering not all reporting citizens would be of a younger generation, tech-saavy with a good eyesight and motorics kind of users. Thus, I considered the placment and attributes of buttons and layout. Also, a simple fast flow that is designed to be intuitive and clear 'one step at a time'.
Visual Language:
For two, I kept the Styleguide simple but delightfull in mind. I chose colors similar to the Haifa's Muni website branding, blues and stratigic placment of yellows. As well as for Jackobs law and a more formal and trusting feel. Thus, making a positive and delightful pallet but not to distracting and cognetive loaded one. 4 pt grid used, and used a font that are san-serif, modern and easy to read in style and proportions (Major third ratio).
I illustrated all my app, keeping in mind the size of the mobile screen and readbility,
while focusing on same graphic language. In the categorie screen, when choosing colors, I chose 3 basic colors, in a repeating order (blue-green-orange) the help distinct the diffrenet options keeping in mind clearity and simiiar graphic language.
MVP Flow: A stepped, intuitive process ensured ease of main use and communicating to the stakeholders.
Accessibility: Considering not all reporting citizens would be of a younger generation, tech-saavy with a good eyesight and motorics kind of users. Thus, I considered the placment and attributes of buttons and layout. Also, a simple fast flow that is designed to be intuitive and clear 'one step at a time'.
Visual Language: For two, I kept the Styleguide simple but delightfull in mind. I chose colors similar to the Haifa's Muni website branding, blues and stratigic placment of yellows. As well as for Jackobs law and a more formal and trusting feel. Thus, making a positive and delightful pallet but not to distracting and cognetive loaded one. 4 pt grid used, and used a font that are san-serif, modern and easy to read in style and proportions (Major third ratio).
I illustrated all my app, keeping in mind the size of the mobile screen and readbility,
while focusing on same graphic language. In the categorie screen, when choosing colors, I chose 3 basic colors, in a repeating order (blue-green-orange) the help distinct the diffrenet options keeping in mind clearity
and simiiar graphic language.
MVP Flow: A stepped, intuitive process ensured ease of main use and communicating to the stakeholders.
Accessibility: Considering not all reporting citizens would be of a younger generation, tech-saavy with a good eyesight and motorics kind of users. Thus, I considered the placment and attributes of buttons and layout. Also, a simple fast flow that is designed to be intuitive and clear 'one step at a time'.
Visual Language: For two, I kept the Styleguide simple but delightfull in mind. I chose colors similar to the Haifa's Muni website branding, blues and stratigic placment of yellows. As well as for Jackobs law and a more formal and trusting feel. Thus, making a positive and delightful pallet but not to distracting and cognetive loaded one. 4 pt grid used, and used a font that are san-serif, modern and easy to read in style and proportions
(Major third ratio).
I illustrated all my app, keeping in mind the size of the mobile screen
and readbility,
while focusing on same graphic language. In the categorie screen, when choosing colors, I chose 3 basic colors, in a repeating order (blue-green-orange) the help distinct the diffrenet options keeping in mind clearity and simiiar
graphic language.
4. Crafting the User Experience
4. Crafting the User Experience
4. Crafting the
User Experience
MVP User Flow & Wireframes
MVP User Flow & Wireframes
MVP User Flow & Wireframes
Flow planned to demonsrate the MVP flow.
Must have features are:
- Reporting issues with simple steps and intuitive flow and UI - using clear common categories i.e. "Cleaning", "Infrastructure", etc. Those categories later use to catalog reports in muni's side.
- Photo upload and location tagging, Include a textual
description field.
- Provide status tracking so users can see if their report has been received/in progress/completed. rasing their trust in the manicupality and work done to adress those reported issues.
- Haifas map with the ability to tap location to file reports right from the map and see other reports around them. This promotes transparency for issues being worked on and raises awareness of communal co-work in terms that other citizens participate, thus giving it a social aspect.
- Contact info/hotline for urgent issues.
- Gamification elements like reward badges, points or "reporter leaderboards" to encourage active participation.
- Muni's announcements like road closures, water main repairs etc. that may impact citizens.
- FAQs/tooltips with reporting guidelines to improve quality
of submissions.
Flow planned to demonsrate the MVP flow. Must have features
carefully sorted are:
- Reporting issues with simple steps and intuitive flow and UI - using clear common categories i.e. "Cleaning", "Infrastructure", etc. Those categories later use to catalog reports in muni's side.
- Photo upload and location tagging, Include a textual description field.
- Provide status tracking so users can see if their report has been received/in progress/completed. rasing their trust in the manicupality and work done to adress those reported issues.
- Haifas map with ability to tap location to file report right from the map and see other reports aorund them. This promotes transparency for issues being worked on and raise the awarness of the communal co-work (meaning raising awarness that other citezens participate- thus, giving it a social aspect).
- Contact info/hotline for urgent issues.
- Gamification elements like reward badges, points or "reporter leaderboards" to encourage active participation.
- Muni's announcements like road closures, water main repairs etc.
that may impact citizens.
- FAQs/tooltips with reporting guidelines to improve quality
of submissions.
User-Centric Approach
Prioritizing simplicity, the app’s user flow and interface needed to be intuitive, even for users unfamiliar with technology. My assumptions were based on the belief that citizens would engage more readily if the app felt like a natural extension when stumbeling apon a city issue.
User media attached is functionally better when presenting all on screen, zooming in by tap if needed.
User-Centric Approach
Prioritizing simplicity, the app’s user flow and interface needed to be intuitive, even for users unfamiliar with technology. My assumptions were based on the belief that citizens would engage more readily if the app felt like a natural extension when stumbeling apon a city issue.
User media attached is functionally better when presenting all on screen, zooming in by tap if needed.
Homescreen
Homescreen
For example, the nav menu at the bottom iteration may be considered less direct, not accessible. Same for the bubbles nav menu, as in Macabi's app for example, that serves elderly users as well.
For example, the nav menu at the bottom iteration may be considered less direct, not accessible. Same for the bubbles nav menu, as in Macabi's app for example, that serves elderly users as well.
Report Summary
Report Summary
User media attached is functionally better when presenting all on screen, zooming in by tap if needed.
User media attached is functionally better when presenting all on screen, zooming in by tap if needed.
Categories Screen
Categories Screen
As for the category screen, a drop-down list of category buttons for reporting common subjects was chosen.
Although the 'wareped' option is responsive, it may cause
accessibility issues.
Auto-complete requires keyboard use, which may cause confusion in knowing which category to look for, as well as additional effort that may cause a drop in reports.
As for the category screen, a drop-down list of category buttons for reporting common subjects was chosen.
Although the 'wareped' option is responsive, it may cause
accessibility issues.
Auto-complete requires keyboard use, which may cause confusion in knowing which category to look for, as well as additional effort that may cause a
drop in reports.
'Report an issue' flow
Prototype
Prototype
Prototype
Conclusion
Conclusion
Conclusion
The Haifa City Reporting App exemplifies the fusion of two side user communication and a clear UX/UI. By integrating planning and design, we transformed mundane reporting platform into an empowering civic act.
As a designer, I learned that simplicity isn’t just about aesthetics; it’s about empowering users to involve
and shape their environment.
The Haifa City Reporting App exemplifies the fusion of two side user communication and a clear UX/UI. By integrating planning and design, we transformed mundane reporting platform into an empowering civic act.
As a designer, I learned that simplicity isn’t just about aesthetics; it’s about empowering users to involve and shape their environment.
The Haifa City Reporting App exemplifies the fusion of two side user communication and a clear UX/UI. By integrating planning and design, we transformed mundane reporting platform into an empowering civic act.
As a designer, I learned that simplicity isn’t just about aesthetics; it’s about empowering users to involve
and shape their environment.
Future Roadmap
Future Roadmap
- Project 'Un-Interrupted': Despite 7th of Oct setbacks, our MVP stands ready for presentation.
- Municipality Dashboard: Extend the app to empower municipal departments.
- User Testing: Test and research app useabillity and impact. Does the engagment on the raise, does it stablize? - What are those KPIs for engagment? etc.
Future Roadmap
- War Interruption: Despite setbacks, our MVP stands ready for presentation.
- Municipality Dashboard: Extend the app to empower municipal departments.
- User testing: Test and research app useabillity and impact. Does the engagment on the raise, does it stablize? - What are those KPIs for engagment? etc.
- War Interruption: Despite setbacks, our MVP stands ready for presentation.
- Municipality Dashboard: Extend the app to empower municipal departments.
- User testing: Test and research app useabillity and impact.
Does the engagment on the raise, does it stablize? - What are those KPIs for engagment? etc.
Jump to Prototype
Jump to Prototype
Jump to Prototype