This project is a proposed redesign of DIGI-Thane app, developed by the Municipality of Thane to provide a smart city experience to its inhabitants. This application focuses on creating a digital footprint of the city and enabling its locals to access all city related services at their fingertips.
Year
2022
Time
6 Week (Intensive)
Category
UX/UI Design
Type
Personal Project
Industry
Government
Challenge
Smart city is a concept which speaks about digitization of city services and delivering a comfortable experience of the city at their convenience. As the concept is still in its preliminary stages of development, there isn't a benchmark or proposed guidelines to work with for designing a smart city app like DIGI-Thane.
Considering the complexity and subjectivity of the topic, it was challenging to design meaningful digital services for the city. Particularly, I had to be careful about keeping the UX of the app very unbiased (not inclined towards a particular age group and easy for every age group), provide as much functionality as possible for everyday use while keeping the look and interactions very simple and straightforward.
Era of Connected City
A connected city has its infrastructure, government, citizens and services are all interlinked through digital tools. With time, most cities will evolve as a independent, self sufficient entities that will constantly adapt to its citizens and their needs. This adaptation will be an effort of all the stakeholders involved, who will develop the city through an experience delivered as digital services.
Context
Scope of Work
Due to the complexity of the topic, there was a need for heavy UX resolution and easy simplified UI backed by a solid research. The project was executed in 5 steps as shown below.
Identifying the Stakeholders
I decided to list the possible stakeholders that would associated with this app. This helped me analysis the requirements and highlight some essentially insights that will help me design relevant features of the app.
Source: McKinsey Global Institute, Smart City: Digital Solutions for a more Livable Future 2018 & DIGIThane Brochure Pdf
Stakeholders Insights
The research on the stake holders helped me understand the context of the app from a non-end user point of view. Although the end user is one of the stakeholder, it was essential to understand the nature of other stakeholders and their requirements, as it would help me in designing services that enable commercial stakeholders to capitalise from the opportunity.
Existing App Analysis
The existing app is launched in IOS as well as on Android. Below are some of the screenshots of the app screens that clearly show the poor UX and UI which made the app a big failure. In this step, I had to study all the flaws and issues of the existing application and particularly resolve these aspects in my design.
Source: IOS App store & Android Playstore
User Feedbacks
The existing app had number of user feedbacks regarding wide range of issues, such as poor technical functioning, inconsistent UX & UI and voluntary suggestions about improving the relevance of certain features of the app. These feedback served as a crucial resource in gaining essential user insights and requirements.
Source: IOS App store & Android Playstore
User Insights
The feedback from the users on the App store and Google Playstore were very crucial in understanding the sentiments of the users and the difficulties they were facing with the application. I have broadly stated few issues below that served me as a guideline for designing functions in the application.
Impact Analysis Matrix
I derived various app functions from the user insights and decided to create an impact analysis matrix to sort them out. This exercise helped me in prioritizing the features.
Project Goals
After an extensive research, I decided to define the goals for the project so that it helps me in aligning the design of the application to its purpose. This supported me in setting up boundaries for the project.
Resolving UX
After defining the research insights and project goals, I decided to start with brainstorming the UX to sketch out the application workflow. It was essential to get my ideas on paper and sketch out a primary workflow for the application, while brainstorming the workflow, I realized the complexity of the application and faced difficulty in simplying the flow.
Information Architecture
Based on the UX workflow, I went on to create a simplified information architecture that would help me create precise wireframes. The idea was to brainstorm and play around with UX as much as possible and then sort out the flow by creating an information architecture.
Low-Fidelity Wireframing
Having gone through intensive UX and IA session, I decided to save time by creating low fidelity wireframe rather than high fidelity. I wanted to invest my time in UI and had to stick with my timeline. Additionally, the idea in the wireframes was to keep as many common elements and interfaces as possible to keep it easy for users to learn and uniformly interact with every feature screen.
Style Guide
Below is the design system that I defined for the app. The goal was to keep a very simple and easy UI that is appropriate for the users of all the age groups. I decided to use simple colors such as black, white and greys to keep the visual scheme very basic and appealing for all age group users.
Home Screen
This screen represents the Home Screen, it is the first screen that appears to the users after successfully logging in the application. The screen features shopping deals by local shops, featured articles or events and the weather of the city. The idea of this screen was to give an overview of the complete application functions and advertise local deals.
Category of Services
This screen can be accessed from the grid icon placed in the right hand side of the top navigation bar. On clicking the grid icon, the screen appears as a dropdown menu to give quick access to other additional functions.
Local News
These screens represent the Local News feed section of the app which will be presented to user in form of swipable cards. The user can simply swipe the cards to read the news highlights and click on the card or 'View More' to read the news article in detail.
Your IDs at one place
One of the foremost idea of DIGI-Thane was to ambitiously evolve it into a single proof of digital ID for local citizens to access all the local services. This screens shows all user IDs and also features an option to add any external IDs related to city services.
Local Shopfront
The application also has the feature of allowing local businesses to register themselves to get their own shopfront to sell local products in order to compete with ecommerce giants. The idea is have a nominal membership fee as per the revenue range of the shop and the time plan. This feature is very crucial in promoting local sales and boosting the demand for local products and businesses.
Local Real Estate
Every city has a large base of unorganised real estate sector, most of the time the buyer or the seller are trying to connect with potential local clients. This feature allows the users, real estate consultants and builders to advertise their appartments or inventory locally, this helps the buyers to avoid distractions and exactly find an appartment in local neighbourhood.
Local Jobs
This feature is designed for all the local businesses and employers to look for local candidates and to better promote their vacanies. Most local businesses, restaurants, consultancies, etc. have vacanies and often are forced to advertise in the stores or through pamplets. This application gives a platform to candidates to find local job as well as for businesses to recruit local talents.
DIGI-Wallet
The government of India and its local functionaries are promoting and encouraging digital payments tools. Therefore, this being a local government app it was essential to provide a payment mechanism within the app for providing discounts on government bills, local products and services through digital payments.
Local Map
Although not a very crucial feature considering the existence of google maps, the idea of this feature was to give a personalised map of the city with exclusive local events that can be accessed by the users. Additionally, it was also essential to give an overview of all the possible transportation systems in the city and their respective routes.
