dots-01.png
Group 18.png

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. 

Cc.png

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.

Frame 54.png

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

Frame 55.png

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.

Frame 51.png

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

Frame 56.png
Frame 50.png

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.

Frame 53.png

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.

Group 254.png

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.

Frame 52.png
Frame 52.png

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.

IMG_6578 1.png

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.

Frame 46.png

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.

Wireframes.png

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.

Frame 48.png
iPhone 13 Mockup-2.png
Group 261.png

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.

Flying iPhone 12 Mockup Left View new.png
Frame 26.png

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.

Group 3.png

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.

iPhone 12 Pro 6.1_ Mockup.png
iPhone 12 Pro 6.1_ Mockup Right View.png
iPhone 13 Mockup-3.png
iPhone 13 Mockup-4.png
iPhone 13 Mockup23.png

Your IDs at one place

Frame 25.png

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.

Group 195.png

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.

iPhone 13 Mockup-5.png
iPhone 13 Mockup-8.png
iPhone 13 Mockup-6.png
iPhone 13 Mockup-7.png
Group 195.png

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.

Group 195.png

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.

iPhone 13 Mockup-9.png
iPhone 13 Mockup-1.png
Group 249.png

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.

Frame 4.png

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.

Flying iPhone 12 Mockup Left View-1.png
iPhone 13 Mockup.png

Try the App Prototype

Please scan the QR code on the right on the screen or click the button below to access the Figma prototype.