Professional Documents
Culture Documents
PROJECT REPORT
Submitted by
NIKHILESH PP (201ME162)
ADHITYA R (201ME102)
AJAY N (201ME103)
BACHELOR OF ENGINEERING
in
MECHANICAL ENGINEERING
APRIL 2024
BAKERY APP DESIGN (UX/UI RESEARCH)
PROJECT REPORT
Submitted by
NIKHILESH PP (201ME162)
ADHITYA R (201ME102)
AJAY N (201ME103)
BACHELOR OF ENGINEERING
in
MECHANICAL ENGINEERING
APRIL 2024
BONAFIDE CERTIFICATE
Certified that this project report “Bakery App Design (UX/UI Research)”
We affirm that the project work titled “Bakery App Design (UX/UI
Research)” being submitted in partial fulfilment for the award of the degree
of Bachelor of Engineering in Mechanical Engineering is the record of
original work done by us under the guidance of Mr. Santhosh Kumar S,
Assistant Professor Level III, Department of Automobile Engineering. It has
not formed a part of any other project work(s) submitted for the award of any
degree or diploma, either in this or any other University.
We would like to thank our friends, faculty and non-teaching staff who
have directly and indirectly contributed to the success of this project.
NIKHILESH PP (201ME162)
ADHITYA R (201ME102)
AJAY N (201ME103)
I
ABSTRACT
Our purpose is to create the best and efficient user interface for a vehicle
selling application through our study and research in UI - User interface, UX -
User experience. One of the main features in this application is to be used by
various people without any age restriction varying from age 20-70 approximately.
II
Through the research, several key findings were identified, including the
importance of clear and comprehensive vehicle information, intuitive search and
filtering options, user-friendly navigation, and a seamless communication system
between buyers and sellers.
The UI/UX research conducted for the mobile application for vehicle
selling app serves as a foundation for creating an optimized platform. The
application meets user expectations, maximizes user satisfaction, and facilitates
successful vehicle transactions in an efficient and user-friendly manner.
III
TABLE OF CONTENTS
CHAPTER TITLE PAGE
NO NO
ABSTRACT II
LIST OF FIGURES VI
1. INTRODUCTION 1
1.2 MOTIVATION 2
1.2.1 IMPROVEMENT OF USER EXPERIENCE 2
2. LITERATURE SURVEY 5
3. OBJECTIVES
3.1 PROBLEM IDENTIFICATION AND OBJECTIVE 10
3.4 METHODOLOGY 14
IV
3.4.6 INFORMATION ARCHITECTURE 20
3.4.7 WIREFRAMES 21
5.1 RESULTS 30
6 6.1 CONCLUSION 37
REFERENCES 38
APPENDICES 40
V
LIST OF FIGURES
VI
CHAPTER - I
INTRODUCTION
The goal of the mobile app for a bakery app is to develop a simple and
approachable platform that connects customers with bakery products. The objective
is to make the purchase and selling of vehicles more convenient and effective for
all parties. To create an app that offers the best user experience possible for
consumers, UX/UI research looks deeply into the needs, preferences, and pain
areas of users.
1
• Interviews are to better understand the needs and challenges of potential
customers, one-on-one interviews with them are conducted.
• Analyzing rival applications for the sale of pastry to determine advantages and
disadvantages.
1.2 Motivation:
1.2.1 The improvement of user experience:
In recent years, the advent of mobile applications has revolutionized various
industries, including the food industry. Bakery food ordering apps, designed with
a focus on user experience (UX) and user interface (UI) principles, have emerged
as a popular choice for both consumers and businesses. These apps offer
numerous benefits and advantages, making them a valuable tool for bakeries
looking to enhance their customer experience and streamline their operations.
2
In order to ensure happiness, trust, and a higher possibility of successful
transactions for all parties involved, it is essential to improve the user experience.
Bakery food ordering apps enable bakeries to engage with their customers
more effectively. Through push notifications and personalized offers, bakeries can
keep customers informed about new products, promotions, and discounts,
increasing customer engagement and loyalty. The app's UI can be designed to
showcase the bakery's brand identity, creating a memorable and immersive
experience for customers. This branding helps to strengthen the bakery's
relationship with its customers and differentiate it from competitors.
By using a bakery food ordering app, customers can ensure the accuracy of
their orders. The app allows customers to review their orders before finalizing
them, reducing the likelihood of errors. For bakeries, the app streamlines the order
management process, reducing the time and resources required to process orders
manually. This efficiency not only improves the bakery's operations but also
enhances the overall customer experience by ensuring timely delivery of orders.
3
1.2.5 Data-driven Insights and Analytics:
Bakery food ordering apps collect valuable data about customer preferences,
order history, and behavior. This data can be used to gain insights into customer
preferences, identify trends, and tailor offerings to meet customer needs. By
analyzing this data, bakeries can make informed decisions about product
offerings, pricing, and marketing strategies, leading to increased sales and
profitability.
4
CHAPTER – II
LITERATURE SURVEY
5
2.2 User Interface Design & Evaluation of Mobile Applications
6
The study utilizes the Task- centered User Interface design method, which
involves four phases: user identification, requirements, design solution, and
walkthrough evaluations.
The evaluation is conducted in natural settings with users, using the use
questionnaire to measure usability aspects. The results show high levels of
satisfaction, with usability aspects for usefulness, ease of use, ease of learning and
for Satisfaction. The study highlights the importance of user interface and user
experience for non-profit organizations and emphasizes the need for better UI/UX
design in this context.
7
Despite the acknowledged importance of User Experience (UX) in software
development, companies frequently struggle to embrace UX approaches due to a
lack of funding. The purpose of the study is to examine the connection between
UX in startups and software development techniques. It conducts a review of the
literature and a thematic analysis to find possibilities and problems for UX in
software startups. According to the findings, startups need UX strategies that
reflect their dynamic nature. Along with bridging the gap between UX and
software startup literature, the report also poses open research issues.
8
Hence, the good nature of UX is that it is contextual and subjective. The
purpose of this study is to determine how much influence the User Interface and
User Experience have on the sale of the application by observing the editor's note
two applications and compare it objectively. This research used a descriptive
method.
From the analysis of the data, it was found out that EnerTrApp mobile web
application user interface is effective as all tasks were completed by all
participants. It is efficient based on the time-base efficiency measure and overall
relative efficiency. Statistical data shows that testers as satisfied with the user
mobile web app user interface. Based on the results consumers and will likely use
and recommend the mobile web application as a tool to help reduce energy
consumption in their household.
The paper discusses the development of a mobile web application called
EnerTrApp, designed to help consumers monitor their home appliance's energy
consumption. The study aimed to evaluate the usability of the application's user
interface through usability testing and assess its efficiency, effectiveness, and user
satisfaction. The goal was to determine if the application would be effective in
reducing energy consumption in households. The research focused on addressing
the problem of high energy consumption in the Philippines and aimed to provide
a solution through the EnerTrApp mobile web application.
9
CHAPTER - III
OBJECTIVES
10
3.1.2 Enhancing User Experience using User research Process:
The organization success can be determined mainly with the customer
satisfaction in every point and here in this sector it can be achieved by conducting
the user research and several process. In that we can able to identify the need of
the customer in every aspect. The filters for Veg and Non-Veg, Price range and
Home kitchen all were given to enhance the smooth experience. The UX of selling
pastry items now routinely integrates with outside services. The platform can
easily add tools that help customers make informed selections, such as previous
orders and it’s data. The platform's enhanced communication features have also
made it easier to negotiate and complete transactions. Owners may simply get in
touch with consumers with inquiries or offers, and consumers can anticipate
responses quickly. Systems for secure messaging and notifications keep all parties
updated and involved during the process.
11
may make the app's navigation simpler. To assist users in finding the bakery items
they want fast, provide robust search facilities with filters and sorting choices,
including location-based search.
The Flow diagram for the work to be carried out in the development of the
project,
12
3.2.1 User Experience:
We included all facets of user engagement, such as feelings, perceptions,
and reactions. An efficient job completion rate, a smooth and intuitive user
interface, and a feeling of satisfaction and joy are the hallmarks of a good UX.
User research, user interface (UI) design, usability testing, and ongoing
improvement are essential elements of a good UX. To effectively develop
solutions that address user demands, UX designers strive to understand user needs,
behaviors, and pain spots. They concentrate on creating user-friendly, aesthetically
pleasing, and simple to use interfaces. User-centered design is given priority in a
successful UX, ensuring that the product or service is in line with user expectations
and goals. In the end, a strong UX results in greater user pleasure, customer loyalty,
and the accomplishment of corporate objectives.
The Sketching Tools are early idea generation and short concept sketches,
tools like pen and paper or digital sketching programs like Sketch or Adobe XD
are frequently utilized. The Tools for wireframing are Software for wireframing,
the look and feel of an app. Prototyping Tools where we constructed interactive
prototypes to evaluate user flows and interactions using prototyping tools such as
Figma.
13
We have tools for User Testing and the Websites like Usability Hub and user
testing make it easier to conduct remote user testing and get user feedback for our
application. The tools which have been used for the UI process consists of the UI
Design Software, Icon Design Tools, Collaboration and Prototyping Tools,
Animation tools and Color, Typography Tools and then the UI component libraries
and with the Version control Tools were used in the industry.
Here the High-fidelity UI designs are made with the aid of graphic design
software, such as Adobe XD, Sketch, Figma, Adobe Photoshop, and Adobe
Illustrator. The Icon Design Tools are to create unique icons or to access icon
collections, specialized tools like Adobe Illustrator are employed. The
Collaboration Tools are Real-time collaboration between designers and team
members and stakeholders is made possible through collaboration platforms like
Figma and Sketch Cloud. Prototyping and animation functions are also available
in some UI design tools for the creation of dynamic UI elements and transitions.
The Tools for choosing and managing color palettes and typography such as
Google Fonts and Adobe Fonts. The UI Component Libraries are for quicker
development, pre-designed UI components and patterns are made available by
libraries like wire frame kit in Figma.
3.4 METHODOLOGY:
In our application we took several brands for the analysis and derived the
solutions with certain factors and in that the advantages and dis-advantages of the
competitor were analyzed.
14
Businesses can obtain a competitive edge by understanding their competitive
environment, spotting chances for difference, and making wise decisions. It is
essential for product creation, market positioning, and overall business strategy.
The process where the user experience will begin from finding competitors and
we can start this process by locating both direct and indirect market rivals. While
direct rivals provide comparable goods or services, indirect rivals could utilize
alternative strategies to meet the same customer needs.
On implementing it we can have the benefits and the rise in the organization’s
business. The User-Centered Design is what rivals are doing well or poorly
enables designers to rank user preferences and demands. The Inspiration in
examining the designs of rival products can spark original concepts and
inventive solutions for your own creation. On finding best practices in the
research for the business or market that you may implement into your UX design.
15
The Competitive Advantage always look for ways to set your product apart
from that of competitors by addressing their weaknesses. The Risk Reduction on
Avoiding potential dangers by studying the errors and user complaints of your
rivals. On Validation process we can benchmark your design choices against those
of successful rivals to ensure their validity. It will Gain understanding of how your
product stacks up in terms of user experience to assist you better define your
market positioning.
The User personas we implemented have the following major functions like
Humanizing people means personas which will give your target audience a face,
which helps design teams relate to and comprehend people on a more intimate
level. The next thing was the Focus and Alignment they ensure that team members
have a common understanding and are working to address the needs of the same
user groups.
In this process we collected the details with the data and this plays a major
role in determining each process and with this we can able to make many things
in the development of the application.
16
3.4.3 Empathy Map:
In our User Experience (UX) design process, an empathy map which we
derived is a useful tool for developing a deeper knowledge of the feelings,
thoughts, and actions of the target audience. Usually, it takes the form of four
things, namely “Says, Thinks, Does, and Feels.” The “Says” focuses on the user's
spoken expressions of requirements, ambitions, and so forth.
17
3.4.4 User journey Map:
To visually portray a user's interactions and experiences with a product or
service across numerous touchpoints, our user journey map is an essential tool in
our User Experience design process. It offers a thorough account of the user's
experience, highlighting their behaviors, feelings, and problem areas as they
interacted.
Our user journey map includes, the stages of the user's user journey, are
awareness, research, purchase, and post-purchase, are represented by these forms.
The Touchpoints are the times or platforms when a user interacts with a
product or service, like a website, an app, or customer care. The User Actions
describes the duties, objectives, and decisions that the user makes at each
touchpoint. Finally, the user emotions are the documents of user's attitudes,
feelings, and perceptions at each stage. There are some positive cases on using the
user journey maps are User journey maps make ensuring that the design process
centers on the user's point of view, producing more user-centric solutions.
The Journey map phase in our application are the Login and snack page and
connect and schedule process and also logout page where assessed the points of
the customer thoughtsand what does the customer do and their feelings and the
needed ideas for the improvement of the application.
18
3.4.5 User Flow:
Our user flow is the one which depicts the path a person takes while
navigating through a digital product or service, is an essential part of the User
Experience (UX) design process. It gives a step-by-step breakdown of how a user
interacts with a system, outlining their options, actions, and answers from the
system.
There are several things which we will need to be known while using the
user flow and they are the Representation, Navigation, Decision Points,
Validation and Optimization. The User flows are often Represented as diagrams
or flowcharts, where each action or interaction is related to the one before it
visually, forming a logical flow. From the user's entry point (such as a landing
page) to their end point (such as ordering snack), they lay out the user's path using
Navigation. The User flows Decision points, such as when users click links,
buttons, or enter information, and display the several directions they can go in the
app.
In our application user flow is carried out from the user personas from that
we can depict the imaginary data and the flow of the user as per the application
needs. Here it starts from the login page and then it moves to the homepage after
the successful login. In this we can able to predict the flow of the common user
throughout the application and then it flows to the other features as per the choice
of the user. The others features and details of the user flow were shown in the
Fig.10.
19
3.4.6 Information Architecture:
A key component of our User Experience (UX) process, Information
architecture (IA) focuses on how information is organized and structured within a
digital product or website to improve user understanding and navigation. It
contains of several divisions namely Content Organization, Navigation Design,
Search Functionality and Hierarchies and then User Centered Design, Scalability.
To make information easily available and logically organized, we categorized,
sorted, and labeled using a system called content organization.
Navigation Design is the one where we choose the menus, links, and
navigational pathways that lead users through the features and information,
making it simple and effective. In our app the simplicity plays a major role.
In our application the IA implemented with the welcome and login page and
then the flow moves to the landing page after the completion of login and security
process. In the home page we can able to see main features and from that we can
access anywhere in the application as per the user needs. Each of the menus and
the options has the separate functionalities and that are clearly shown in Fig 10.
20
3.4.7 Wireframes:
Our Wireframes are the Visual blueprints which gives the Structure and
Layout of the application which helps the Designers and the organization an idea
about it while building the application. There are several facilities where the
wireframes are made with the changes like Structural Framework and Functional
Planning, Iterative Design, Communication Tool and then User- centered design.
Wireframes provide a structural framework for a digital product by indicating
where important components such as buttons, text, graphics, and navigation menus
should be placed.
The Functionality Planning are concentrated on usability and user flow issues
by focusing on functionality and layout rather than aesthetics. The Iterative Design
in Wireframes make quick revisions and iterations possible, enabling designers to
test ideas and improve user interfaces without spending money on high-fidelity
images.
21
Our low-fidelity design are the ones with simplistic, rudimentary depictions
of the app's interactions and user interface. They are mainly employed for concept
development and preliminary idea research.
Our High-Fidelity Prototype are the app's UI is more perfected and detailed
in high-fidelity designs. They are utilized for testing, development, and
stakeholder presentations because they closely resemble the final product. The
Specific colors, fonts, graphics, and interactive features are all part of hi-fidelity
designs.
The visual identity and user interactions of our app are realistically
portrayed by us. The Hi-fidelity designs assist stakeholders and developers in
visualizing the finished product, ensuring design of our app and conducting user
testing to obtain accurate feedback.
We frequently begin the UI design process for mobile apps with low-
fidelity sketches or wireframes to explore concepts before eventually moving to
high-fidelity designs as the project develops. The flexibility, early user testing,
and easier transfer from concept to development are all made possible by this
iterative methodology.
22
3.4.9 User Testing:
We tested the final and foremost process of our application and making
it into the market and it is an essential phase in the UX/UI design process that
assesses the usability and overall user experience of a digital product by
incorporating actual users in the evaluation. The Purpose of this process is to gain
direct feedback from the target market about how well our mobile app works and
how our targeted users liked it.
It can able to Find flaws and discover any flaws with the app’s usability,
navigation, or other aspects of the user experience. It can verify if our design
complies with user expectations and needs by validating design assumptions. On
gathering Information, we can learn more about the preferences, behaviors, and
pain points of our targeted users as they related to the app we made.
23
Actions, remarks, and suggestions made by participants are noted. Analyze the
data gathered during testing to find recurring problems, usability problems, and
areas of success. The Iterative Design make changes to the design based on the
findings. This can entail alterations to the design, navigation, content, or
functionality.
The Advantages of user testing will be using user comments and preferences
to inform design decisions is known as user-centered design. The Issue
Identification in the Early design phase, difficulties with usability and possible
barriers are discovered. The Improved User Satisfaction, Engagement, and
Retention and Enhanced usability and the Cost savings on preventing issues from
arising during product development and support will save money.
24
CHAPTER-IV
INTRODUCTION:
The primary goal of our suggested work module is to undertake in-depth
UI/UX research for a mobile application created for ordering bakery items.
Mobile applications are essential in today's digital age for simplifying the process
of ordering food. To draw in and keep people, an interface must be both user-
friendly and aesthetically pleasing. To assist in the design and creation of a
successful and user- centric mobile app for bakery item sales, this module will
examine consumer demands, preferences, and pain areas. The modules are into
several components and they follow.
25
This not only makes listings clearer and more detailed, but it also stimulates
consumer confidence. Our module has robust filter and search features that let
customers narrow their search results based on factors like price range, location,
and more to improve user experience and also it turns into the application's core
by providing a user-friendly platform for both consumers and bakery owners,
delivering a smooth and effective bakery food ordering experience.
26
4.5 INFORMATION ARCHITECTURE:
To make it simple for users to explore and discover what they need, our
information architecture involves structuring the app's content and structure. The
relationships and hierarchy between the app's various sections are described. It
focuses on creating a logical and user-friendly structure for the app's content and
interface. During this procedure, our app's navigation hierarchy, content
categorization, and information access methods are all defined. Users can quickly
access and interact with bakery and item listings, pricing information, contact
details, and other crucial content thanks to a well- planned information
architecture.
27
Positive feedback can assist establish a user's reputation and inspire trust in
potential consumers or individual owners or bakery. On the other hand, it also
serves as a precaution because users can make wise choices based on the opinions
of others, encouragingethical and secure transactions. This module is essential for
trust and accountability within the app, which improves user safety and
dependability.
28
The program is improved repeatedly until it has a high level of usefulness
and user satisfaction. These stands for important stages and actions in the UI/UX
research process for creating a mobile application for ordering bakery items.
Every stage contributes to the creation of software that is user-friendly,
aesthetically beautiful, and simple to access while meeting the needs and
expectations of its intended users. If these specific activities are incorporated into
the UI/UX research module, designing a mobile application for ordering snack
and promoting the business of the shops will be done completely and with the user
in mind. This meticulous method aims to create an app that meets user needs while
also standing out in a crowded market and providing a superior user experience.
29
CHAPTER-V
5.1 RESULTS AND DISCUSSION :
Thus, the qualitative and quantitative analysis of data from our UX research
which includes competitor analysis, user personas, empathy map, journey map
provided the significant way to derive the low fidelity prototype shown in fig 2
and from the low fidelity prototype it will be helpful to design the final high
fidelity prototype where the main screens are home page shown in fig 6, connect
page shown in fig 7, schedule page shown in fig 8 and profile page and end screen
shown in fig 9.
The below low fidelity prototype shown in the Fig 2 has the free hand sketch
of the screens. In that it starts from the welcome screen of the application where
it moves to the login page and then it has several screens for the login page to
build. It has the voice note icon to know the location of the delivery person and
so the account icon to know the details of the users. It also has the
recommendation system in the below and then it moves to the connect where we
can able to connect with the kitchens directly and schedule page to put the snack
for the several dates.
30
Fig 2. The Low FidelityPrototype
31
Fig 3. Welcome Screen Fig 4. Sign-In Screen
32
Fig 6. Home Screen
In the home page we can able to get our snack and then the filter and search
bar provides the items to get quickly and in below the recommendation is given
based on the previous orders of the consumers. The voice activation icon is given
to know the distance of their ordered items and it helps the aged citizens to know
the arrival time of their orders. The account icon is given in the top where we can
able to know the user details and then the settings and many other options. In the
home screen where the most of the options were placed for the smooth user
experience of the application.
33
Fig 7. Connect Screen
34
The connect screen shown in fig 7 is the page of the app where we can able
to connect the cloud-kitchen based snack and also the individual shops for the
ordering purposes and also they can able to register their shops with the required
details in it and after all the verification the shop is listed to sell their products to
the customers. In that it navigates to the sequence of easy process to list their foods
and other things.
35
Fig 8. The Schedule Screens
The schedule screen shown in fig 8 where we can able to schedule our snacks
for needed dates and if we want to schedule, we need to enter the required details
in that to proceed further and then we can choose the payment method in it and then
we can able to cancel the scheduled snack in the option given below. This screen
will make an impact on the working professional to manage their time and many
things. After this process if we need to logout, it navigates and shows the options
for the end process which is shown in the fig 9 and in that the profile and the logout
screen has been shown.
36
Fig 9. Profile &Logout Screens
37
5.3 COST BENEFIT ANALYSIS:
Increased User Engagement will happen due to the enhanced UX/UI can
lead to higher user engagement, more time spent on the app, and increased user
retention. The user-friendly app can improve their reputation of the bakery and
home-kitchen makers and trustworthiness, resulting in attracting more users.
38
CHAPTER-VI
6.1 CONCLUSION :
In this project, throughout the entire process of UX/UI the Interface for the
Mobile Application has been built successfully. This app’s interface is not only
built for ordering the bakery items but also to give a wonderful experience while
using the Application. The creation of a mobile app for ordering a bakery items
and business with a heavy emphasis on user experience (UX) and user interface
(UI) design is more than just developing a website where snack can be bought and
sold by the owners. It is about meeting consumers’ requirements and expectations
while creating a seamless and engaging experience for them. A well-designed
software will increase userpleasure, foster trust, and ultimately help the platform
succeed. This will establisha new benchmark for excellence in the food sector,
becoming the go-to platform for people looking to order the snack and food items
in online.
39
REFERENCES
41
APPENDICES
1. WORK CONTRIBUTION
• User Testing
• Low-Fidelity prototype
• High-Fidelity prototype
42
INFORMATION ARCHITECTURE FLOW
43
USER FLOW
44
CONFERENCE ACCEPTANCE
PUBLICATION PROOF
45