Data-driven research on the quality of life in Tehran (by NESHA) resulted in 41 heatmaps.
Mahan Mehrvarz
Product Designer
Hayat Platform
A crowdsource social platform, about quality of life in neighborhoods of Tehran to create an engaging experience for citizens and encourage them to write reviews about their neighborhoods. While using this app, citizens also provide feedback for the municipality's official urban statistics.
Framing the problem
Urban Data
The municipality of Tehran has defined a project to identify urban life opportunities within Tehran Metropolitan Area. A group of urban planners and urban data scientists used various methods to mine and gather urban data for examining the quality of urban life. The result was different heatmaps of urban variables that came out of their statistical modeling methodologies.
Validation
The resulting heatmaps were never checked by the actual opinion of citizens. The municipality (project's client) decided to develop a platform to validate these statistical heatmaps and see how people respond to them.
Problem Statement:
How do we develop an interactive platform for citizens of Tehran to find out what they think about our urban official statistical data?
Or how to create enough motivation for people to provide feedback about municipalities' data (heatmaps).
Goal:
Our main goal in the product design team was to create a web app that can evaluate the official municipality data (how accurate citizens thought their heatmaps were)
The product design process
Competitor Analysis
Although Hayat will not be completely an alternative to its counterparts such as Google Maps, Foursquare, Tripadvisor, and Balad (a local map application), we needed to study the ecosystem of mobile applications in the context of the city and urban life. The product team decided to offer some values that are not in the market yet.
One of our most important lessons was that most urban applications offer insight about the city based on location pins (geolocation points) while there is less effort to elaborate on areas and districts (geolocation polygons).
Hayat is better not to offer similar features to the users. Therefore we decided to prevent from offering some popular features that other apps are very strong and competitive in.
User Persona
The product team conducted a series of interviews to find some insight about users and their implicit needs. User persona helped us evaluate ideas while developing the user flow. The team often role-played them to criticize features, journey maps, and all sorts of ideas.
Most interviewees believed that it is very hard to get some insight into a district or neighborhood. Especially when one plans to move into a new place, they need some straightforward recommendations.
Some interviewees used Foursquare or Maps to find a good restaurant, but they thought it was hard to find a good spot for outdoor activities such as walking, as well as information about available public amenities.
Co-creating Workshop to speculate about the primary features of the app
Developing Features Through User Flow
I facilitated a two-day workshop to co-create the features based on the aforementioned steps. It is important to include members from the client (municipality) and the urban planning team who conducted the statistical research and built urban heatmaps on quality of life.
Day one was primarily about understanding the conducted research and discussing the 41 variables that correspond to the quality of urban life the most. On the second day, clients' representatives, data scientists, and urban planners tried to provide between 3 to 5 variables that best resemble the quality of life in the city of Tehran.
During the workshop, we used the "HMW" technique (from design thinking) to ignite innovative thinking and clustered similar ideas. Finally, the participant used voting techniques to choose among the best features that fulfill users' needs.
Based on the outcomes of our co-creation workshop, the product design team used sketching and user flow development techniques to develop a simple and engaging experience for the users that also fulfills the project goals.
Design Considerations
How can we encourage users (citizens) to visit the web app and review the data?
How can we create a web app which offers something different than what Google Maps, Foursquare, OSM, etc. offer?
How can we create a web app that proposes value to both citizens and municipalities?
Conceptual product user flow
Low-fidelity Wireframe
The low-fidelity wireframe was a tool for us to communicate final ideas with both client representatives and developers. Through this design medium, we realized that we have certain parts and interactions in the app. Feel free to check our ninth revision of the low-fidelity wireframe.
Prototype (UI design & Micro-Interactions)
In this step, we prototype the final user experience in its entirety, focusing on developing a simple and engaging UI design and micro-interactions. The final prototype helped us check the user scenarios with actual users before going through the development steps. It was also a key asset to communicate with the app developers to discuss technology frameworks and further details.
Design System
A design system is something even though I start thinking about at the beginning of the project, but it is still essential to sit down and revise it when your UI design is finished just before you are ready to submit your design to the front-end developers for further discussion.
Heuristic Interviews
Before going through the actual developments and while discussing technologies such as UI kits, Map Libraries, and database design, a series of heuristic user interviews helped us adjust many details and touch up the product. One of the main guidances of our interviewees was reconsidering the choice of words in many instances. In fact, the journey for the user was clear, but due to the highly technical terminology (coming from our urban planning colleagues), interviewees could not find them and were being misled.
Project Credit:
The project brief was created in collaboration with NESHA and Future City Innovation Lab. I was engaged in all parts of the project as the lead product designer from the very initial brainstorming sessions to the final agile development steps (User Stories, Tasks, Bugs, etc).
Product lead: Mahan Mehrvarz
Product DevOps Lead: Sina Aghajani
UX Research and Design: Mahan Mehrvarz, Nastaran Tahbaz, Atousa Adel
UI Design: Mahan Mehrvarz, Nastaran Tahbaz
Motion Graphic: Sara Malek
Front-end Development: Sina Aghajani, Zahra Karami, Amirhossein khani
Back-end Development: Sina Aghajani, Sina Parviz
Urban Planning Advisors: Shadi Azizi, Arezoo Khamesi, Ali Aghajani,
learnings:
The biggest challenge of this project was handling the duality between the clients' needs (municipality of Tehran) and the user need (citizens). In fact, we had to create an incentive for the citizens so that they become encouraged to use the app and provide some feedback for the municipality. The struggle was to convince the client to do more than solely running a campaign for asking citizens to participate in the platform and instead propose some value for them. This process went beyond the popular product design practice and explored some business design activities that the product design team decided to embrace even if they were not necessarily professionals in the field.
Another significant learning for me was the fact that the language and choice of words (known professionally as UX writing) are as important as the actual journey. Our choice of words ended up being really disappointing in the initial rounds of usability tests. I was not sure whether it is the features problem, UI, or terminology. Finally, We started to experiment with the choice of words and our interviewees were about 70 percent more successful to complete each user scenario.