UNIVERSITY COLLEGE OF ENGINEERING

KANCHEEPURAM
(A Constituent college of Anna University Chennai)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CCS370 – UI AND UX DESIGN

NAME : ________________________________

REGISTER NO : ________________________________

YEAR/SEMESTER : ________________________________

BRANCH : ________________________________
 UNIVERSITY COLLEGE OF ENGINEERING KANCHEEPURAM

KANCHEEPURAM-631 552

BONAFIDE CERTIFICATE

REGISTER NO:

Certified that this is the bonafide record of work done by

Mr/Ms………………………………………………….. of V Semester B.E. COMPUTER SCIENCE
AND ENGINEERING Branch / Batch during the academic year 2023 to 2024 in the
CCS370 – UI AND UX DESIGN

Staff In-Charge Head of the Department

Submitted for the University Practical examination held on ………………………

Internal Examiner External Examiner

 INDEX

PAGE
EX.NO DATE NAME OF THE PROGRAM SIGN
NO

1 DESIGNING A RESPONSIVE LAYOUT FOR 1

INSTAGRAM

2 EXPLORING VARIOUS UI INTERACTION 3

PATTERNS

3 DEVELOPING AN INTERFACE WITH PROPER UI 6

STYLE GUIDES

4 DEVELOPING WIREFLOW DIAGRAM FOR 11

APPLICATION USING OPEN SOURCE
SOFTWARE

5 EXPLORING VARIOUS OPEN SOURCE 18

COLLABRATIVE INTERFACE PLATFORM

6 HANDS ON DESIGN THINKING PROCESS FOR 24

BASEGRO APP

7 BRAINSTORMING FEATURE FOR BASEGRO APP 28

8 DEFINING THE LOOK AND FEEL OF THE 31

BASEGRO APP

9 CREATE A SAMPLE PATTERN LIBRARY FOR 34

BASEGRO (MOOD BOARD,FONTS,COLORS
BASED ON THE UI PRINCIPLES)

10 IDENTIFY A CUSTOMER PROBLEM TO SOLVE 37

11 CONDUCT END TO END USER RESEARCH 41

12 DESIGN A PROTOTYPE WITH POPULAR TOOL 45

 EXP NO: 1
DESIGNING A RESPONSIVE LAYOUT FOR INSTAGRAM
DATE:

AIM:
To design a responsive layout for an societal application-Instagram.
PROCEDURE:
1. Understand Instagram's Layout Guidelines:
• Familiarize yourself with Instagram's recommended image sizes and aspect ratios for
posts, stories, and IGTV. This ensures that your content looks good on different
devices.
2. Define the Grid System:
• Establish a grid system to organize and structure your content. This helps maintain
consistency and alignment across various screen sizes.
3. Mobile-First Approach:
• Start designing for mobile devices first. Consider the vertical orientation and limited
screen space when arranging elements.
4. Use Responsive Design Principles:
• Employ responsive design principles such as fluid grids, flexible images, and media
queries to ensure that your layout adapts to different screen sizes.
5. Prioritize Content Hierarchy:
• Identify key content elements and prioritize them based on their importance. Ensure
that essential information remains visible on smaller screens.
6. Adapt Typography:

• Use scalable fonts and adjust font sizes for readability on various devices. Consider
using relative units like percentages or ems instead of fixed pixel values.
7. Optimize Images and Media:
• Optimize images for different resolutions and screen sizes to ensure fast loading
times. Consider using responsive images or the srcset attribute.
8. Flexible Layouts:
• Create flexible layouts that can adjust to different screen sizes. Avoid fixed-width
containers that may cause horizontal scrolling on smaller screens.
9. Media Queries:
• Implement media queries in your CSS to apply specific styles based on the screen
size. Adjust layout, font sizes, and spacing for different breakpoints (e.g., mobile,
tablet, desktop).

DESIGN:

RESULT:
Thus the responsive layout of Instagram is designed.
 EXP NO: 2
EXPLORING VARIOUS UI INTERACTION PATTERNS
DATE:

AIM:
To explore various UI Interaction patterns.

EXPLANATION:
UI INTERACTION PATTERNS:
UI (User Interface) interaction patterns refer to common design solutions for specific user
interactions. These patterns help create a consistent and intuitive user experience across
different applications and platforms. Here are various UI interaction patterns:
1. Navigation Patterns:
a. Hamburger Menu:
• A collapsible menu represented by three horizontal lines. It's often used for mobile
navigation but can be adapted for desktop applications.
b. Tab Bar:
• Horizontal tabs to switch between different sections or views. Commonly used in
mobile applications.
c. Dropdown Menu:
• A menu that appears below a button when clicked or hovered over, providing a list of
options.
d. Accordion:
• A vertically stacked list of items where only one item is expanded at a time. Clicking
one item collapses the others.
2. Input Patterns:
a. Form Validation:
• Real-time feedback to users about the validity of the information they're entering in
a form.
b. Autocomplete:
• Suggestions appear as users type, helping them complete a word or phrase more
quickly.
c. Date Picker:
• A calendar-like interface to help users select dates easily.
d. Toggle Switch:
• A binary switch that allows users to turn an option on or off.
3. Feedback Patterns:
a. Toast Notifications:
• Non-intrusive messages that appear briefly, providing feedback about a user’s action.
b. Loading Spinners:
• Visual indicators to inform users that a process is ongoing.
c. Error Messages:
• Clear and concise messages that inform users about errors in their actions.
4. Gesture-Based Patterns:
a. Swipe:
• Horizontal or vertical gestures used for navigation or content manipulation.
b. Pinch and Zoom:
• Gesture for scaling content, commonly used in maps and images.
c. Long Press:
• Pressing and holding to reveal additional options or trigger an action.
5. Search Patterns:
a. Search Bar:
• A dedicated space for users to input search queries.
b. Faceted Search:
• Advanced search with filters allowing users to narrow down results.
6. Onboarding Patterns:
a. Tutorial Walkthrough:
• Guided tours or tutorials to introduce users to key features.
b. Progressive Disclosure:
• Gradually revealing information or features to users to avoid overwhelming them.
7. Media Patterns:
a. Carousel:
• A rotating set of images or content, often used for displaying a series of images or
promotions.
b. Lightbox/Modal:
• Overlay that appears on top of the main content to focus attention on a specific task
or information.
8. Card-Based Patterns:
a. Card Grid:
• Information presented in a grid of cards, each containing a distinct piece of content.
b. Expandable Cards:
• Cards that can be expanded to reveal additional information or actions.
9. Social Interaction Patterns:
a. Like/Heart Button:
• A button allowing users to express appreciation or agreement with content.
b. Comment Threads:
• Hierarchical presentation of comments, allowing users to reply to specific comments.
10. Progress Indicators:
a. Percentage Bar:
• Visual representation of progress, often seen in file uploads or form completion.
b. Step Indicators:
• Displays the user's progress through a multi-step process, such as a checkout flow.

RESULT:
Thus the various UI Interaction patterns are explored and Studied successfully.
EXP NO: 3

DATE: DEVELOPING AN INTERFACE WITH PROPER UI STYLE GUIDES

AIM:
To develop an User Interface with proper UI style guides.

PROCEDURE:
1. COLOR PALLETE:
• Choose a primary color along with secondary and accent colors. Define
their RGB, HEX, or HSL values. Ensure color combinations provide
sufficient contrast for readability.

• The rule states that a color scheme should consist of three colors in the
following proportions: 60% of the dominant color. 30% of the secondary
color. 10% of the accent color.

• WARM COLORS:

Red color is an example of warm colors .Warmth and comfort are the
sentiments evoked by these colors.
EXAMPLE:
Coca-Cola, Netflix , Fanta, Snapchat are the well known brands that employs
Warm colors as its primary company color to evoke feelings of comfort and
Warmth.
COOL COLORS:

Blue, green, indigo, and violet are cold hues. Sweetness, serenity, trust,
confidence, and introspection are some of the connotations
EXAMPLE:
Technology companies such as Skype,IBM,Dell,HP,Intel choose blue as a
Branding color since it helps to establish trust in the organization.
Green evokes sentiments of regeneration and peace.These feelings are appropriate for a
Grocery delivery apps.Example:Big Basket.
Make a two color palettes:
Example:

Most of the people prefer light

theme. So, make a different
color palette with darker shades.

2. TYPOGRAPHY:
The font should align with the purpose and feel of your user interface. For example, a sans-
serif font is suitable for a serious business app, while a decorative font is better for a playful
children's game.
Choose fonts with clear, distinguishable characters and a balanced x-height, weight, and
spacing. Avoid overly decorative or condensed typefaces for body text

Typography Principles:

• Too many typefaces hinder good user experience.

• Choose typefaces that compliment and contrast with one another.
• Keep readability, legibility, and accessibility top of mind.
• Great visual hierarchy improves UX.
• Make your typography scalable.
• Enrich UX with typography.
• Test and learn.
3. ICONOGRAPHY:
Iconography refers to the use of icons, which are simple, recognizable symbols created by
user experience (UX) designers to communicate a message.
SEVEN PRINCIPLES OF ICON DESIGN:

• Clarity
• Readability
• Alignment
• Brevity
• Consistency
• Personality
• Ease of Use
ICON SELECTION:
Example:

Use simple flat icons for

more professional look.

4. LAYOUT AND SPACING:

GRID SYSTEM:
Grid theory refers to a series of lines and structures defining the proportions of a website,
graphic or presentation. This includes both straight lines that dictate the shape of a piece of
work and more complex curves.
SPACING:
The general premise is that whenever you create space between elements, it should be
divisible by four (4, 8, 12, 16, etc.). Spacing guide chart detailing the 4-point grid system with
increments of 4.
Make sure to leave spaces from edges and group relevent elements.
5. UI COMPONENTS:
1. BUTTONS:

• The primary button, often used for actions like "Submit" or "Next," should be the
most visually prominent. Secondary and tertiary buttons, like "Cancel" or "Back,"
should be less eye-catching but still easily identifiable. Utilize varying shades, sizes ,
or subtle effects like shadows to distinguish these buttons.
• Utilize button hierarchy to help user make a clear choice.
• Buttons with small paddings don’t look good. So Double the value of the side
paddings from the value of top and bottom paddings.
• Avoid using vague actions like OK or Next. Your button needs to clearly state what’s
going to happen.
• If both buttons have similar contrast they compete for user’s attention.So Positive
action has much lighter contrast, then user sees a clear action.
2. FORMS:

Define input field styles, dropdowns, radio buttons, checkboxes, and error states. Include
guidelines for form validation and input masks if necessary.
3. NAVIGATION:

Define styles for menus, navigation bars, tabs, and breadcrumbs. Specify the behavior and
appearance of links.
4. ALERTS and NOTIFICATIONS:

Define styles for success, warning, error, and information alerts. Specify animations or
transitions for showing and dismissing alerts.

IMPLEMENTATION:
OUR USER INTERFACE:
We are going to develop an interface by following the above UI style guides. Our interface is
for grocery delivery app, so we can use cool colors such as green.
Color palette:

• Primary Color: White(FFFFFF)

• Secondary Color: Light green(2FCC2B)
• Tertiary Color:Dark green(188016)
Typography:
We are going to use Fonts such as Inter and Irish Grover.
UI FOR GROCERY APP:

RESULT:
Thus we have developed an User Interface with proper UI Style Guides Successfully.
 EXP NO: 4
DEVELOPING WIREFLOW DIAGRAM FOR APPLICATION USING
OPEN SOURCE SOFTWARE
DATE:

AIM:
To develop a wireflow diagram for our application using open source software.

EXPLANATION:
Various open souce software for wireframing:

• FigJam
• Lucid
• Balsamiq etc.
• MockFlow
• Draw.io
• Wireframe.cc
• Pencil Project
• Inkscape
FigJam:
FigJam is designed to facilitate real-time collaboration among team members, allowing
them to ideate, brainstorm, and work together on visual projects. It provides a digital space
for teams to create diagrams, sketches, and wireframes, fostering communication and
creativity. Features often include the ability to draw, add sticky notes, create shapes, and
collaborate synchronously.
Lucid:
Lucidchart is a collaborative diagramming tool that allows users to create flowcharts,
mind maps, wireframes, and other visual representations of ideas. It offers a user-friendly
interface and real-time collaboration features, enabling teams to work together on visual
projects. Lucidchart is commonly used in various industries for planning, brainstorming, and
illustrating complex concepts. It integrates with other productivity tools and is accessible
through web browsers, making it a versatile solution for teams working on visual
communication and documentation.

PROCEDURE:
Creating a wireflow diagram for your application involves representing the user interface
wireframes and the flow of interactions between different screens or components. There are
several open-source tools available that you can use to develop wireflow diagrams. One
popular choice is lucid.app, which is a free and open-source online diagramming software.
Here's a step-by-step guide on how to create a wireflow diagram using lucid.app:
Start a New Document:
Once you're logged in, create a new document by selecting "Create" or "New Document"
from the Lucidchart dashboard.
Choose a Template:
Lucidchart provides templates for various types of diagrams. Look for templates related to
wireframes, user flows, or flowcharts to get started.Choose Mobile wireframe as template.
Add Shapes and Elements:
Use the shape libraries to add elements to represent screens, UI components, or steps in
your user flow. Drag and drop shapes onto the canvas to build your wireflow.
Connect Shapes:

Use connectors (lines or arrows) to connect the shapes and indicate the flow between them.
You can find connector tools in the toolbar.
Label and Annotate:
Add labels, text, or annotations to describe the purpose of each screen or interaction. This
helps communicate the user flow more effectively.
Customize Appearance:
Customize the appearance of your wireflow by adjusting colors, fonts, and line styles.
Lucidchart provides various formatting options in the toolbar.
Use Containers and Layers:
Utilize containers to group related elements together. You can also use layers to organize and
manage different parts of your wireflow.

Preview and Test:

Lucidchart allows you to preview your wireflow to see how the user flow will appear. Use
this feature to test the logic and transitions in your diagram.
Share and Collaborate:
Once your wireflow is ready, you can share it with collaborators or stakeholders. Lucidchart
supports real-time collaboration, enabling multiple users to work on the diagram
simultaneously.
Export or Integrate:
Export your wireflow diagram in various formats (PNG, PDF, etc.) or integrate it with other
platforms like Google Workspace or Microsoft Teams.
IMPLEMENTATION:
Wireframes for our grocery apps:
SPLASH SCREEN LOGIN SCREEN
 LOCATION HOME

We have designed wireframes for Splash screen, Login Screen, Location, Home Screen .
 SEARCH SCREENS

In the search screen we can search a separate item and als by a receipe.when we give a receipe name ,
for example Chicken Biriyani ,it will list all the ingredients of chicken
biriyani.from the ingredients we can add our needs or we can select all the ingredient and
add to basket.This will be more easier and less time consuming .
CATEGORIES MY ORDERS

BASKET
 Thus we have designed all the wireframes for our app using Lucid.Now we will connect
all the screens .
WIREFLOW DIAGRAM:

RESULT:
Thus we have designed the wireflow diagram for our application using Lucid App
Succesfully.
 EXP NO: 5
EXPLORING VARIOUS OPEN SOURCE COLLABRATIVE
DATE: INTERFACE PLATFORM

AIM:
To explore the various open source collaborative interface platform.

EXPLANATION:
OPEN SOURCE INTERFACE PLATFORMS:
There are various open source platforms to design an interface. We are going to explore
the few of it.
1. FIGMA:

Figma is a cloud-based design and prototyping tool that enables collaboration among
teams in real-time. It is widely used in the fields of user interface (UI) and user experience (UX)
design, as well as for creating interactive prototypes.
Here are some key features and aspects of Figma:
Cloud-Based Collaboration:
Figma operates entirely in the cloud, allowing multiple users to collaborate on a design
project simultaneously. This real-time collaboration feature is particularly useful for remote
teams or distributed work environments.
Platform Independence:
Figma runs in a web browser, making it platform-independent. Users can access and work
on their designs from various operating systems, including Windows, macOS, and Linux.
Vector Editing:
Figma is equipped with robust vector editing tools, making it easy to create and edit
scalable vector graphics (SVG). This is essential for designing UI elements that need to look
sharp at various screen sizes.
Prototyping:
Figma allows designers to create interactive prototypes, enabling them to simulate user
interactions and flows. This helps in testing and validating the user experience before actual
development.
Plugins:
Figma supports a wide range of plugins that extend its functionality. These plugins can help
with tasks such as design automation, data visualization, and collaboration with other tools in
the design workflow.
Team Libraries:
Teams can create and maintain design systems and component libraries within Figma. This
ensures consistency across projects and allows teams to work more efficiently.
2. SKETCH:

Sketch is a vector graphics editor and design tool specifically created for digital design,
particularly in the realm of user interface (UI) and user experience (UX) design. It has gained
widespread popularity among designers and design teams for its focus on simplicity, efficiency,
and a streamlined workflow.
Here are some key features and aspects of Sketch:

Vector Editing:
Sketch is primarily a vector-based design tool, making it well-suited for creating scalable
graphics and UI elements. Vector graphics ensure that designs remain crisp and clear at various
resolutions.
Artboards:
The use of artboards in Sketch allows designers to work on multiple screens or design
variations within a single document. This is particularly useful for designing responsive
interfaces for different devices.
Symbols and Shared Styles:
Sketch introduced the concept of symbols, which are reusable UI elements that can be
easily replicated and updated across multiple artboards. Shared styles enable consistent
application of colors, text styles, and other design elements.
Plugins:
Sketch supports a robust plugin ecosystem that extends its functionality. Designers can use
plugins to automate tasks, integrate with other tools, and enhance their workflow.
Export Options:
Sketch provides a variety of export options, allowing designers to export assets in different
formats and resolutions. This is essential for collaborating with developers and ensuring
seamless integration with the development process.
Responsive Design:
Designing for different screen sizes and resolutions is made easier with Sketch's responsive
design features. Designers can preview how their designs will appear on various devices and
adjust accordingly.
Prototyping:
While not as extensive as some dedicated prototyping tools, Sketch has basic prototyping
capabilities. Designers can create simple interactions and transitions to demonstrate the flow of
their designs.
Integrations:
Sketch can be integrated with various third-party tools and services, including prototyping
tools, collaboration platforms, and design systems. This flexibility enhances the overall design
workflow.
Collaboration:

Sketch is primarily a desktop application, and while it lacks real-time collaboration features
found in cloud-based tools like Figma, designers can still collaborate by sharing Sketch files and
using version control systems.
Ease of Use:
One of Sketch's strengths is its user-friendly interface and intuitive design. Many designers
appreciate its simplicity and the fact that it focuses on essential design features without
unnecessary complexity.
3. ADOBE XD:
Adobe XD (Experience Design) is a vector-based design and prototyping tool developed
and published by Adobe Inc. It is specifically designed for user experience (UX) and user
interface (UI) designers, allowing them to create interactive prototypes and design interfaces
for websites, mobile apps, and other digital platforms.
Here are some key features and aspects of Adobe XD:
Vector Design:
Adobe XD is built on a vector design platform, enabling designers to create scalable and
high-quality graphics. This is crucial for designing user interfaces that need to adapt to various
screen sizes and resolutions.
Artboards and Layout Grids:
Similar to other design tools, Adobe XD utilizes artboards to represent screens or pages.
Designers can use layout grids to create consistent spacing and alignment across their designs.
Prototyping:
One of the standout features of Adobe XD is its powerful prototyping capabilities. Designers
can create interactive prototypes by linking artboards, defining transitions, and adding gestures
to simulate user interactions and flows.
Auto-Animate:
Adobe XD includes an Auto-Animate feature, allowing designers to create smooth transitions
and animations between artboards without the need for complex manual keyframing.
Repeat Grid:
The Repeat Grid feature in Adobe XD allows designers to create repeated elements, such as
lists or grids, with a single master component. Changes to the master component are
automatically reflected in all instances, streamlining the design process.
Components:
Adobe XD supports the creation of reusable components, similar to Figma and Sketch.
Changes made to a component are applied across all instances, promoting design consistency.
Adobe Creative Cloud Integration:
Adobe XD seamlessly integrates with other Adobe Creative Cloud applications, such as
Photoshop and Illustrator. Designers can import assets directly from these applications and
collaborate across the Adobe ecosystem.
Collaboration and Sharing:
Adobe XD allows for collaborative design with shared design links. Designers can share
prototypes with stakeholders and collect feedback directly within the platform. Shared links
also enable developers to inspect and download assets.
Plugins:
Adobe XD supports a growing number of plugins that enhance its functionality. These plugins
cover a range of tasks, from design automation to integration with other design and
development tools.
Responsive Resize:
Adobe XD includes a responsive resize feature, making it easier for designers to adapt their
designs to different screen sizes and orientations.
4. INVISION STUDIO:

InVision Studio was a relatively new and powerful design and prototyping tool created by
InVision, a company known for its collaboration and prototyping products.
Here are some key features and aspects of Invision Studio:
Design and Prototyping:
InVision Studio combines both design and prototyping capabilities in a single tool.
Designers can create complex and interactive UI/UX designs while seamlessly transitioning to
creating prototypes to demonstrate user flows.
Responsive Design:
The tool supports responsive design, allowing designers to create layouts that adapt to
different screen sizes and orientations.
Timeline and Animation:
InVision Studio includes a timeline feature that enables designers to create animations and
transitions between artboards. This is useful for prototyping interactions and demonstrating
the user experience.
Shared Design Libraries:

Similar to other design tools, InVision Studio supports the creation of design libraries and
design systems. This ensures consistency across projects and collaboration among team
members.
Real-Time Collaboration:
InVision Studio facilitates real-time collaboration among team members. Designers can
work simultaneously on a project, and changes are reflected instantly, promoting a
collaborative design process.
Design-to-Code Handoff:
InVision Studio provides features for design-to-code handoff, allowing designers to share
design specs and assets with developers. This helps streamline the transition from design to
development.
Integrated Prototyping Environment:
The tool offers an integrated prototyping environment, allowing designers to create
interactive and animated prototypes without switching between different applications.
InVision Cloud Integration:
InVision Studio is integrated with InVision Cloud, which allows designers to share their work,
collect feedback, and iterate on designs with stakeholders. The cloud integration enhances
collaboration and communication.
Craft Plugin:
InVision Studio works with the Craft plugin, which connects to design tools like Sketch and
Photoshop. This plugin enhances the design workflow by providing additional features and
integration with external design assets.
Freehand Drawing:
InVision Studio includes a freehand drawing feature, enabling designers to sketch and ideate
directly within the application.

RESULT:
Thus we have explored the various open source collaborative interface.
 EXP NO: 6

DATE: HANDS ON DESIGN THINKING PROCESS FOR BASEGRO APP

AIM:
To develop our project further we will perform design thinking process to solve problem
and to give a innovative solution.

EXPLANATION:
DESIGN THINKING PROCESS:
1. EMPATHIZE:

USER RESEARCH AND PERSONA CREATION:

• Conduct interviews, surveys, or usability tests to understand users' behaviours,

preferences, and pain points related to grocery shopping.
• Create detailed user personas based on your research to represent different types of
users, such as busy parents, elderly individuals, or tech-savvy millennials.

2. DEFINE:

PROBLEM STATEMENT FOR GROCERY DELIVERY APP:

People nowadays are so busy with their busy lives that they don’t have enough time to go
out and buy essential groceries. People spend more time and more crowd for supermarket
billing session and busyness is scary . which makes their normal life difficult. Existing grocery
delivery services lack a seamless and personalized user experience, leading to frustration,
inconvenience, and a gap in meeting diverse customer needs. There is a need for a grocery
delivery app that not only simplifies the shopping process but also understands and caters to
the unique preferences, dietary requirements, and time constraints of users, ultimately
providing a delightful and time-saving solution for their grocery needs.
USER JOURNEY MAPPING FOR GROCERY DELIVERY APP:

Awareness:
User becomes aware of the grocery delivery app through advertising, social media, or word
of mouth. They download the app from the app store.
Onboarding:
User opens the app for the first time. They are guided through the onboarding process,
creating an account and setting up preferences such as location and product preferences.
The app provides a brief tutorial on how to use key features.
Browsing Products: User explores the app's product catalog, either by browsing categories
or using the search function. They view product details, images, and prices.
Users have the option to filter products based on dietary preferences, brand preferences, or
other criteria.
Adding to Cart:
After selecting desired products, the user adds them to their virtual shopping cart. They can
easily review and edit the contents of their cart.
Checkout:
User proceeds to checkout, where they can review their order, select a delivery time, and
choose payment options.
The app may offer promotions, discounts, or suggest additional products based on the user's
preferences.
Payment:
User enters payment details securely within the app.
They receive a confirmation of the order, including an estimated delivery time.
Order Tracking:
The user can track the status of their order in real-time.
They receive notifications about the order, from preparation to delivery.
Delivery:
The delivery person arrives with the groceries.
The user is notified of the arrival, and the groceries are handed over.
Feedback and Ratings:
After delivery, the app prompts the user to provide feedback and ratings for both the
products and the delivery service.
Repeat Purchase:
If satisfied, the user is likely to repeat the process for future grocery needs.
The app may use data from previous purchases to suggest personalized recommendations.
Customer Support:
In case of issues or questions, the user can easily access customer support through the app.

3. IDEATE:

SKETCHING AND WIREFRAMING:

Wireflow diagram of our grocery delivery app:

4. PROTOTYPE:

Low-Fidelity Prototype
Use design tools like Sketch, Figma, or Adobe XD to create a low-fidelity prototype of the
app. Focus on the key user flows and interactions.

Ensure that the prototype is simple and easy to navigate. Include only essential features to
test the core functionality.

5. TEST:

Usability Testing with Users

Conduct usability testing with real users using the low-fidelity prototype. Observe how they
navigate through the app and complete tasks.

Pay attention to user feedback and identify pain points or areas where users may get
confused.
6. ITERATE:

Refine Based on Feedback

Based on the feedback gathered during usability testing, refine the prototype. Make
adjustments to the layout, navigation, and visual design to enhance the user experience.
Iterate through this process multiple times, making improvements with each iteration.
7. DESIGN HIGH-FIDELITY MOCKUPS:

Once you have a well-refined low-fidelity prototype, start creating high-fidelity mockups.
Add more detail to the visual design, including colors, typography, and imagery.
Ensure consistency in design elements across different screens for a cohesive look and feel.
8. INTERACTIVE PROTOTYPING:

Create an interactive prototype using your high-fidelity mockups. This will allow you to
simulate the user experience more realistically.
Test the interactive prototype internally to identify any last-minute issues before moving to
development.
9. USER TESTING WITH HIGH-FIDELITY PROTOTYPE:

Conduct usability testing with the high-fidelity prototype to validate the final design. Pay
attention to details such as button placement, color choices, and overall visual appeal.
10. HANDOFF TO DEVELOPMENT:

Work closely with developers to ensure a smooth handoff of design assets. Provide them
with design specifications, assets, and any necessary documentation.
Collaborate with the development team during implementation to address any design-
related issues that may arise.
11. LAUNCH AND MONITOR

Launch the grocery delivery app and closely monitor user feedback and analytics.Be
prepared to make quick updates or improvements based on real-world usage and user
feedback.
12. CONTINOUS IMPROVEMENT:

Regularly collect user feedback and app performance data after the launch.Use this
information to plan future updates and improvements to enhance the UI/UX continually.

RESULT:
Thus we have a outline of our project of building grocery app.
EXP NO: 7
BRAINSTORMING FEATURE FOR BASEGRO APP
DATE:

AIM:
To develop our project by adding innovative features which enhance user experience.

EXPLANATION:
1. Intelligent Shopping Lists:
• AI-powered suggestions based on past purchases.
• Integration with recipe apps to automatically generate shopping lists.
2. Augmented Reality (AR) Shopping:
• Allow users to use their phone's camera to scan items at home and add them
to their shopping cart.
3. Voice-Activated Shopping:
• Integration with virtual assistants like Siri or Google Assistant for hands-free
shopping.
4. Personalized Discounts and Offers:
• AI-driven discount suggestions based on user preferences and shopping
history.

5. Real-Time Inventory Updates:

• Live updates on product availability and substitutions in real-time.
6. Group Shopping:
• Collaborative shopping lists for families or groups of friends.
7. Scheduled Deliveries:
• Allow users to schedule deliveries at specific times, accommodating their
convenience.
8. In-App Chat Support:
• Real-time chat support for users to communicate with customer service or
delivery personnel.
9. Integration with Health Apps:

• Provide nutritional information and integrate with health apps to help users
make healthier choices.
10. Subscription Services:

• Offer subscription-based models for frequently purchased items with

automatic deliveries.
11. Customizable Delivery Routes:

• Allow users to customize their delivery routes based on their preferences or

schedule.
12. Gamification Elements:

• Loyalty programs, badges, or rewards for consistent users.

13. Social Media Integration:

• Shareable carts, allowing users to share their shopping lists on social media or
collaborate with others.
14. Smart Reordering:

• Predictive analytics to suggest when users might need to reorder specific

items.
15. Offline Mode:

• Capability to create and modify shopping lists ofline, with automatic

synchronization when the connection is restored.
16. Allergy and Dietary Preferences:

• Customizable filters for users with specific dietary restrictions or allergies.

17. Interactive Recipes:

• Integration with recipes that allow users to add ingredients directly to their
cart.
18. Dynamic Pricing:

• Adjust prices based on demand, time of day, or other relevant factors.

19. Green Delivery Options:

• Eco-friendly delivery choices, such as electric vehicle options or consolidated

delivery windows.
 20. User Reviews and Ratings:

• Enable users to rate and review products, helping others make informed
decisions.

RESULT:
Thus we have got innovative ideas to develop the project by this Brainstorming session.
 EXP NO: 8
DEFINING THE LOOK AND FEEL OF THE BASEGRO APP
DATE:

AIM:
To define the look and feel of our project of building grocery delivery app BaseGro.

EXPLANATION:
1. USER INTERFACE:

COLOR SCHEME OF THE APP:

Our app is going to deliver groceries which is fresh so we can use colors associated with
freshness (Green) and trust (White).
COLOR PALETTE:

• Primary Color: White(FFFFFF)

• Secondary Color: Light green(2FCC2B)
• Tertiary Color: Dark green(188016)
TYPOGRAPHY:
For general text we are going to use inter as the font.
For the logo of the app we are using the font Irish Gover.
ICONS:
Icons we used are:

Home Categories Stores My Orders Basket

2. Product Display:

High-Quality Imagery:
Use high-resolution images for products to showcase their details. Include multiple images
per product to provide a comprehensive view.
Product Details:
Display key product information such as price, quantity, and any discounts clearly. Consider
using a rating system or customer reviews.
3. NAVIGATION:

Our app will be navigated as follows:

4. USER EXPERIENCE (UX):

User Onboarding:
Create a smooth onboarding process with minimal steps to register or log in. Consider
incorporating a tutorial or guide to introduce new users to the app's features.
Search Functionality:
Implement a robust search feature that allows users to find products quickly. Include filters
and sorting options for enhanced user convenience.
Personalization:
Provide personalized recommendations based on user preferences, purchase history, and
browsing behavior.
5. CART and CHECKOUT:

Visible Cart Icon:

Ensure the cart icon is easily visible, displaying the number of items added. Allow users to
review and edit their cart easily.
Secure Checkout Process:
Clearly guide users through the checkout process, ensuring transparency about payment
methods, delivery options, and any additional fees.
6. FEEDBACK and NOTIFICATIONS:

Feedback System:
Include a feedback mechanism for users to rate products and the overall service. This helps
in improving user satisfaction.
Push Notifications:
Implement notifications for order confirmations, delivery updates, and promotions. Allow
users to customize notification preferences.
7. ACCESSIBLITY and RESPONSIVENESS:

Accessibility Features:
Ensure the app is accessible to users with disabilities. Provide features like text-to-speech,
voice commands, and adjustable font sizes.
Cross-Device Compatibility:
Design the app to be responsive across various devices and screen sizes.
8. LOADING and RESPONSE TIMES:

Optimized Performance:
Minimize loading times to provide a seamless experience. Use efficient coding practices and
consider implementing loading animations to keep users informed.
9. BRANDING ELEMENTS:

Logo:

RESULT:
Thus we have defined the look and feel of our basgro app.
 EXP NO:9
CREATE A SAMPLE PATTERN LIBRARY FOR BASEGRO (MOOD
DATE: BOARD,FONTS,COLORS BASED ON THE UI PRINCIPLES)

AIM:
To Create a sample pattern library for our product BaseGro.

EXPLANATION:
1. MOOD BOARD:

A Moodboard is a visual representation of the mood, style, and tone of the product. It
can include images, colors ,fonts, icons, and other elements that convey the look and feel of
our app. The mood board sets the overall tone and visual direction for the grocery app. It
includes images, colors, and styles that represent the app's vibe. The moodboard can help to
inspire and guide the design process, as well as communicate the vision to the stakeholders
and users.
Mood Board Description:
Theme:
Fresh, Modern, and User-Friendly.
Visual Elements:
Images of fresh produce, clean and simple interfaces, and a touch of green to
represent the natural aspect of grocery items.
Keywords:
Trustworthy, Efficient, and Vibrant.
2. FONTS:

A font is a set of characters that share a common design and style. A font for a grocery
app should be clear, legible, and accessible to all users, regardless of their reading abilities,
preferences, or devices. A font for a grocery app might also reflect the mood and personality
of the product, such as friendly, casual, or professional. A possible font for a grocery app is
[Inter], which is a sans-serif font that is modern, versatile, and easy to read.
Heading Font:
Font Family: Irish Gover
Weight: Medium
Body Text Font:
Font Family: Inter, Inria serif
Weight: Regular
3. COLOR:

A color is a hue that can be used to create contrast, hierarchy, and meaning in a user
interface. A color for a grocery app should be consistent with the moodboard, as well as
follow the principles of color theory and accessibility. A color for a grocery app might also
use color psychology to influence the emotions and behaviors of users, such as appetite,
trust, or excitement. A possible color scheme for a grocery app is green and red.
Primary Color:
Hex Code: #2FCC2B (Green)
Usage: Action buttons, highlights, and accents.
Secondary Color:
Hex Code: 188016 (Dark Green)
Usage: Navigation elements and links.
Background Color:
Hex Code: #FFFFFF (White)
Usage: Background for most of the app's screens.
4. UI PRINCIPLES:

Clarity and Simplicity:

Emphasize simplicity in design, ensuring that users can quickly understand and navigate
the app.
Consistency:
Maintain consistent typography, colors, and UI elements across the app for a cohesive
user experience.
Accessibility:
Ensure sufficient contrast between text and background colors to accommodate users
with visual impairments.
Feedback:
Provide visual feedback for user interactions, such as button presses or loading
indicators, to enhance the user experience.
Intuitive Navigation:
Create an intuitive menu structure and layout to help users find products and complete
tasks seamlessly.
COMPONENTS:
Button:
Primary Button:
Background Color: #2FCC2B
Text Color: #FFFFFF

Secondary Button:
Background Color: #F90000
Text Color: #FFFFFF

ICONS:

Home

RESULT:
Thus we have created Sample Pattern Library for our product BaseGro.
 EXP NO: 10
IDENTIFY A CUSTOMER PROBLEM TO SOLVE
DATE:

AIM:
To identify a customer problems in a grocery delivery app and to solve those problems in
our app.

EXPLANATION:
PROBLEMS OF THE CUSTOMER:
1. Difficulty in finding products:
Customers may find it difficult to locate the products they are looking for. This can be
solved by organizing products into categories, using clear and concise labels, and making
sure that the most important products are easy to find .
2. Complicated checkout process:
A complicated checkout process can lead to cart abandonment and lost sales. This can
be solved by simplifying the checkout process, reducing the number of steps, and making
sure that the process is easy to follow.
3. Inaccurate product information:
Inaccurate product information can lead to customer frustration and lost sales. This can
be solved by ensuring that product information is accurate, up-to-date, and easy to
understand.
4. Slow load times:
Slow load times can be frustrating for users and can lead to high bounce rates. This can
be solved by optimizing images, using a content delivery network (CDN), and minimizing
the use of third-party scripts.
5. Poor search functionality:
Poor search functionality can make it difficult for users to find what they’re looking for
and can lead to high bounce rates. This can be solved by using predictive search,
autocomplete, and making sure that the search function is easy to use.
6. Inconsistent branding:
Inconsistent branding can make it difficult for users to recognize your brand and can
lead to confusion. This can be solved by using consistent colors, fonts, and imagery across
all platforms.
7. Communication Challenges:
Lack of clear communication regarding order status, delivery updates, or changes to the
delivery schedule can lead to confusion and frustration among customers.
8. Time Consumption:
Time consumption is very high in searching all the products. So we should develop our
interface to list the ingredients for the recipe we enter in search.

SOLUTIONS:
1. Difficulty in Finding Products:
Organize Products into Categories:

• Implement a clear and intuitive categorization system to group similar products

together.
• Clear Labels and Descriptions: Ensure that product labels and descriptions are concise,
clear, and easily understandable.
Featured Products:
Highlight popular or essential products on the homepage for quick access.
Search Functionality:
Implement a robust search feature with predictive text and autocomplete to assist users in
finding products quickly.
2. Complicated Checkout Process:
Simplified Checkout Steps:
Reduce the number of checkout steps to streamline the process.

Guest Checkout Option:

Allow users to check out as guests without the need for account creation.
Progress Indicators:
Clearly display progress indicators to show users where they are in the checkout process.
Save Billing Information:

Enable the option for users to save billing information for future purchases.
3. Inaccurate Product Information:
Regularly Update Information:
Ensure that product information is regularly reviewed and updated.
User-Generated Reviews:
Include user reviews and ratings to provide additional insights and build trust.
Clear Product Images:
Provide high-quality images that accurately represent the product.
4. Slow Load Times:
Optimize Images:
Compress and optimize images to reduce file sizes.
Content Delivery Network (CDN):
Utilize a CDN to distribute content across multiple servers, reducing load times.
Minimize Third-Party Scripts:
Limit the use of third-party scripts and plugins that may slow down the website.
5. Poor Search Functionality:
Predictive Search:
Implement a predictive search feature that suggests relevant products as users type.
Autocomplete:
Provide autocomplete suggestions based on popular searches and product names.
Advanced Filters:
Allow users to filter search results based on various criteria such as price, brand, or category.
6. Inconsistent Branding:
Brand Style Guide:
Develop and adhere to a brand style guide that outlines consistent use of colors, fonts, and
imagery.
Cross-Platform Consistency:
Ensure that branding elements remain consistent across websites, mobile apps, and other
platforms.
7. Communication Challenges:
Real-Time Notifications:
 Implement real-time notifications for order confirmations, status updates, and delivery
information.
Order Tracking:

Provide a feature for customers to track their orders in real-time.

Clear Communication Channels:
Clearly communicate customer support channels for inquiries and assistance.
8. Time Consumption:
Recipe Integration:

Implement a feature that allows users to input recipes, and the system lists the required
ingredients for easy shopping.
Smart Search:
Develop an intelligent search system that recognizes and suggests relevant products based
on user inputs.

RESULT:
Thus we have identified user problem and the solutions for the problem
 EXP NO: 11
CONDUCT END TO END USER RESEARCH

DATE:

AIM:
To Conduct End to End User Research-User Research, Creating Personnas , Ideation
process(User Stories,Scenarios),Flow Diagrams, Flow Mapping for our BaseGro App.

END TO END USER RESEARCH:

USER RESEARCH:
User Research is a crucial component of the design and development process for
product, services and systems.
SURVEY ABOUT THE USERS:
EMPATHY MAP:

USER PERSONA:
USER JOURNEY MAP:

FLOW DIAGRAM:
COMPETITORS:

• Amazon Fresh
• BigBasket
• Zepto
• Dunzo

By this analysis and ideas we will start to build our app further.

RESULT:
Thus we have finished all our research work successfully.
 EXP NO: 12
DESIGN A PROTOTYPE WITH POPULAR TOOL
DATE:

AIM:
To sketch and design a prototype with popular tool.

PROCEDURE:
Step 1: Designing the Prototype in Figma
Home Screen:
• Header: Logo, Search Bar, Cart Icon
• Categories Section: Display popular categories.
• Promotions: Highlight ongoing promotions.

Product Listing:
• Grid View: Display products with images and prices.
• Filter Options: Sort by category, price, etc.
• Add to Cart: Quick add button on each product.

Cart:
• List of Items: Display added items with quantities.
• Total Price: Show the total cost.
• Checkout Button: Move to the checkout process.

Checkout Process:
• Delivery Information: Input fields for address and contact details.

• Payment Options: Choose payment method.

• Order Summary: Confirm the selected items and total cost.

• Place Order Button: Confirm the order.

Confirmation:
• Order Confirmation Message: Display a confirmation message.
• Estimated Delivery Time: Provide an estimated delivery time.
• Track Order Button: Option to track the delivery.
Step 3: Usability Testing
Testing Scenarios:
Scenario 1: Adding Items to Cart
Task: Add three different items to the cart.
Observe the user's interaction and check if it's intuitive.

Scenario 2: Completing a Purchase

Task: Go through the checkout process and complete a purchase.
Monitor the user's flow, ensuring it's straightforward.

Scenario 3: Checking Order Status

Task: Check the status of the order after placing it.
Evaluate how easily the user can find and understand the order status.
Collecting Feedback:
Ask users to think aloud while performing tasks to understand their thought process.
Use a combination of quantitative and qualitative data (time taken, success rate, user
feedback).
Observe pain points, confusion, or areas where users hesitate.

Step 4: Identify Improvements

Improvement Suggestions:
Enhance Navigation:

Users found it challenging to navigate back to the home screen from the cart.
Consider adding a clear back button or improving navigation.
Clarify Checkout Process:
Some users were uncertain about the steps in the checkout process. Consider
adding progress indicators and clearer labels.
Payment Method Explanation:
Users desired more information about each payment method. Include a tooltip or
information icon to explain payment options.
Visual Feedback on Product Addition:
Users wanted more visual confirmation when adding items to the cart. Consider
adding an animation or confirmation message
 Delivery Time Notification:
Users expressed a desire for more detailed delivery time information. Consider
providing a real-time countdown or more precise estimates.

Step 5: Iterate and Refine

Implement the identified improvements in the Figma prototype.
Iterate the design based on usability testing feedback.

IMPLEMENTATION:
Prototypes for our grocery apps:
SPLASH SCREEN LOGIN SCREEN
Prototypes for location and home screen.

LOCATION HOME
We are going to design a screen to search by a item and by a Recipe:

SEARCH SCREENS
CATEGORIES MY ORDERS
 BASKET

RESULT:
Thus we have designed the prototypes for our BaseGro app successfully.