CCS370

UI AND UX DESIGN

1
2
 TABLE OF CONTENTS

S.NO DATE EXPERIMENT TITLE PAGENO MARKS SIGNATURE

1a. Introduction to UI and UX 4

Design a responsive Layout for

1b. 8
an societal application

Exploring various UI
2. 12
Interaction Patterns Definition

3. UI Style Guides 15

Developing Wireflow diagram

4. 20
for application using Figma
Explore various open source
5. 24
collaborative interface platform
Hands on design thinking
6. 35
process for a new product

Brainstorming feature for

7. 38
proposed product

Defining the look and feel of the

8. 41
new project

Create a sample pattern library

9. 44
for the product

Identify a customer problem to

10. 47
solve

Conduct end-to-end user

11. 50
research

Design, Build a prototype and

12. 55
perform usability testing

3
 Ex.no:1a

Date: Introduction to UI and UX

Aim:

To study about UI and UX design.

User Interface:

UI stands for User Interface or User Interface Design. It’s also sometimes known as user
interface engineering. UI is the design of user interfaces for machines: how a product looks
and feels, not how it functions. UI Design is the process of making the user's interaction as
simple and efficient as possible, in terms of accomplishing their goals (also known as user-
centered design). UI design is the merger of user needs and visual design. The result of UI
design is a set of high-resolution wireframes (a visual representation of a product).

User Experience:

UX stands for user experience or user experience design. It’s also sometimes abbreviated as
UXD, UED or XD. UX is the naked experience of a product: how a product functions, not how
it looks. UX Design is the process of enhancing user satisfaction of a product through increased
usability, accessibility, and pleasure provided in the interaction with the product. User
experience design encompasses note only traditional human–computer interaction design, but
also all aspects of a product or service as perceived by users. UX design is the merger of user
needs, business vision and technological feasibility. The result of UX design is a set of low-
resolution wireframes (a basic visual guide for how a product will function) that are deeply
connected with user research.

Process of UX:

UX has 3 key phases: discovery, ideation, and validation. However, UX design is cyclical and
you wil often need to repeat certain steps and even the entire process multiple times. The final
outcome will be a set of low-resolution wireframes: a draft of the function and structure of a
product

4
UI/UX BASICS:

1. Discover: UX always starts with discovery—interviewing potential customers to understand

what the targeted audience needs and talking to stakeholders to understand their goals and
competitive analysis Discovery is all about WHY - xxx. During discovery you will validate
your problem (your product is there to solve that problem), identify your end users, and
determine project goals. Methods:

● User Research (Interviews, Ethnography)

● Empathy Mapping

● Task Analysis

● Stakeholder Mapping

● Service Blueprints

● Analytics and Heuristics

● Competitive Analysis Outcome:

● Problem Validation, User Personas, Project Goals

2. Ideate: Next comes ideation using a variety of tools to imagine a solution that solves the
user problem, while aligning with the company goals within technological possibility. Ideation
is the process of finding ou HOW. Designers will implement a variety of tools to figure out
how to solve the user problems. This process is very much like a funnel, where the solution is
very wide at the beginning, and the goal of the process is to quickly, envision and test products
with target customers in order to pivot and define During ideation you will organize your
discovery, explore options, and develop wireframes and prototypes.

Methods:

● Sketching Wireframes

● Information Architecture

● Journey Mapping / Page Flows

● User Journey Writing

● Paper Prototypes

5
● Interaction Design Outcome:

● Solution Exploration

3. Validate (Test, Prototype):The UX process ends with validation—the testing of wireframes

and prototypes to iterate on the interface until it’s intuitive and delightful. Validation is when
we finally know WHAT we’re building During this phase, designers will create wireframes or
prototypes, and test them with users during a process called usability testing to evaluate how
an actual user will react to the product. The designer observes, asks open-ended questions and
iterates on the wireframes based on this feedback. Validation testing is giving those wireframes
or prototypes to real users. You’re tracking actual interaction with the prototype here as well
as confirming previously held assumptions. The results of validation testing should be changes
in flow and layout, though likely not scope anymore. During validation you wil validate your
ideas, learn, and plan for the next iteration.

Methods:

● Accessibility

● Usability

● Testing

● Feedback integration

● Interactive Design

● Retrospectives Release Outcome:

● Solution Scalability, Low-Res Wireframes

6
Result:

Thus the UI and UX design was studied.

7
 Ex.no:1b
Date: Design a responsive Layout for an societal application

Aim:

To design responsive layout for a societal application using figma.

Procedure:

➢ Open your web browser and go to figma.com.

➢ Look for a button that says "Sign in" at the top-right corner of the page and click
on it.

➢ You'll see a box where you can type your email address or the username you
used to sign up for Figma.

➢ Below the email or username box, there's another box for your password. Type
in the password you chose when you signed up.

➢ Once you've entered your email/username and password, click on the "Log in"
button below.

➢ Take a look around your Figma dashboard to see your projects, recent files, and
other info.

Steps:

o Click on frame icon ,and select the frame size on the right corner.

o Set status bar using shape tool by using draw a rectangle.

o Insert the things like clock ,signal ,battery using text tool ,and shapes tool.

o And group it using Ctrl+G or right click and select group selection.

o Create nave bar using shapes tool and add icons with the plugins.

▪ Click on the resources icon and choose the plugin option, search for iconduck
plugin then enter the resource name you need for nav bar icon.

▪ Create search bar using a rectangle and add some highlights.

8
 o Create the product section by adding a shape from the shapes tool and add image by
using the add image option in the shapes tool select the image form your local device.

o Next create the events section in the bottom that is same like the product section.

o Create a new frame and create event page.

o First add the back navigation arrow in the top of the page by creating the shapes tool
and add the arrow by using the plugin ,and group it.

o Add the event by using the shapes tool and add image for the event and also buttons
,some decorations on it.

o Now duplicate the first created event bar using Ctrl+D shortcut and move the duplicate
for the next event.

o Do this for fill the page.

Create a frame

o Open Figma and create a new design file

o Click F on your keyboard and pick a frame; iPad Pro 12.9 has a 1024px canvas

Define your columns and rows

o With your frame selected, go to the right-hand Properties panel

o Under Layout Grid, click on Add Grid to create a new grid

Configure your layout grid

o Under Columns, set the number of columns to 12

o For the gutter size (space between columns), set it to 16px
o Choose your preferred alignment for the grid. In this case, we’ll select Stretch

Set margin

o Adjust the margin size to 88px for the space outside the layout grid.

9
Add grid spacing

o Under Grid, set the spacing to 8px. This spacing defines the grid that elements will
snap to within each column

Design within the grid

o You can now design within this frame using the 12 columns, 16px gutters, 88px margin,
and 8px grid spacing as a guide for precise alignment

Prototype:

▪ To create prototype select the prototype section in the Inspector side.

▪ Click the component that you want to redirect to the next page.

▪ And click the plus icon and drag and drop to the next page.

▪ Go to Event page and click the arrow and click the plus icon and drag and dop
to the home page.

▪ Now press the play button in the inspector panel.

The page redirect to the prototype section that page guide you to the next step for the prototype

10
Output:

Result:

Thus the responsive layout for an societal application using figma was designed

successfully.

11
Ex.no:2
Date: Exploring various UI Interaction Patterns Definition

Aim:

To explore various UI interaction patterns.

UI Pattern Design:

UI pattern design refers to the process of creating reusable design systems for common user
interface (UI) problems. It helps to improve the usability and consistency of user interfaces,
making it easier for users to navigate and interact with digital products. Explore the important
aspects of user interface design and learn more about how it helps to create more efficient and
user-friendly digital products.

Importance of UI Pattern Design

UI pattern design is important because it simplifies the design process and makes
it more efficient Some of the benefits of UI pattern design are mentioned further

Consistency: UI patterns provide consistency to user interfaces. Users are accustomed to

certain patterns, and they expect to see them across different interfaces.

Reduced Learning curve: UI patterns reduce the learning curve for users. Once they learn
how to interact with a pattern, they can apply that knowledge to other interfaces that use the
same pattern.

Better User Experience: UI patterns are designed to be user-friendly. They make it easy for
users to interact with interfaces and achieve their required goals.

Common UI Design Patterns

Common UI (User Interface) design patterns are recurring solutions or best practices that
designers and developers use to solve specific design problems. These patterns help create a
consistent and user-friendly experience for users. Some common UI design patterns are
mentioned below:

12
● Navigation Patterns: Navigation patterns, such as the navbar, sidebar menu, and tabs,
provide users with structured and intuitive ways to move between different sections or pages
within a website or application.

● Form Patterns: Form patterns, including input fields, form validation, and wizards, facilitate
the collection of user input, ensure data accuracy, and guide users through complex data entry
processes.

● Card Patterns: Card patterns, featuring individual content containers, enable the structured
and visually appealing display of items like articles, products, or user profiles within a user
interface.

● Carousel Patterns: Carousel patterns, such as image carousels and testimonial carousels,
create dynamic and engaging displays of content, allowing users to cycle through images or
testimonials for an interactive experience.

● Input and Feedback Patterns Input and feedback patterns are used to design interfaces that
provide users with feedback when interacting. The UI/UX design examples of input and
feedback patterns include tooltips, progress bars, and error messages. These patterns help
improve the user experience by providing clear and concise feedback on their actions.

● Content Display Patterns Content display patterns are used to design interfaces that present
content in an organized and easy-to-read manner. Examples of content display patterns include
grids, carousels, and lists These patterns help improve content’s readability and make it easier
for users to find the information they seek.

● Interaction Patterns Interaction patterns are used to design interfaces that allow users to
interact with the application Examples of interaction patterns include drag and drop, swipe, and
pinch to zoom. These patterns help create a more engaging user experience by providing
intuitive and natural ways to interac with the interface.

● Responsive Design Pattern Responsive design adapts user interfaces to various devices
using fluid grids, flexible images media queries, and modern CSS. It prioritizes mobile,
enhancing features for larger screens ensuring a consistent, user-friendly experience across
devices. User Design Pattern Libraries User design pattern libraries, also known as UI
component libraries or design systems, are collections o reusable design elements and
components that streamline the process of creating user interfaces. Several popular design
pattern libraries and frameworks are as follows:

13
● Material-UI: A popular UI framework based on Google’s Material Design guidelines. It
offers a wide range of pre-designed components for web applications.

● Apple’s Human Interface Guidelines (HIG): Apple provides design guidelines, templates,
and resources for creating iOS and macOS applications following Apple’s design principles.

● Atlassian Design System: Created by Atlassian, this design system and component library
offers a unified approach to building applications and products for teamwork and collaboration.

● Bootstrap: A widely used open-source CSS framework with a set of pre-designed

components and styles to create responsive and visually appealing websites.

● A design system and UI library developed by Alibaba, providing a collection o high-quality

components for building web and mobile applications.

Output:

Result:

Thus the UI Interaction pattern was explored successfully

14
Ex.no:3
Date: UI Style Guides

Aim:

To develop an interface with proper UI Style Guides.

Style Guides:

User interface style guides are design guidelines or standards and a development tool for
designing UI elements and interactions for various websites or app products. These document
usually contains the essential details relating to your product’s user interface to ensure
consistency across different screen sizes, design teams, companies, and brands.

1. Color Palette: Specifies the colors used in the interface, including primary and secondary
colors, as well as their use in different contexts.

2. Typography: Defines the font choices, sizes, and styles for various text elements such as
headings subheadings, and body text.

3. Layout and Grid System: Establishes a grid system for layout consistency, defining margins,
padding, and spacing.

4. Icons and Imagery: Provides guidelines for the use of icons, images, and other visual
elements, ensuring a cohesive design.

5. Buttons and Forms: Defines the styles and states of interactive elements like buttons, form
fields, and checkboxes.

6. Responsive Design: Guides the adaptation of the interface to different screen sizes and
devices.

7. Accessibility: Includes guidelines to ensure the design is accessible to users with disabilities.

8. Animation and Transitions: If applicable, provides guidelines for animations and transitions
to enhance the user experience.

9. Documentation: Documents the UI components with examples, code snippets, and

explanations for easy implementation by developers.

15
10.Branding Guidelines: Incorporates any specific branding elements or guidelines to maintain
brand consistency.

Create a Style Guide in Figma:

Open your Figma file and select a frame.

Choose a Colour Palette:

Step 1: Choose your color categories Choose three categories of colours: a primary colour, a
secondary colour, and greys (neutral).

Step 2: Generate Shades for the Colours Generating shades for your colour palette helps cater
to varied use cases. The Figma plugin Tints and Shades helps you generate colour shades.
Select a colour and click on Tints and shades to generate the shades. Auto layout (Shift + A)
the generated shades to give them one frame, and arrange them vertically/horizontally.

Step 3: Make the colour shades into colour styles. To make the generated colours styles, first
select the frame and hit the Enter key in order to select the boxes in the frame individually.
Rename the individual boxes, using the name of the colour category differentiating with
numbers – for example grey 01, and so on. If you renamed your boxes successfully, the names
will appear on the left hand side of your canvas. After do this, need to make your colours into
styles. The Figma plugin Styler used to style your colours. Click on the frame, selecting
individual boxes using the Enter key.If do this correctly, then get a notification as you can see
in the image above. Choose Your Typography Choosing the right font family, font sizes, and
font weights is very important for a good

Style guide

Step 1: Open a frame after choosing a font of your choice.

Step 2: Establish the page hierarchy Decide on how many headlines, subtitles, body and
captions your design might have. Remember that you can communicate hierarchy through
differences in font weight (light, medium, regular), size, letter spacing, and case.

Step 3: Make your fonts styles After choosing your font weights, size, and letter spacing, it's
time to make them styles. Just like you did for your colour palette, select the fonts and use the
plugin Styler to create them as styles.

16
NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger
font sizes for web. The text styles will appear on the right hand side of your screen. Choose
Your Iconography Next up, we have iconography. Icons are an essential part of our designs, as
they visually express actions and objects in our interfaces. They help the designer further
communicate the meaning of an action or screen, like the home icon, search icon, and more.
You can get icons from plugins like Iconify, Font Awesome, and libraries like feathericons and
Google icons.

Step 1: Select a frame. Go to the frame tool and select a frame for your iconography.

Step 2: Get all your icons Now you'll need to get the icons you need for your design. Make
sure you include different states of each icon, like filled, outline, and so on. NB: make sure the
sizes of your icons are consistent. Setup Your Layout Grids Grids are a fundamental part of
any style guide as they help achieve better alignment, hierarchy, and consistency in your
designs. Setting a standard for your grid depends on whether you are designing for web or
mobile – each has different standards. For example, you should use a 960 grid (12 or 16
columns) when designing for web. First, go ahead and

Select a frame.

Step 1: Add a layout grid Then get your layout grid from the left hand panel of your canvas.
Input your desired number of columns for the frame and values for the margin and gutter (that
is the vertical part of the frame). Next up, you will need to include grids for the horizontal part
of the frame, or the rows. Input your desired value for rows, margins, and gutter. Choose your
components The components you choose play an important part in your user interface.
Components typically include text fields, button states, checkboxes, alerts and notifications.
Define Your Input fields Input fields, as the name implies, allow users to input text in a UI.
And they need to be styled like everything else. First, as always, select a frame.

Step 1: Design input fields in various states You'll want to design each input field according to
its state, like default, disabled, active, and error.

Step 2: Add icons to your input fields. Design Your Buttons Your buttons should include
primary buttons and secondary buttons in their different states, like disabled, default, hover and
pressed. Primary buttons are usually strong visual indicators to help users complete their
journeys – for example 'next', 'submit', and so on. Secondary buttons are usually the alternatives
to the primary actions, like 'cancel', 'back', and so on. The image above shows two buttons. The

17
button on the left is a primary button while the button on the right is a secondary button. First,
select a frame.

Step 1: Design the primary button First you'll want to design a primary button in its various
states: default, hover, pressed and disabled.

Step 2: Design the secondary button Then you'll design a secondary button in its various states:
default, hover, pressed and disabled.

Step 3: Check buttons with icons You might want to check how the various buttons would look
like with icons. Add icons to your primary and secondary buttons in all their states.

Checkboxes

You'll use checkboxes mostly when users might need to select more than one option from a list
– that is, each checkbox is independent of the others in the list/form. First, select a frame.

Step 1: Design your checkboxes You'll want to include various states like enabled, disabled,
hover, focused and pressed states. Alerts and notifications With real time alerts, users can get
notifications of reminders, errors, successes and so on. This reduces the risk of hacking,
incorrect input, and loss of important information. First, select a frame.

Step 2: Design notification and alerts When you design your alerts, make sure to use the correct
icons for warning, error, success and success states. Live

18
Output:

Result:

Thus the UI styles guide was developed successfully.

19
Ex.no:4
Date: Developing Wireflow diagram for application using Figma

AIM:

To Develop a Wireflow diagram for application using Figma.

Wireflow diagram:

In UI/UX design, a wireflow diagram is a visual representation that combines elements of both
wireframes and flowcharts. It provides a comprehensive view of the user interface (UI) design
by illustrating the flow of screens and user interactions within a digital product. Wireflows are
particularly useful for conveying not only the layout and structure of individual screens (like
wireframes) but also the connections and transitions between those screens.

Key components and characteristics of a wireflow diagram:

Wireframes: Wireframes are basic, low-fidelity representations of individual screens or pages

in a digital interface. In a wireflow, each screen is depicted as a wireframe, showing the
essential elements such as buttons, text, images, and other UI components.

Flowchart Elements: The wireflow incorporates flowchart-like elements, such as arrows or

lines, to illustrate the sequence of screens and the user's navigation path. These connections
represent the transitions between different states or screens.

User Interactions: Wireflows include annotations or symbols to indicate user interactions,

actions, or behaviors on each screen. This helps in conveying how users move through the
interface and what actions they can take.

Task Flows: The wireflow diagram often includes task flows, outlining the step-by-step
processes or user journeys within the application. This is particularly useful for understanding
complex interactions or scenarios.

Annotations: Detailed annotations are added to each screen, providing information about
specific UI elements, functionality, or any additional notes relevant to the design. Annotations
enhance communication between designers and other stakeholders.

20
Visualization of User Flow: The primary purpose of a wireflow is to visualize the user flow
within the digital product. It helps designers and stakeholders understand how users will
progress through the application and experience different screens.

Collaborative Tool Integration:Wireflows are often created using specialized design tools
such as Figma, Adobe XD, Sketch, or similar applications. These tools provide features
specifically designed for creating and sharing wireflow diagrams, fostering collaboration
within design teams.

Iterative Design: Like wireframes, wireflows are subject to iteration and refinement. As the
design process progresses, updates can be made to the diagram to reflect changes,
improvements, or new insights.

Creating a wireflow diagram in Figma tool:

1. Define User Flows: Clearly understand and define the user flows you want to illustrate in
your wireflow diagram. Identify the key screens and interactions that users will go through.

2. Create Wireframes: Develop wireframes for each screen in your user flows. Use Figma's
design tools to create simplified representations of the interface, focusing on layout, structure,
and content placement.

3. Use Frames for Screens: In Figma, each screen or wireframe can be placed within a frame.
Create a frame for each screen to organize and structure your design.

4. Connect Frames: Use Figma's line tool or arrows to connect frames, indicating the flow from
one screen to another. This helps visualize how users will navigate through the application.

5. Add Annotations: Include text annotations or notes for each frame to explain the
functionality, interactions, and any dynamic elements. This adds clarity for both designers and
developers.

6. Utilize Figma Prototyping: Leverage Figma's prototyping features to create interactive links
between frames. Define interactions like button clicks, transitions, and animations to simulate
the user experience.

7. Review and Iterate: Share the wireflow with stakeholders, such as team members or clients,
and gather feedback. Use this feedback to iterate and refine the wireflow diagram.

21
8. Collaborate with Team: Collaborate with your design team, developers, and other
stakeholders. Figma allows real-time collaboration, making it easy for multiple team members
to work on the wireflow simultaneously.

9. Maintain Consistency: Ensure consistency in design elements, terminology, and interactions

across the wireflow. Figma's design system features can help maintain a cohesive user
experience.

10. Use Figma Components: If your wireflow involves recurring elements, consider using
Figma components. Components allow you to create reusable design elements, ensuring
consistency and making updates easier.

11. Organize Layers and Frames: Keep your Figma project organized by naming layers and
frames appropriately. This helps maintain clarity, especially as your wireflow diagram becomes
more complex.

Output:

22
Result:

Thus the Wireflow diagram for application using open source software was developed.

23
Ex.no:5
Date: Explore various open source collaborative interface platform

AIM:

To explore and understand the various open source collaborative interface Platform.

Open source collaborative interface platform:

An open source collaborative interface platform is a software platform that allows users to
collaborate on projects in a decentralized and open manner. This type of platform is typically
based on open source software, which means that the code is freely available and can be
modified and distributed by anyone.

This makes open source collaborative interface platforms very flexible and adaptable,
as users can customize them to meet their specific needs. One of the key benefits of using an
open source collaborative interface platform is that it can help to reduce costs. Because the
software is free to use, there are no licensing fees to pay. Additionally, open source platforms
are often very scalable, meaning that they can be used to support a large number of users and
projects without incurring significant additional costs. Another benefit of using an open source
collaborative interface platform is that it can help to improve security. Because the code is open
source, anyone can review it for potential security vulnerabilities. This means that any security
vulnerabilities that are found can be fixed quickly and efficiently.

Additionally, open source platforms are often very well-supported by the community,
which means that users can get help with any problems they encounter quickly and easily.
Finally, open source collaborative interface platforms can help to improve transparency and
accountability. Because the code is open source, anyone can see how the platform works and
how their data is being used. This can help to build trust between users and the platform
operators. Additionally, open source platforms are often governed by a transparent and
democratic process, which means that users have a say in how the platform is run. These
platforms often provide features such as:

24
1. Figma:

Figma is a cloud-based design tool that allows real-time collaboration. Multiple team members
can work on a project simultaneously, making it great for UI and UX design collaboration.
Features: Prototyping, design versioning, real-time collaboration, and commenting.

1. Real-time collaboration: Multiple users can work on the same design file
simultaneously, seeing each other's changes in real-time. This is incredibly useful for
remote teams or distributed teams working on the same project.

2. Cross-platform compatibility: Figma works on any operating system (Windows,

macOS, Linux) and in any modern web browser, making it accessible to designers
regardless of their preferred platform.

3. Vector-based editing: Figma uses vector graphics, allowing designers to create

scalable designs that can be easily resized without loss of quality. This is especially
important for designing interfaces that need to adapt to different screen sizes and
resolutions.

4. Prototyping: Figma includes prototyping capabilities, allowing designers to create

interactive prototypes directly within the same tool they use for design. This streamlines
the workflow and eliminates the need to switch between different software programs.

25
2. InVision:

InVision is collaboration-centric. The platform excels at providing a real-time workspace for

seamless team alignment. It supports wireframing and prototyping and offers a plethora of
resources. InVision will permit users to connect with peers and ambassadors, further enhancing
the user experience.

Key Highlights:

1. Prototyping and Animation: InVision is known for its robust prototyping

capabilities, allowing designers to create interactive prototypes with transitions,
animations, and gestures. It's particularly useful for creating clickable prototypes that
simulate the user experience of an app or website.

2. User Testing: InVision offers features for conducting user testing on prototypes,
including the ability to create user testing sessions, gather feedback from testers, and
analyze user behavior. This makes it a valuable tool for validating design decisions and
iterating on designs based on user feedback.

3. Collaboration: Like Figma, InVision emphasizes collaboration and allows multiple

users to work on the same project simultaneously. Designers can leave comments and
feedback directly on the prototypes, facilitating communication and collaboration
within the team.

26
3. UXPin:

UXPin focuses on improving team efficiency by minimizing communication barriers. It

empowers UX designers and developers to create consistent interfaces with ease. The platform
promotes prototypes that closely resemble the final product, fostering smoother handoffs
between design and development.

Key Highlights:

1. Design and Prototyping: Like Figma and InVision, UXPin allows designers to create
designs and interactive prototypes for websites, web applications, and mobile apps. It
offers a range of design tools and features for creating wireframes, mockups, and high-
fidelity prototypes.

2. Component-based Design: UXPin is built around a component-based design

approach, allowing designers to create reusable components and design systems that
can be easily shared and reused across projects. This promotes consistency and
efficiency in the design process.

3. Code-Based Design: One unique feature of UXPin is its support for code-based design.
Designers can use HTML, CSS, and JavaScript directly within the UXPin editor to
create more interactive and dynamic prototypes. This can be particularly useful for
designers with coding skills or for prototyping complex interactions and animations.

27
4. Sketch:

Sketch, like Figma, supports collaborative design, offering tools to simplify the process. It’s
known for creating playable prototypes that facilitate developer handoff. Sketch’s user
interface design tools, real-time collaboration, and vibrant community make it a robust
alternative.

Key Highlights:

1. Vector Editing: Like Figma, Sketch is based on vector editing, allowing designers to
create scalable designs that can be easily resized without losing quality. This is essential
for designing interfaces that need to adapt to different screen sizes and resolutions.

2. Mac Only: Unlike Figma and some other tools that are web-based or cross-platform,
Sketch is available exclusively for macOS. This makes it a preferred choice for
designers who work on Mac computers.

3. Plugins and Integration: Sketch has a rich ecosystem of plugins developed by both
Sketch and third-party developers. These plugins extend the functionality of the tool,
allowing designers to automate tasks, access design resources, and integrate with other
tools in their workflow.

28
5. Mockplus:

Mockplus provides a comprehensive product design platform ideal for collaboration, design
systems, and prototyping. Dynamic and reusable design systems ensure consistency across
your team. This platform is straightforward, boasts a vast user base, and offers ample learning
resources.

Key Highlights:

1. Easy-to-Use Interface: Mockplus is known for its user-friendly interface, making it

easy for designers of all skill levels to create prototypes quickly and efficiently. Its drag-
and-drop interface allows designers to build prototypes without needing to write any
code.

2. Pre-designed Components: Mockplus comes with a library of pre-designed

components and templates, including buttons, forms, navigation bars, and more.
Designers can simply drag these components onto the canvas and customize them to fit
their design needs, saving time and effort.

3. Interactivity and Animation: Mockplus supports interactivity and animation,

allowing designers to create interactive prototypes with clickable buttons, transitions
between screens, and animations. This helps designers convey the user experience of
the final product and gather feedback from stakeholders.

29
6. Adobe XD:

Figma’s Rival Adobe XD, compared to Figma, is an established rival. It supports web, app,
brand, and game design. It’s backed by a robust, active community and offers plenty of
resources. Adobe XD is relatively easy to learn and supports coediting, allowing collaborative
work with team members.

Key Highlights:

1. Design and Prototyping: Adobe XD combines design and prototyping capabilities in

a single tool, allowing designers to create high-fidelity designs and interactive
prototypes within the same interface. Designers can easily switch between design mode
and prototype mode to iterate on their designs and test interactions.

2. Vector-based Design: Like Figma and Sketch, Adobe XD is based on vector graphics,
enabling designers to create scalable designs that can be easily resized without losing
quality. This is essential for designing interfaces that need to adapt to different screen
sizes and resolutions.

30
7. Penpot:

Penpot stands out as a free, open-source platform ideal for cross-domain teams. It allows for
seamless collaboration and is compatible with most vectorial tools due to its use of SVG.
Resources, including templates, glossaries, and a growing community, ensure you get the most
from this platform.

Key Highlights:

1. Open-Source: Penpot is open-source software, which means its source code is freely
available for anyone to use, modify, and distribute. This fosters transparency,
community contribution, and innovation within the design community.

2. Web-Based: Penpot is a web-based tool, which means it runs entirely in the browser
without requiring any installation. This makes it accessible from any device with an
internet connection, regardless of the operating system.

3. Vector-Based Design: Penpot is based on vector graphics, allowing designers to create

scalable designs that can be easily resized without losing quality. This is essential for
designing interfaces that need to adapt to different screen sizes and resolutions.

31
8. io:

Bringing Visions To Life Ideal for UX designers, product managers, and marketers, Proto.io
is a web-based platform that simplifies UI/UX design. It offers a massive library of resources,
including video tutorials and sample projects. While it lacks a forum community, it excels at
helping users bring their visions to life.

Key Highlights:

1. Components and Libraries: Penpot supports the creation of reusable components and
design libraries, allowing designers to maintain consistency across their designs and
easily reuse elements across different projects. This promotes efficiency and
streamlines the design process.

2. Real-Time Collaboration: Penpot includes collaboration features that allow multiple

users to work on the same design file simultaneously. Designers can see each other's
changes in real-time, making it easy to collaborate with team members and
stakeholders, regardless of their location.

3. Prototyping: Penpot includes prototyping capabilities, allowing designers to create

interactive prototypes directly within the same tool they use for design. This streamlines
the workflow and eliminates the need to switch between different software programs.

32
9. Moqups:

Moqups simplifies UI prototypes, wireframes, and sketches with its SVG-based platform.
Whether you need a quick frame or a comprehensive mockup, Moqups is intuitive and
straightforward. It offers popular drag-and-drop elements and a range of fonts.

Key Highlights:

1. User-Friendly Interface: Moqups offers an intuitive and easy-to-use interface, making

it accessible to designers of all skill levels. Its drag-and-drop functionality allows users
to quickly create and customize wireframes and mockups without needing to write
code.

2. Extensive Library of Components: Moqups provides a comprehensive library of pre-

designed components, including UI elements, icons, shapes, and symbols. Designers
can easily drag these components onto the canvas and customize them to fit their design
needs, speeding up the prototyping process.

3. Collaboration and Sharing: Moqups includes collaboration features that allow

multiple users to work on the same project simultaneously. Designers can invite team
members and stakeholders to view and edit designs in real-time, facilitating
communication and collaboration within teams.

33
10.Affinity Designer:

Affinity Designer streamlines mockup design, logo creation, and UI design. Known for its
illustration capabilities, it’s excellent for beginners. However, it lacks some collaborative
features found in Figma. Still, the Affinity Designer community and ample resources make it
a strong choice.

Key Highlights:

1. Vector Editing: Affinity Designer is primarily focused on vector graphics, allowing

designers to create scalable designs that can be resized without losing quality. It
provides powerful tools for drawing, editing, and manipulating vector shapes, curves,
and paths.

2. Pixel Persona: Affinity Designer includes a Pixel Persona mode, which allows
designers to work with raster (pixel-based) graphics in addition to vectors. This makes
it versatile for creating both vector illustrations and pixel-based artwork, such as photo
editing or digital painting.

Result:

Thus the various open source collaborative interface platform was explored successfully.

34
 Ex.no:6

Date: Hands on design thinking process for a new product

Aim:

To describe the hands-on design thinking process for Food delivery App.

Hands-on design thinking:

Empathize:
● Conduct user interviews with potential customers, such as busy professionals,
students, and families, to understand their food ordering habits, pain points, and
preferences.
● Observe how people currently use existing food delivery apps, noting any
frustrations or areas for improvement.
● Analyze market research and trends in the food delivery industry to identify
emerging needs and opportunities.
Define:
● Create user personas representing different segments of your target audience,
such as "Working Professional Wendy" and "Busy Parent Brian."
● Define the primary problem your food delivery app will address, such as the
need for convenient, affordable, and reliable meal options delivered quickly to
customers' doorsteps.
● Develop a clear problem statement that encapsulates the challenges users face
and the value proposition of your app.
Ideate:
● Brainstorm potential features and functionalities for your food delivery app,
considering both essential requirements and innovative ideas to differentiate
your product.
● Sketch out rough wireframes or use digital tools like Figma to create low-
fidelity prototypes of your app's interface and user flow.
● Explore creative solutions to common pain points in food delivery, such as
personalized recommendations, flexible delivery options, and transparent
pricing structures.

35
Prototype:
● Develop interactive prototypes of your food delivery app using design tools like
Figma or prototyping platforms like InVision.
● Create multiple iterations of your prototypes to test different design concepts
and gather feedback from stakeholders.
● Focus on creating a seamless user experience that simplifies the process of
browsing menus, placing orders, and tracking deliveries.

Test:
● Conduct usability testing with potential users to evaluate the effectiveness of
your prototypes.
● Observe how users navigate through the app, noting any confusion, frustration,
or areas of improvement.
● Gather feedback on specific features, such as the ordering process, payment
options, delivery tracking, and customer support.
Iterate:
● Use the insights gained from testing to refine and improve your food delivery
app's design.
● Make iterative changes to address usability issues, streamline workflows, and
enhance the overall user experience.
● Continue to iterate on your prototypes based on user feedback until you achieve
a final design that meets the needs of your target audience and aligns with your
business goals.

36
Result:

Thus the design thinking process for Food delivery app was done successfully.

37
 Ex.no:7

Date: Brainstorming feature for proposed product

Aim:

To conduct the brainstorming session for food delivery app

Brainstorming:

1. User Experience Enhancement:

● Personalized Recommendations: Utilize user data to suggest restaurants and dishes

based on past orders and preferences.
● Customizable Menus: Allow users to customize their orders (e.g., extra toppings, sauce
options).
● Real-Time Order Tracking: Provide live tracking of orders from preparation to delivery,
with estimated time of arrival.
● Voice Ordering: Implement voice recognition technology for hands-free ordering,
especially useful while driving.

2. Social Interaction:

● Group Ordering: Enable users to invite friends to collaborate on a single order, with
split payment options.
● Review & Ratings: Allow users to rate and review restaurants and dishes, fostering a
community-driven feedback system.
● Social Sharing: Integrate social media sharing options for sharing favorite meals,
discounts, and promotions.

3. Convenience Features:

● Scheduled Orders: Allow users to schedule food deliveries in advance, ideal for
planning meals for parties or gatherings.
● Favorites& Reorder: Save favorite orders for quick reordering with just a few taps.
● Allergen & Dietary Filters: Implement filters to accommodate dietary restrictions and
allergies, ensuring safe and suitable food options.

38
4. Engagement & Loyalty:

● Reward Programs: Introduce loyalty programs where users earn points for every order,
redeemable for discounts or free items.
● Daily Deals & Discounts: Offer daily specials and discounts to encourage frequent
usage and repeat orders.
● Gamification: Incorporate gamified elements such as challenges or achievements to
incentivize user engagement.

5. Innovation & Differentiation:

● Augmented Reality Menu: Provide an AR feature that allows users to visualize dishes
in their environment before ordering.
● Food Donation Integration: Partner with food banks or charities to allow users to donate
meals with each order.
● Cooking Classes & Recipes: Offer virtual cooking classes or recipe suggestions based
on ordered dishes, promoting culinary exploration.

6. Accessibility Features:

● Text-to-Speech: Provide text-to-speech functionality for visually impaired users to

navigate the app.
● Language Localization: Support multiple languages to cater to diverse user
demographics.
● High Contrast Mode: Enable a high-contrast mode for users with visual impairments.

7. Safety & Transparency:

● Contactless Delivery Options: Allow users to opt for contactless delivery to minimize
physical contact during the pandemic or for hygiene preferences.
● Hygiene Ratings: Display hygiene ratings for restaurants to assure users of food safety
standards.
● Transparent Pricing: Clearly display itemized pricing, including taxes, delivery fees,
and service charges, to avoid surprises at checkout.

8. Environmental Sustainability:

● Green Packaging Options: Highlight restaurants that use eco-friendly packaging

materials to reduce environmental impact.

39
 ● Carbon Emission Tracking: Provide information on the environmental footprint of each
delivery option, promoting eco-conscious choices.

Output:

Result:

Thus the brainstorming session for developing Food Delivery App was conducted successfully.

40
 Ex.no:8

Date: Defining the look and feel of the new project

Aim:

To define the look and feel of the food delivery app.

1. Establish Brand Identity:

• Brand Values: Define the core values and mission of the food delivery app. Is it focused
on convenience, quality, affordability, or sustainability?
• Brand Personality: Determine the personality traits that best represent the app (e.g.,
friendly, reliable, modern).
• Brand Visuals: Choose a color scheme, typography, and imagery that align with the
brand's identity and resonate with the target audience.

2. Define User Interface Design Principles:

• Simplicity: Aim for a clean and intuitive interface that minimizes clutter and
distractions.
• Consistency: Maintain consistency in design elements such as colors, typography,
icons, and layout throughout the app.
• Accessibility: Ensure that the app is accessible to users of all abilities, with clear
navigation and legible text.
• Feedback and Affordance: Provide visual cues and feedback to guide users through the
app and indicate interactive elements.

41
3. Visual Design Elements:
• Color Palette: Choose colors that evoke the desired emotions and reflect the brand's
personality. Consider using a primary color for branding and complementary colors for
accents.
• Typography: Select fonts that are legible on various screen sizes and convey the app's
tone. Use different font weights and styles for hierarchy and emphasis.
• Icons and Illustrations: Use custom icons and illustrations to enhance visual appeal and
communicate concepts effectively. Ensure consistency in style and alignment with the
brand identity.

4. User Experience Design:

• User Flow: Define the user flow through the app, from initial onboarding to order
completion and beyond. Ensure a logical sequence of actions and minimize friction
points.
• Information Architecture: Organize content and features in a hierarchy that is intuitive
and easy to navigate. Prioritize important information and actions for quick access.
• Visual Hierarchy: Use size, color, contrast, and spacing to create a clear visual
hierarchy that guides users' attention and indicates the relative importance of elements
on the screen.

42
5. Prototype and Iterate:
• Create wireframes or low-fidelity prototypes to visualize the app's layout and
functionality.
• Gather feedback from stakeholders and potential users to identify areas for
improvement and iterate on the design.
• Test the prototype with real users to evaluate usability and gather insights for further
refinement.

6. Documentation and Guidelines:

• Document the design principles, visual elements, and interaction patterns in a style
guide or design system.
• Provide guidelines for developers to ensure consistent implementation of the design
across different platforms and screen sizes.
• Continuously update the guidelines as the app evolves and new features are introduced.

Result:

Thus the look and feel of the Food Delivery App was defined successfully.

43
 Ex.no:9
Date: Create a sample pattern library for the product

Aim:

To create a sample pattern library for food delivery app.

Sample Pattern Library:

1. Mood Boards:

a. Modern & Clean:

• Description: This mood board emphasizes simplicity, cleanliness, and a modern

aesthetic.

• Visual Elements: Minimalistic icons, sleek typography, high-quality product imagery.

• Colors: Neutral tones with pops of vibrant accent colors.

b. Friendly & Inviting:

• Description: This mood board focuses on warmth, friendliness, and a welcoming

atmosphere.

• Visual Elements: Playful illustrations, rounded shapes, soft gradients.

• Colors: Warm tones such as oranges, yellows, and pastel hues.

44
2. Fonts:

• Primary Font: Montserrat

• Description: Montserrat is a modern, geometric sans-serif font that is highly

legible and versatile.

• Usage: Headings, titles, and prominent UI elements.

• Secondary Font: Roboto

• Description: Roboto is a clean, neutral sans-serif font that offers excellent

readability in various contexts.

• Usage: Body text, paragraph content, and smaller UI elements.

3. Colors:

a. Primary Palette:

• #F24E1E: Vibrant Orange

• #4ABDAC: Teal Blue

• #FFD166: Sunny Yellow

b. Secondary Palette:

• #2A2D34: Charcoal Gray

• #FFA07A: Light Coral

• #E63946: Watermelon Red

45
UI Principles:

• Simplicity: Keep the interface clean and clutter-free, with ample whitespace and
minimal visual distractions.

• Consistency: Maintain consistency in design elements such as colors, typography, and

icons throughout the app.

• Accessibility: Ensure that the app is accessible to users of all abilities, with clear
navigation and legible text.

• Feedback and Affordance: Provide visual cues and feedback to guide users through the
app and indicate interactive elements.

Result:

Thus the sample pattern library for Food Delivery App was created successfully

46
 Ex.no:10
Date: Identify a customer problem to solve

Aim:

To identify a customer problem and to solve the problem.

Objective:

To investigate the effectiveness of dynamic route optimization algorithms in reducing

delivery times and improving user satisfaction in a food delivery app.

Hypothesis:

Implementing dynamic route optimization algorithms in the food delivery app will
significantly reduce delivery times compared to traditional static routing methods, leading to
higher user satisfaction and retention rates.

Experimental Design:

1. Participants Selection:

• Select a sample of active users of the food delivery app who frequently place
orders for delivery.

• Ensure diversity in demographics, order frequencies, and delivery locations to

capture a representative sample.

2. Experimental Groups:

• Control Group: Users who receive deliveries using the existing static routing
system without dynamic optimization.

• Experimental Group: Users who receive deliveries using the new dynamic route
optimization algorithm implemented in the app.

3. Implementation:

• Develop and implement a dynamic route optimization algorithm within the food
delivery app, utilizing real-time data on traffic conditions, order volumes, and
delivery locations.

47
 • Ensure seamless integration with the app's existing order management and
delivery tracking systems.

4. Data Collection:

• Collect data on delivery times, order accuracy, and user feedback for both the
control and experimental groups over a specified period (e.g., two months).

• Monitor key metrics such as average delivery time, variance in delivery times,
customer complaints related to delays, and user ratings of delivery experience.

5. Experiment Execution:

• Randomly assign users to either the control or experimental group when they
place an order through the app.

• Track the progress of each order in real-time, recording timestamps for order
placement, restaurant preparation, driver pickup, and delivery completion.

• Gather user feedback through in-app surveys or ratings after each delivery to
assess satisfaction levels and identify any issues or improvements needed.

6. Data Analysis:

• Analyze the collected data to compare delivery times between the control and
experimental groups.

• Calculate metrics such as mean delivery time, standard deviation, and

percentage improvement in delivery times for the experimental group.

• Conduct statistical tests (e.g., t-tests, ANOVA) to determine the significance of

differences observed between the two groups.

7. Results Interpretation:

• Evaluate the effectiveness of the dynamic route optimization algorithm based

on the analyzed data and statistical findings.

• Interpret the impact of improved delivery times on user satisfaction, retention

rates, and overall app performance.

• Identify any challenges, limitations, or areas for further optimization in the

implementation of dynamic routing algorithms.

48
 8. Conclusion and Recommendations:

• Summarize the findings of the experiment and their implications for the food
delivery app.

• Provide recommendations for future enhancements or iterations based on the

results obtained.

• Highlight the potential benefits of dynamic route optimization for improving

user experience and business outcomes in food delivery services.

Result:

Thus the customer problem was identified and solved successfully.

49
 Ex.no:11
Date: Conduct end-to-end user research

Aim:

To conduct an end-to-end user research - User research, creating personas, Ideation process
(User stories, Scenarios), Flow diagrams, Flow Mapping.

End-to-End User Research:

1. User Research:

• Methodology: Conduct a combination of qualitative and quantitative research methods,

including surveys, interviews, and competitor analysis.

• Objectives: Understand user behaviors, pain points, preferences, and needs related to
food delivery.

• Key Insights: Gather information on user demographics, ordering habits, delivery

expectations, frustrations with existing apps, and desired features.

2. Creating Personas:

• Persona 1: Busy Professional Emily

• Background: Works long hours, relies on food delivery for convenience.

50
 • Needs: Quick ordering process, healthy meal options, reliable delivery.

• Behaviors: Prefers pre-scheduled orders, values loyalty rewards.

• Persona 2: Student Sam

• Background: Juggles classes and part-time job, budget-conscious.

• Needs: Affordable meal options, late-night delivery, fast turnaround.

• Behaviors: Searches for deals, often orders in groups with friends.

3. Ideation Process:

• User Stories:

• As a busy professional, I want to be able to schedule orders in advance so I can

plan my meals.

• As a student, I want to see budget-friendly options highlighted on the app so I

can save money.

• Scenarios:

• Emily wants to order a healthy lunch for tomorrow's busy workday but doesn't
have time to browse menus during her lunch break.

• Sam and his friends are studying late and want to order pizza for a late-night
study session without breaking the bank.

51
4. Flow Diagrams:

• Ordering Flow Diagram:

• Start: User opens the app.

• Step 1: User selects delivery address.

• Step 2: User browses restaurants or searches for specific cuisine.

• Step 3: User selects items and customizes order.

• Step 4: User proceeds to checkout and selects payment method.

• End: User receives confirmation of order and estimated delivery time.

52
5. Flow Mapping:

• User Flow Mapping:

• Main Flow: Browse > Select > Customize > Checkout > Confirmation

• Alternate Flow 1 (Scheduling): Browse > Schedule Order > Select > Customize
> Checkout > Confirmation

• Alternate Flow 2 (Group Order): Browse > Select Group Order > Invite Friends
> Select > Customize > Checkout > Confirmation

53
Result:

Thus the end-to-end user research for Food delivery app was done successfully.

54
Ex.no:12
Date: Design, Build a prototype and perform usability testing

Aim:

To sketch, design with popular tool and build a prototype and perform usability testing and
identify improvement.

1. Sketching:

• Start by sketching rough wireframes and layouts for key screens of the app, such as the
home screen, restaurant selection, menu browsing, order customization, checkout, and
order tracking.

• Use pen and paper or digital sketching tools to quickly iterate through different design
ideas and concepts.

2. Designing with Popular Tools:

• Choose a popular design tool such as Figma, Sketch, Adobe XD, or InVision to create
high-fidelity mockups based on your sketches.

• Translate your wireframes into polished designs, incorporating visual elements such as
colors, typography, icons, and imagery.

• Ensure consistency in design elements and follow UI/UX best practices to create a
cohesive and user-friendly interface.

3. Building a Prototype:

• Use the chosen design tool to create interactive prototypes that simulate the user flow
and functionality of the app.

• Link different screens together with clickable hotspots and transitions to demonstrate
how users would navigate through the app.

• Include interactive elements such as buttons, dropdowns, sliders, and forms to simulate
user interactions accurately.

55
56
57
4. Performing Usability Testing:

• Recruit participants who represent your target audience for the food delivery app.

• Prepare a usability testing plan with specific tasks and scenarios for participants to
complete while using the prototype.

• Conduct usability testing sessions, observing how participants interact with the app and
noting any usability issues, confusion, or areas for improvement.

• Encourage participants to think aloud and provide feedback on their experience,

including likes, dislikes, and suggestions for enhancements.

58
Maze platform for testing :

• Creating MAZE project for the usability testing:

• After creating a product create a maze

59
• Create a maze usability testing :

• Then build the test case using the maze with the template with the questions generated

• Integrate the figma and the maze tool with your prototype link

60
• Allow the access for the figma to maze

61
• Adding the maze plugin to the figma and configuring it

62
• Prototype testing by the means of the maze ,

• Finally build all the needed question for the usability testing

63
 • Then go live with the maze

5. Identifying Improvements:

• Analyze the results of usability testing, identifying common pain points, usability
issues, and areas of confusion.

• Prioritize the identified improvements based on severity, frequency, and impact on user
experience.

• Iterate on the design and prototype, incorporating feedback and making necessary
adjustments to address the identified issues.

• Test the updated prototype with new participants to validate the effectiveness of the
improvements and ensure that usability has been enhanced.

6. Iterating and Refining:

• Continue iterating on the design and prototype based on ongoing feedback and testing
results.

• Conduct additional rounds of usability testing as needed to validate design changes and
improvements.

• Strive for continuous refinement and optimization of the app's user experience, ensuring
that it meets the needs and expectations of its target audience effectively.

64
Result:

Thus the implementation design was done successfully.

65