view

zenncity app

ZenCity is a citizen engagement platform that provides real-time insights and analytics to local governments.

My role
Research, UX/UI, Usability testing
Type
iOS and Androind App
Tools
Figma, Miro
Tmeline
2021-2022

๐Ÿ’ผ

Overview

I recently had the opportunity to work on redesigning the ZenCity mobile app, which is aimed at helping local governments better communicate with their residents. It was especially important during the COVID-19 pandemic when many people turned to social media for communication.

๐Ÿ”ฅ

Problem

ZenCity recently underwent a redesign of their mobile app in order to improve user experience and accessibility. The design team faced several challenges, including resource constraints and a tight deadline, necessitating careful planning and prioritization.

๐ŸŽฏ

Goals

One of the main goals of the redesign was to enhance user engagement and expand market reach, while also introducing new features and improving data collection.

๐Ÿ’ก

Solution

To achieve these goals, the team developed a new mobile application that offered convenient access to essential information and insights on-the-go. The app was designed with the new ZenCity platform language in mind, and prioritized the target audience by focusing on iOS development.

Reaserch

Persona Analysis

As a product designer, I had the opportunity to join an ongoing project during the mid-stage. The project manager had already done some groundwork and provided me with a set of personas. My initial task was to analyze these personas carefully. I spent a considerable amount of time understanding their objectives, challenges, behaviors, and motivations. This helped me gain better insights into the target audience and their expectations.

Pain points in current app

Based on this, I conducted additional research and analyzed user pain points in the old app

๐Ÿ”บ Users were limited in their ability to view and analyze city data on the old app.

๐Ÿ”บ The App had an outdated design that was not aligned with the new design used in the ZenCity platform.
โ€
๐Ÿ”บ The user interface of the current app was confusing and lacked intuitive navigation.
โ€
๐Ÿ”บ The App was slow to load and frequently experienced lag or crashes, leading to frustration for users trying to access important information quickly.

Competitive Analysis

In addition to analyzing the personas, my team and I also researched the competition. We studied other apps in the market and evaluated their features and user experience. This exercise helped us identify the strengths and weaknesses of other apps and allowed us to gain valuable insights into the expectations of users. This, in turn, enabled us to identify unique opportunities for our product to stand out and provide added value to our users.

+ Modern design, easy to use
+ Intuitive, easy-to-find information
+ Customizable dashboard with relevant information
+ Comprehensive filtering options
+ Customizable sorting options
+ Fast loading times
+ Quick response to user actions

+ Simple design, limited customization
- Limited navigation options, some features hidden
- Limited information, not customizable
- Limited filtering options
- Limited sorting options
+ Fast loading times
- Some lag, but overall responsive

- Colorful design, confusing navigation
- Confusing, difficult-to-find information
- Limited information, some important data missing
- Limited filtering options
- Limited sorting options
- Slow loading times
- Slow response to user actions

Develop

User Flow and Design

As I began working on the app, I wanted to make sure that it would be intuitive and easy for our users. After conducting thorough research and analyzing personas, I created the initial sketches and developed the app's user flow. This helped the development team to prioritize tasks and estimate timelines and costs accurately. The next step was to create the design for the main screens, ensuring that the app's design was consistent with ZenCity brand. I used a cohesive color scheme and typography to create a clean, modern aesthetic that would appeal to our users.

First Interactive Prototype

Our team had a great chance to share our latest design concepts and vision for the ZenCity app with both current and potential clients. We showcased our work at the ICMA conference, where participants were able to interact with an interactive prototype that I created using Figma. The prototype represented the app's design and functionality, allowing users to navigate through its main pages and features. To enhance the user experience, I incorporated animations and transitions. We received valuable feedback from stakeholders, and the prototype was well-received at the conference.

Final Design

Shifting Focus to City Managers

After receiving feedback from the ICMA, we held a retreat to review it. As a result, we decided to refocus the Zencity app towards city managers, as they are the primary decision-makers and have the power to implement changes. We made some changes to the app's user flow, design, and functionality to better cater to this target audience. We incorporated features that are most important to city managers, such as advanced reporting capabilities and tools for tracking citizen engagement levels and sentiment. To address the User-Focused Approach opportunity, I worked with the product manager and development team to make changes to the app's user flow and design. We wanted to ensure that the app was easy to use and navigate, so we made sure to incorporate user feedback into every step of the development process.

Final Design

New Approach

To address the User-Focused Approach opportunity, I worked with the product manager and development team to make changes to the app's user flow and design. We wanted to ensure that the app was easy to use and navigate, so we made sure to incorporate user feedback into every step of the development process.

Revamped Home Page

During the process of redesigning the main page of our application, we made efforts to incorporate the best features from the desktop version. After conducting several interviews with our users and analyzing data from the desktop version, we decided to focus on displaying the most important statistics and data, along with tools that facilitate data analysis and prompt action. As part of this redesign, we introduced a new section for insights, which enables city managers to receive alerts about issues or events in their city, providing them with the ability to take prompt action.

Simplified Navigation

To enhance efficiency, we restructured the app's navigation using the bottom bar and additional menu. This intuitive navigation is informed by in-depth research into the specific needs of city managers. ย This feature-rich menu gives city managers easy access to key functionalities such as Activity, Projects, Insights, and more, allowing them to take swift actions like Requesting a new project.

Real-Time Empowerment

As a big part of improving the user experience with the app for city managers, we added the Push notifications feature that provides instant notifications on critical issues or events. This real-time awareness empowers city managers to respond promptly and make impactful decisions. With these innovations, Zencity's app offers an agile, streamlined, and proactive solution for city managers, enhancing their ability to lead effectively

New onboarding

We have introduced login and a new onboarding process in our app as a part of the redesign. Our new onboarding process has three simple steps that allow us to collect more information about our clients' preferences and requirements. This information helps us to create a more personalized and satisfactory user experience.

last touch

As part of the redesign, we also created a new onboarding process in the app. This new process allowed us to gather more information about our clients' preferences and needs, helping us create a more personalized user experience.

Final preparation

I have finalized the design for the Zencity app on both iOS and Android platforms after several rounds of design iterations and user testing feedback. The new design is specifically tailored to meet the needs of city managers, with a user-friendly interface that emphasizes the most important features and data.

Enable Dark Mode

Enable Dark ModeI have created a dark mode for the app to improve the user experience. This feature can be accessed through the Settings menu. To achieve a better look for the dark theme, I conducted extensive research on the best practices. It provides a comfortable viewing experience for users who prefer a darker color scheme, and it also reduces eye strain in low-light environments.

Light mode

Disigne system components

Moreover, I have created a part of design system with reusable components that ensures consistency throughout the app and enables quick changes and updates as needed. The design system includes components such as buttons, forms, and typography, and is easily accessible to the development team.

Conclusion

Our project took 6 months to design and 8 months to build. We put in a lot of effort to create an excellent product by taking feedback from our community, conducting user testing, and using design systems thinking. This not only helped us develop a strong product but also laid the groundwork for our design and development teams to create future products. Thanks to our careful approach, we were able to release the product with minimal bugs. We appreciate the feedback from over 650 Zencity users who shared their valuable insights on how they use our product in their daily lives. I want to thank all team members for their contributions to the successful launch.

go to prototype