Hayat Platform
Location & Date
Tehran, Oct 2022
Role
UI Design, UX Design, Usability Tests, UX research, User Pesonas, Art Direction
Tools
Miro, Figma, Adobe XD
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.
_gif.gif)
Problem State
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
User personas
I conducted several interviews to gain insights into user needs and preferences, which we used to develop user personas. These personas were instrumental in evaluating ideas during the development of the user flow. We frequently role-played these personas to analyze features, journey maps, and other ideas critically.
-
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
We 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.
Try theLow-fidelity Wireframe Above!
Competitor Analysis
We analyzed platforms such as Google Maps, Foursquare, Tripadvisor, and Balad to understand how mobile apps currently support urban experience. Most competitors focus heavily on point-based information (pins) while offering very limited insight about districts, zones, and larger urban areas.
This gap highlighted an opportunity for Hayat:
shifting from geolocation points: to geolocation polygons, providing contextual and area-based understanding of the city.
Instead of replicating features where competitors are already strong, we intentionally avoided overlap and focused on value gaps that are currently missing in the market.
Prototype
(UI design and 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.
Try the Final prototype now!
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.
Usability Testing
Before moving into development, we conducted a round of usability tests to validate our assumptions. After a short intro session, participants were asked to complete several task-based scenarios designed for different user types.
These tests quickly revealed that although the user journey was clear, many users struggled with the highly technical terminology borrowed from our urban-planning team. A series of heuristic interviews helped us refine wording, adjust labels, and clarify content structures.
By simplifying the language and aligning it with users’ mental models, task completion rates improved noticeably, and navigation became significantly more intuitive.
_gif.gif)
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 Ui/Ux 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,
Usability Tests
.png)
Ux Design
I develop cohesive brand identities that align visuals, tone, and strategy—helping businesses stand out and connect with their audience.