BONAFIDE CERTIFICATE

UI AND UX DESIGN LABORATORY

UNIVERSITY REGISTER NUMBER

Certify that this is bonafide record of practical work done by

Mr./Mrs. …………………………………………………………………… of
…………………. Department in the
…………………………………………………….. Laboratory during the
semester ………….. Year ……………………… and submitted for the
University Practical Examination conducted on ………………….. at the
CHRIST THE KING ENGINEERING COLLEGE, KARAMADAI,
COIMBATORE-641 104.

Lab in-charge Head of the department

Internal Examiner External Examiner

 INSTITUTION

VISION

To be an institute of excellence in Technical Education and training individuals

focusing on the needs of the Nation and Society in tune with Technological
Developments.

MISSION

Our Mission is to produce Disciplined and Quality Technocrats through

Academic Programme of noted excellence to serve the Society.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VISION

To excel in the field of Computer Science and Engineering, to meet the emerging
needs of the industry, society, and beyond.

MISSION

1) To facilitate quality education to meet the need of profession and society.

2) To equip students for emerging technologies with global standards and ethics
that aid in societal sustainability.

3) To promote research based projects in the emerging areas of computer

technology.
 CCS370 / UI AND UX DESIGN LABORATORY

COURSE OBJECTIVES:

 To provide a sound knowledge in UI & UX

 To understand the need for UI and UX
 To understand the various Research Methods used in Design
 To explore the various Tools used in UI & UX
 Creating a wireframe and prototype

LIST OF EXPERIMENTS

1. Designing a Responsive layout for an societal application

2. Exploring various UI Interaction Patterns
3. Developing an interface with proper UI Style Guides
4. Developing Wireflow diagram for application using open source software
5. Exploring various open source collaborative interface Platform
6. Hands on Design Thinking Process for a new product
7. Brainstorming feature for proposed product
8. Defining the Look and Feel of the new Project
9. Create a Sample Pattern Library for that product (Mood board, Fonts, Colors
based on UI principles)
10. Identify a customer problem to solve
11. Conduct end-to-end user research - User research, creating personas, Ideation
process (User stories, Scenarios), Flow diagrams, Flow Mapping
12. Sketch, design with popular tool and build a prototype and perform usability
testing and identify improvements
Total : 30 PERIODS

COURSE OUTCOMES:
On completion of the course, the students will be able to:
CO1:Build UI for user Applications
CO2:Evaluate UX design of any product or application
CO3:Demonstrate UX Skills in product development
CO4:Implement Sketching principles
CO5:Create Wireframe and Prototype
S No. DATE NAME OF THE EXPERIMENT MARK SIGN
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.

 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

3. ICONOGRAPHY:
Iconography refers to the use of icons, which are simple, recognizable symbols created byuser
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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

UI FOR GROCERY APP:

RESULT:
Thus we have developed an User Interface with proper UI Style Guides Successfully.
 lOMoARcPSD|335 164 46

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:
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

IMPLEMENTATION:
Wireframes for our grocery apps:
SPLASH SCREEN LOGIN SCREEN
 lOMoARcPSD|335 164 46

LOCATION HOME

We have designed wireframes for Splash screen, Login Screen, Location, Home Screen .
 lOMoARcPSD|335 164 46

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 .
 lOMoARcPSD|335 164 46

CATEGORIES MY ORDERS

BASKE
T
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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 oftheir
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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

EXP NO: 6

DATE: HANDS ON DESIGN THINKING PROCESS FOR BASGRO 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 wordof
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.
 lOMoARcPSD|335 164 46

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, orother
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:
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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 themwith
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.
 lOMoARcPSD|335 164 46

EXP NO: 7
BRAINSTORMING FEATURE FOR PROPOSED PROJECT
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 themto
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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

EXP NO: 8
DEFINING THE LOOK AND FEEL OF THE BASGRO APP
DATE:

AIM:
To define the look and feel of our project of building grocery delivery app BasGro.
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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

EXP NO:9
CREATE A SAMPLE PATTERN LIBRARY FOR BASGRO (MOOD
DATE: BOARD,FONTS,COLORS BASED ON THE UI PRINCIPLES)

AIM:
To Create a sample pattern library for our product BasGro.
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 personalityof
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
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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 BasGro.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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:
 lOMoARcPSD|335 164 46

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
 lOMoARcPSD|335 164 46

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 BasGro 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:
 lOMoARcPSD|335 164 46

EMPATHY MAP:

USER PERSONA:
 lOMoARcPSD|335 164 46

USER JOURNEY MAP:

FLOW DIAGRAM:
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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.
 lOMoARcPSD|335 164 46

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
 lOMoARcPSD|335 164 46

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
 lOMoARcPSD|335 164 46

Prototypes for location and home screen.

LOCATION HOME
 lOMoARcPSD|335 164 46

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

SEARCH SCREENS
 lOMoARcPSD|335 164 46

CATEGORIES MY ORDERS
 lOMoARcPSD|335 164 46

BASKET

RESULT:
Thus we have designed the prototypes for our BaseGro app successfully.
 CCS370
UI AND UX DESIGN
Viva Questions

1. Define divergent thinking.

2. What is user interface(UI) design?
3. List the skills need for UI/UX designer.
4. List the essential steps for successful UX design.
5. Define convergent thinking.
6. Define branding.
7. List the elements of UX design.
8. What is meant by Gestalt?
9. Why you should care about user experience?
10. What are the benefits of UX research?
11. What is responsive design?
12. What is a wire flow?
13. What is a high-fidelity prototype?
14. What is usability Testing ?
15. What is reverse brainstorming ?
16. What is meant by personas?
17. What is reverse brainstorming?
18. List the steps in creating the personas.
19. Draw the template of user stories.
20. What is a design patterns?
21. List the factors considered for ux.
22. What are the 7 steps of UX design process?
23. List the wire frame types.
24. List the type of prototypes.
25. List out the convergent thinking characteristics?