dots-01.png
Group 18.png

DIGI-Thane is an existing mobile application developed by the Municipality of Thane designed 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 related services at their fingertips. I developed this project as a proposed redesign of this application.

UI/UX Case Study

Startup screen.png
Cc.png

Era of Connected City

A city is referred to as a connected city when 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 a effort of all the stakeholders involved, and will develop the city experience in form of digital services.

The Context

Scope of Work

Due to the complexity of the project, it required 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

Challenge

The biggest challenge that I had to deal with as a designer of this application was to keep the UX workflow very unbiased (not inclined towards a particular age group), provide as much functionality as possible for everyday use while keeping the look and interactions very simple and straightforward. 

Identifying the Stakeholders

In a digitally connected city, there are multiple stakeholders which contribute in building the platform of a connected city and who use the same platform as an interface to collaborate, coordinate and communicate to build a valuable ecosystem for citizens to sustain comfortably. As shown on the right, you can see all the essential stakeholders highlighted by me, this research was crucial to set boundaries and requirements for the project.

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 to improve the application. 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 the 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 priortising the features for the application.

Group 254.png

Project Goals

After deep research for the app, I decided to clearly define the goals for the project so that it helps me in aligning the design of the application to the purpose. This supported me in maintaining the theme of my project.

Frame 52.png
Frame 52.png

Resolving UX

After defining the research insights and project goals, I decided to start with UX brainstorming 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. This step was essential for me considering the scale of my project and the broad context of the application.

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 wireframe was to keep as many common elements and interfaces as possible to keep it easy for users to learn and maintain the same kind of simple interactions in all the screens.

Wireframes.png

Design System

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 unbiased.

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

Home Screen

This screen represents the Home or User dashboard, 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 promote services.

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 make the application a form of digital identity proof for the local citizens, as well as allow the users to store various other IDs and E-passes in the application for easy access. The app plans to ambitiously evolve into single proof of Identity for the locals to access all the local 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 the 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 boost demand for the local product 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 times the buyer and 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 an government app it was essential to have a payment mechanism for unpriviledged populations as well promote direct benefits for paying of government bills or purchasing local 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.