MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

Shri Vishweshwar Shikshan Prasarak Mandal’s

Vishweshwarayya Abhiyantriki Padvika Mahavidyalaya, Almala

Certificate
This is to certify that, Mr. Vedant Chavan, Mr. Parth Salunke, Mr. Umar Sherikar. And students of our institute from
second year Diploma in computer have successfully completed the micro project report on “Mobile

Application Design” of course “UI/UX Design” as part of curriculum by the Maharashtra State Board of
Technical Education, Mumbai.

For partial fulfillment of “Diploma in Computer Engineering” during the academic year 2024-25

GUIDE Dept.HOD
Ms. Kachare S.M Mr. Kazi A.S.M

PRINCIPAL
Mr. Dharashive P.S.
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION, MUMBAI

Shri Vishweshwar Shikshan Prasarak Mandal’s

Vishweshwarayya Abhiyantriki Padvika Mahavidyalaya,Almala
Micro-Project Report On

Mobile Application Design

Submitted By

Name of Student

1.Mr. Vedant Chavan

2.Mr. Parth Salunke

3.Mr. Umar Sherikar

Under the Guidance of

Ms. Kachare S.M

Department of computer engineering

1
 Index
Sr. Contents Page
No. No.

Annexure I– Micro Project

1-2
Proposal

1.Aims/Benefits of the Micro-

1
Project

2. Course Outcome Addressed 1

1 3.Proposed Methodology 1

4. Action Plan 1

5. Resources Required 2

6. Name of Team Members with

2
Roll No.’s

Annexure II – Micro Project

3-8
Report

1.Rationale 3
2.Aims/Benefits of the Micro-
3
Project

3.Course Outcome Achieved 3

4. Literature Review 3
2
5.Actual Methodology Followed 5-11
6.Actual Resources Used 12

7.Outputs of Micro-Projects 12

8. Skill developed / Learning out of this Micro-

Project 12

9. Applications of this Micro-

13
Project

2
Annexure I

Micro Project Proposal

Mobile Application Design

1. Aims/Benefits of the Micro-Project:

Automate Ticket Booking – Facilitate online and offline ticket reservations, reducing
manual workload.
Improve Customer Experience – Provide an easy-to-use interface for flight booking,
cancellations, and modifications.
Convenience – Passengers can book tickets anytime and from anywhere.
Time-Saving – Eliminates the need for long queues at airline offices or counters

2. Course Outcome Addressed:

CO1 - Explain design thinking concept.

CO2 - Interpret user requirements.
CO3 - Select appropriate visual design for given problem.
CO4 - Create interactions using design tool.
CO5 - Create innovative design prototype for given applications.

3. Proposed Methodology:

In this project, we information about various Airline Reservation System.

3
 4.Action Plan:

Sr. Planned Planned Name of

No. Start date Finish date Responsible
Team
Details of Activity Members

1 Search the topic 18/01/2025 01/02/2025 Vedant

Chavan
2:00pm3:00pm 2:00pm:3:00pm

2 Search the 01/02/2025 15/02/2025 Parth

information Salunke
2:00pm3:00pm 2:00pm3:00pm

3 Algorithm 15/02/2025 22/02/2025 Umar

developing Sherikar
2:00pm3:00pm 2:00pm3:00pm

4 Flowchart 22/02/2025 01/03/2025 Vedant

developing Chavan
2:00pm3:00pm 2:00pm3:00pm

5 Function 01/03/2025 08/03/2025 Parth

making Salunke
2:00pm3:00pm 2:00pm3:00pm

6 Coding 08/03/2025 22/03/2025 Umar

developing Sherikar
2:00pm3:00pm 2:00pm3:00pm

7 Debugging 22/03/2025 29/03/2025 Vedant

Chavan
2:00pm3:00pm 2:00pm3:00pm

8 Finalizing 29/03/2025 05/04/2025 Parth

Project with its Salunke
2:00pm3:00pm 2:00pm3:00pm
report

4
 5. Resources Required:

Sr. Name of resource /

Specification Quantity Remarks
No. material

1 Textbook UI/UX Design 1

2 internet Wikipedia/quora 1

3 PC windows 11 1

4 Browser Chrome 1

Names of Team Members with Roll No.’s:

Sr.
Enrollment No. Name of Team Member Roll No.
No.

1 23511540191 Vedant Chavan 51

2 23511540191 Parth Salunke 54

3 23511540198 Umar Sherikar 58

Kachare S M
Name and Signature of the Teacher

5
 MOBILE APPLICATION REDESIGN

A PROJECT REPORT

Introduction

Mediversal Healthcare serves the tertiary/service sector of our Indian economy. It

specializes in providing quality healthcare service with its Primary Multi Super Specialty
Hospital located within the city of Patna, Bihar and other branch hospitals specializing in
Mother & Child Care, OPD healthcare in Dermatology, ENT, Dentistry, Ophthalmology,
etc.

They currently have their Mobile Application platform which serves an important role for
providing various healthcare facilities to users such as Booking online/offline Doctor
Consultation, Buy medicines, Book health test, Home Care Services for Medical
equipment renting such as Ventilators, ICU Beds, Nursing facility for certain amount of
time, several others. However, in its current iteration, the application grapples with
various usability challenges, hindering its effectiveness and diminishing the user
satisfaction. These challenges encompass issues ranging from complex navigation
structures and cluttered interfaces to accessibility gaps and a lack of personalization.

This thesis project seeks to address these pain points through a comprehensive redesign
effort aimed at revitalizing the application's user experience. By leveraging principles of
human-centred design, usability testing methodologies, and insights from secondary
research, the redesigned application aims to deliver a more intuitive, accessible, and
engaging interface that empowers users to take control of their health journey.

Key objectives of this project include –

1. Identifying User Needs and Pain Points

2. Analysing Current Application Design

3. Developing Redesign Concepts

4. Implementing the Redesign

6
Mobile Application and their significance in Modern Society
Mobile application has become an integral part of modern society, revolutionizing the
way we communicate, work, shop, entertain ourselves, and access information. They play
a central role in modern society, offering convenience, connectivity, empowerment, and
entertainment to users worldwide. They are the catalysts for change, innovation, and
progress in the digital age.

Following are their significance in Modern Society -

• Ubiquitous Access

Mobile applications enable users to access a wide range of services and functionalities
anytime, anywhere, directly from their smartphones or tablets.

• Convenience and Efficiency

Mobile applications streamline various tasks and processes, offering convenience and
efficiency to users such as ordering food, booking travel tickets, managing finances, or
staying connected with friends and family.

• Enhanced Communication

Messaging apps and social media platforms have revolutionized communication, enabling
instantaneous and easy way interactions between individuals and groups across the globe.

• Empowerment and Access to Information

Mobile applications empower users by providing access to a wealth of information and

resources at their fingertips such as educational apps, news aggregators, and other
reference tools.

• Digital Transformation of Industries

Mobile applications have driven the digital transformation of different sector of

industries, from healthcare and finance to retail and entertainment.

7
 • Entertainment and Leisure

Mobile gaming, streaming services, and multimedia apps offer various entertainment
and leisure options that cater to diverse interests and preferences.

• Health and Well-being

Health and fitness apps empower users to take care of their physical and mental wellbeing
by tracking activities, monitoring health metrics, and accessing personalized health
resources.

• Economic Opportunities

Mobile applications have created new economic opportunities for developers,

entrepreneurs, and businesses. The app fuels job creation, innovation, and
entrepreneurship, driving economic growth, contributing to global GDP.

• Social Impact and Empowerment

Mobile applications have the potential to address social issues and empower marginalized
communities. Social impact apps can tackle challenges such as education inequality,
healthcare access, environmental sustainability, and humanitarian aid.

• Cultural and Technological Influence

Mobile applications can shape cultural trends, behaviours, and norms, influencing how
people interact, consume various content, and perceive the world around them. They serve
as a reflection of societal values & aspirations, driving cultural shifts and technological
advancements.

Importance of Mobile Application Design

The importance of mobile application design cannot be ignored in today's digital
landscape, where smartphones and tablets have become integral parts of people's daily
lives. Few points mentioning its importance in today’s life are -

First Impression

8
A well-designed mobile app creates a positive first impression on users. It reflects the
professionalism, credibility, and attention to detail of the brand or company behind it,
influencing the users perceptions and attitudes towards the app.

User Experience (UX)

Mobile application design directly impacts the user experience (UX), which emphasises
how users interact with it. A well-designed app is intuitive, easy to navigate, and
aesthetically pleasing, leading to higher user satisfaction, engagement, and retention.

Usability

Good mobile app design prioritizes usability, making it easy for users to finish tasks and
achieve their goals within the app. Intuitive navigation, clear information hierarchy, and
user-friendly controls contribute to a smooth and efficient user experience.

Brand Identity

Mobile app design plays a crucial role in shaping and reinforcing brand identity. It allows
companies to express their brand personality, values, and visual identity through various
design elements creating a cohesive and memorable brand experience.

Competitive Advantage

In a crowded marketplace, mobile application design can serve as a competitive

differentiator. A visually appealing and user-friendly app can stand out from competitors,
attract more users, and boost higher engagement and conversion rates.

Engagement and Retention

Effective mobile app design encourages user engagement and promotes repetitive usage.
Engaging visuals, interactive elements, and personalized experiences keep users coming
back to the app, increasing retention rates.

Accessibility and Inclusivity

Mobile app design should prioritize accessibility to ensure that the app is usable by
individuals of all abilities. Accessibility features such as screen reader compatibility,
adjustable font sizes, and color contrast options make the app more inclusive.

9
Conversion Optimization

Mobile application design can influence user behaviour and drive conversions.
Thoughtfully designed user interfaces, persuasive calls-to-action, and smooth checkout
processes increase conversion rates and drive revenue for businesses.

Data-Driven Insights

Mobile app design allows for the collection of valuable user data and insights through
analytics and user feedback. Design decisions through data and user research can lead to
continuous improvement and optimization of the app over time.

Customer Satisfaction and Loyalty

Mobile application design contributes to overall customer satisfaction and loyalty. A

welldesigned app that meets users’ needs and fulfil their expectations fosters positive
relationships with customers, leading to long-term loyalty with the brand.

User Experience (UX) in Mobile Application

User Experience (UX) in mobile apps refers to the overall experience that users have when
interacting with a mobile application. It encompasses all aspects of the user's interaction
with the app, including its design, usability, accessibility, performance, and the emotions
it evokes. A positive experience is essential for ensuring user satisfaction, engagement,
and their retention.

Some key components of User experience are -

• Ease of Use
Mobile apps should be intuitive and easy to navigate, allowing its users to finish
their tasks quickly and efficiently. Clear navigation, simple controls, and logical
workflows contribute to a positive user experience.

• Visual Design
The visual design of a mobile app plays a crucial role in making the user
experience better. It includes aspects such as layout, typography, color scheme,

10
 imagery, and branding elements. A visually appealing design enhances usability
and creates a memorable impression.

• Responsiveness
Mobile apps should be responsive and perform well across different devices and
screen sizes. Responsiveness ensures that the app adapts seamlessly to various
screen orientations and resolutions, providing a consistent user experience
regardless of the device used.

• Performance

Users expect mobile apps to be fast and responsive, with minimal loading times
and smooth animations. Performance optimization is essential to prevent delays,
crashes, or other issues that can detract from the user experience.

• Accessibility

Accessibility ensures that mobile apps are usable by people with disabilities,
including those with visual, auditory, motor, or cognitive impairments.

Accessibility features such as screen reader compatibility, alternative text for

images, and adjustable font sizes make apps more inclusive and user-friendly.

• Content Quality

High-quality content is essential for engaging users and providing value. Mobile
apps should deliver relevant, accurate, and up-to-date content that meets users'
needs and expectations.

• Personalization

Personalization enhances the user experience by tailoring content,

recommendations, and interactions to individual user preferences and
behaviours.
Personalized experiences increase user engagement and satisfaction.

• Feedback and Communication

Mobile apps should provide clear feedback to users, indicating the outcome of
their actions and guiding them through the app's interface. Effective

11
 communication, such as error messages, notifications, and prompts, helps users
understand how to interact with the app and resolves any issues they encounter.

Mobile Application Design (UI) Principles

Mobile application design principles guide the development of intuitive, engaging, and
user-friendly interfaces to enhance the overall user experience. Some key principles of
Mobile Application Design are -

• Simplicity
Keeping the interface simple and uncluttered to minimize cognitive load and
streamline user interactions. Avoid overwhelming users with unnecessary features or
information.

• Consistency

Maintaining consistency in design elements, such as colors, typography, icons, and

navigation patterns, to create a cohesive and familiar experience across the app.

• Intuitiveness
Designing the app with intuitive navigation and controls to make it easy for users to
understand and use without the need for extensive instructions or tutorials.

• Feedback
Providing immediate and clear feedback to users when they perform actions, such as
tapping a button or entering information, to confirm that their actions have been
recognized and processed.

• Accessibility
App should be accessible to users with disabilities by incorporating features such as
screen reader compatibility, alternative text for images, and adjustable font sizes.

12
• Visual Hierarchy
Visual hierarchy is needed to prioritize content and guide users' attention to the most
important elements on the screen. Use of different sizes, color, contrast, and spacing
create a clear hierarchy of information.

• Usability
Designing the app with usability in mind, focusing on making tasks easy to
accomplish and minimizing friction in the user journey. Also, conducting usability
testing to identify and address any usability issues.

• Responsive Design
Create a responsive design that adapts to different screen sizes and orientations,
ensuring a consistent user experience across devices.

• Performance
Optimize the app's performance to minimize loading times, reduce latency, and
ensure smooth animations and transitions.

• Personalisation
Providing personalized experiences by tailoring content, recommendations, and
interactions to individual user preferences and behaviours.

• Aesthetics
Paying attention to the visual appeal of the app by using colors, typography, and
imagery that reflect the brand and create a positive emotional response in users.

13
Initial Interface Layout
Initial Interface of the Mediversal Mobile Application was very cluttered with
complex navigation, causing frustration to the users. Use of key features multiple times
at different pages within the app causes distress to the users. It did not stand to the
company’s brand guidelines.

Following are the Initial Interface pain points of the Application -

Cluttered Home Screen

The current home screen is cluttered with numerous buttons, banners, and notifications.
This overwhelms users and makes it difficult for them to find what they need quickly.
Users feel bombarded with too many options, leading to decision paralysis and
frustration.

Complex Navigation

The navigation structure is convoluted, with multiple layers of menus and submenus.
Users often struggle to find the desired feature or information due to the lack of
intuitive organization of the feature.

Inconsistent Design Elements

The design elements, such as colors, fonts, and button styles, vary inconsistently
throughout the app. Most of the button styles followed the traditional sharp boundaries
with dark color tones, contradicting the visual sense of the brand. This inconsistency
leads to a bad user experience.

Confusing Terminology

The app uses medical jargon and terminology that could be difficult for users to
understand. This creates confusion and frustration.

14
Poor Accessibility Features

The app lacks accessibility features such as text-to-speech, high contrast mode, or
adjustable font sizes, making it challenging for users with disabilities to navigate and
use the app effectively.

Repetition

The app does not offer personalized content or recommendations based on the user's
health profile, preferences, or browsing history. This results in a one-size-fits-all
approach that fails to engage users effectively.

Lack of Visual Hierarchy

Important features and actions are not visually emphasized, making it challenging for
users to prioritize their tasks or know where to focus their attention in the app.

15
Initial UI Flow

Menu section of consists of various options for navigating to

profiles, such as Doctor Consultation, Buy Medicine, Book
Health Test, Homecare Services which are repeated in the
menu bar.

All these key features can be removed from here, which are
pre-existing in the home page & instead carry on with My
account section features such as Profile, My Orders, Address,
Prescriptions, Wallets.

Account section of the App consists of various tools for

finding and going through important options for navigation
such as Profiles, My Orders, Address, Prescriptions, Wallet,
logout option.

It can be changed with more user interactive icons & buttons,

while maintaining the brand consistency, to proceed with that
feature.

16
Login Screens consist of entering the OTP received through
the entered mobile no.

The initial sharp boxes depict a traditional sense to the users

and the background gradient color negatively impacts the
front text part due to its darker tone.

Home Page consists of various options for booking Doctor

Consultations, Buy medicines, Book health test, Home care
services, through which customers can easily book their
preferred slots.

Initial Home Page design looks cluttered with repetition of

the key features of the app, which can cause confusion to the
users due to multiple buttons availability.

This section could be changed with more visual clarity &

proper placement of features according to their usability &
importance.

17
Doctor Consultation page consists of their list of doctors &
Consultation through a particular specialty.

It could be changed to a more interactive visual identity

with a highlight that could represent that the users are
particularly going through that page section of the feature,
i.e., Doctor Consultation.

Also, going to back page section could be added which

could redirect them to the Home Page.

Doctor list is opened after going through all the list of

doctors for online/offline consultation. Page displays the
doctor list concerned with various specialties with
description of their qualification mentioned along their
name.

Here, visuals could be enhanced, with proper alignment &

addition of consultation fees.

18
Upload Documents section consists of uploading
prescription to dispense the medicine that are mentioned on
it.

This page could be made more user interactive, with change

of fonts & icons to increase aesthetics.

Doctor Description page consists of all the details of the

doctor that they have achieved in their career, including
their education, achievements, & work experience.

Doctor Description page could be altered more through

addition of more Visual sense, which makes it more
attractive & enhance the readability to the users.

19
Home Care Service page consists of various facilities to book
nursing care to the concerned patient’s home.

The Screen can be enhanced with proper alignment and

adding the color tone that match with the brand identity.

Description section of a particular product screen such as

medical equipment, medicines, nursing, other health
facilities contain the detailed description of the product,
MRP mentioned along with the available offers.

This screen could be enhanced with better visual hierarchy,

intuitive buttons & proportionate distribution of all design
elements to enhance the user experience.

20
User Flows
User flows shows the visual direction in which user proceeds further with different
categories of options available within healthcare application.

Fig. 1 - Splash & Home Screen Flow

21
22
Information Architecture
Information Architecture defines how content will be structured and presented to a user
when they are interacting with the design.

Fig. 3 – Upload Documents/Account Flow

23
24
1. Prerequisites

 Install Flutter & Dart (if not installed, follow Flutter Installation Guide)

 Install Android Studio or VS Code with Flutter plugins

 Run flutter create my_app in the terminal

2 Code for Redesigned Ul (Home Screen)

Code:
import 'package:flutter/material.dart';

void main() {
runApp(MyRedesignedApp());
}

class MyRedesignedApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Roboto',
),
home: HomeScreen(),
);
}

25
}

class HomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Redesigned App"),
centerTitle: true,
backgroundColor: Colors.blueAccent,
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Welcome to the Redesigned App!",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
textAlign: TextAlign.center,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),

26
 );
},
child: Text("Get Started"),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
textStyle: TextStyle(fontSize: 18),
backgroundColor: Colors.blueAccent,
),
),
],
),
),
),
);
}
}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("New Page")),
body: Center(
child: Text(
"This is the next screen!",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
);
}
}

27
3.Output (UI Design Preview)

Here's what the redesigned app will look like:

Home Screen (Before Button Press)

Modern UI with improved text styling

Better spacing and alignment

Material Design button for smooth

navigation

Output:

 "Welcome to the Redesigned App!" message in the center

 "Get Started" button in blue

28
Conclusion
It was a wonderful learning experience for me while working on this research project.
Redesign of the healthcare company's mobile application marks a significant commitment
to enhancing user experience and delivering accessible, innovative healthcare solutions.
Through a comprehensive and iterative redesign process, I have addressed usability
challenges, improved accessibility, and elevated the overall user experience to better serve
its users.

The redesign process began with initial user research, allowing me to gain deep insights
into user needs, preferences, and pain points. By analysing user feedback, conducting
usability testing, and evaluating the current application design, I identified areas for
improvement and set clear objectives for the redesign.

29