lOMoARcPSD|22819231

OXFORD ENGINEERING COLLEGE

DEPARTMENT OF CSE & IT

CCS370 - UI AND UX DESIGN LAB

REGULATION-2021

LAB MANUAL

YEAR - III SEM - VI

 lOMoARcPSD|22819231

CCS370 UI AND UX DESIGN

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

Tools: Figma,Java,Html,CSS,Paint,Sketch

Suggested Exercises:
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
 lOMoARcPSD|22819231

EX.NO:1
DESIGNING A RESPONSIVE LAYOUT
DATE:

AIM:
To design a responsive layout for an societal application

Procedure:

Step 1: Design Guidelines in Figma Create a design system file with color styles,
text styles, and components.

Step 2: Breakpoint Artboards in Figma Use the "Artboard" tool to create

artboards for each breakpoint.

Step 3: Wireframing in Figma Use the "Pen" or "Shape" tools to draw wireframes
within each artboard.

Step 4: Content and Elements in Figma Add text, images, buttons, and forms
within the wireframes.

Step 5: Responsive Design in Figma Set constraints for each element to

determine how they adapt to different screen sizes. Use "Auto Layout" to
maintain flexibility.

Step 6: Components and Styles in Figma Create components by selecting

elements and converting them into components. Apply shared styles for
text, colors, and typography.

Step 7: Interactions and Animations in Figma Use the "Prototype" tab to define
interactions and animations. Link frames to create a seamless user flow.

Step 8: Feedback and Collaboration in Figma Share your Figma project with
team members, allowing them to comment and provide feedback directly
in the tool.

Step 9: Accessibility in Figma Use the accessibility checker to identify and fix
accessibility issues in your design.

Step 10: Finalize and Export in Figma Apply final design changes as needed and
then use the "Export" feature to export assets in suitable formats for
development.

1
 lOMoARcPSD|22819231

Step 11: Developer Handoff in Figma Generate CSS, HTML, or other code
snippets using the "Developer" handoff feature. Collaborate with
developers to ensure accurate implementation.

OUTPUT:

CONCLUSION:
Hence we have Designed a responsive layout for a societal application using Figma

2
 lOMoARcPSD|22819231

EX.NO:2
UI INTERACTION PATTERNS
DATE:

AIM:
To explore various UI interaction patterns

Examples for UI Interaction Patterns:

1. Hover Effects
2. Sliders and Carousels
3. Pop-up Modals
4. Expandable Menus
5. Drag-and-Drop Interactions
6. Parallax Scrolling
7. Toggle Switches
8. Progress Bars
9. Swipe Gestures
10. Tooltips

Common UI Interaction Patterns:

1. Hover Effects
Hover effects are dynamic changes that occur when a user hovers their mouse
pointer over an element. Common examples include color shifts, button
animations, and image enlargements.

2. Sliders and Carousels

Sliders and carousels allow multiple pieces of content to occupy a single screen
space, which users can navigate through by swiping or clicking arrows. They
are useful for showcasing multiple images or content pieces without cluttering
the interface.

3
 lOMoARcPSD|22819231

3. Pop-up Modals
Pop-up modals are overlay windows that display additional content or actions.
They often appear when triggered by a button or link, providing focused user
interactions without leaving the current context.

4. Expandable Menus
Expandable menus, such as accordions or collapsible panels, reveal hidden
content or options when clicked. They are effective for organizing and
presenting information in a compact format.

5. Drag-and-Drop Interactions
Drag-and-drop interactions enable users to move elements within a digital
interface. These interactions are often used for reordering items, organizing
content, or customizing layouts.

6. Parallax Scrolling
Parallax scrolling creates a 3D effect by moving background elements at
different speeds as users scroll. It's often used for storytelling or adding depth to
web pages.

7. Toggle Switches
Toggle switches allow users to turn features on or off with a simple toggle.
They are common in settings, preferences, and filtering options.

8. Progress Bars
Progress bars display the completion status of a task, providing visual feedback
to users. They are commonly used in forms, file uploads, and loading screens.

9. Swipe Gestures
Swipe gestures involve horizontal or vertical finger movements on touch
screens. They are used for navigation, image galleries, and content browsing.

10. Tooltips
Tooltips provide supplementary information when users hover or tap on an
element. They are useful for explaining functions, features, or abbreviations in a
concise manner.

Conclusion:
This theoretical overview highlights the key characteristics and use cases of ten
common UI interaction patterns. Understanding these patterns is crucial for
designing user-centric and effective digital interfaces.

4
 lOMoARcPSD|22819231

EX.NO:3
UI STYLE GUIDES
DATE:

AIM:
To develop an interface with proper UI style guides

PROCEDURE:

Step1: Open Figma Launch the Figma application on your computer.

Step2: Create a New Project In Figma, click on "New" and choose "New Project" to
start a new design project.

Step3: Define Project Scope Begin by defining the scope and objectives of your design
project. Understand the purpose, target audience, and goals.

Step4: Gather Design Assets Collect any existing design assets such as logos, color
schemes, typography guidelines, and brand-specific elements.

Step 5: Set Up Style Guide Components In Figma, create components for various UI
elements, including buttons, typography, icons, and form elements.

Step 6: Establish a Color Palette Create a color palette in Figma with primary and
secondary colors. Ensure each color is represented with its hexadecimal code.

Step7: Typography Guidelines: Set up text styles for headings, body text, and other
text elements based on the chosen typeface and sizes.

Step8 : Icon Library: Create an icon library in Figma using components, allowing for
easy scaling and customization.

Step9: Grid Systems: Establish grid systems and layout guides for different screen
sizes to ensure consistent spacing and alignment.

Step10: Document UI Elements and Patterns: Create a document in Figma that outlines
UI elements and design patterns, such as navigation menus, forms, and buttons.
Create variants for different states (normal, hover, active).

Step11: Interactive Prototyping: Utilize Figma's interactive features to prototype and test
the interface with real interactions. Link frames to create a seamless user flow.

5
 lOMoARcPSD|22819231

Step12: Collaboration and Feedback: Share your Figma project with team members,
allowing them to comment and provide feedback directly within the tool.
Step13: Accessibility Check: Use Figma's accessibility checker to identify and fix
accessibility issues in your design.

Step 14: Finalize and Export: Apply any final design changes as needed and then use the
"Export" feature in Figma to export assets in suitable formats for development.

Step15: Developer Handoff: Utilize Figma's developer handoff feature to generate CSS,
HTML, or other code snippets for implementation. Collaborate with developers
to ensure accurate implementation.

OUTPUT:

CONCLUSION:
Hence we have developed a proper interface using proper UI Style guides.

6
 lOMoARcPSD|22819231

EX.NO:4
DEVELOPING A WIREFLOW DIAGRAM
DATE:

AIM:
To develop a Wireflow diagram for application using Figma

PROCEDURE:

Step 1: Open Figma: Launch the Figma application on your computer.

Step 2: Create a New Figma File: In Figma, click on "New" and choose "New File" to
start a new project specifically for your wireflow diagram.

Step 3: Define the Application's User Flow: Begin by understanding the user flow of
your application. Identify key screens and interactions that users will
experience.

Step 4: Create Artboards for Screens: In your Figma file, create individual artboards
for each screen of the application. Artboards represent the visual interface of
your app.

Step 5: Design Screen Elements: Within each artboard, design and arrange the user
interface elements, including buttons, text, images, and other components.
Maintain a consistent design throughout.

Step 6: Linking Screens: Use Figma's interactive features to link screens together.
Define interactions, such as tapping a button to navigate to another screen.

Step 7: Create Arrows for Navigation: On your artboards, use Figma's line tool to
draw arrows or lines that represent the flow of navigation between screens.

Step 8: Add Descriptive Text: Include text labels to describe the purpose of each
screen and interaction. This helps in clarifying the wireflow for viewers.

Step 9: Organize the Flow: Arrange the artboards and arrows in a logical sequence to
represent the intended user flow through the application.

Step 10: Test Interactions: Use Figma's prototype mode to test the interactions and
ensure that the wireflow accurately represents the user journey.

7
 lOMoARcPSD|22819231

Step 11: Collaboration and Feedback: Share your wireflow diagram with team
members and stakeholders. Allow them to provide feedback and comments
directly within Figma.
Step 12: Refine and Update: Based on feedback, refine and update the wireflow
diagram as needed. Ensure that it accurately reflects the application's user
flow.
Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in
various formats or share it with relevant team members for implementation.

OUTPUT:

CONCLUSION:
Thus we have created a wireflow model for a product using Figma

8
 lOMoARcPSD|22819231

EX.NO:5
OPEN SOURCE COLLABORATIVE INTERFACE PLATFORM
DATE:

AIM:
To explore various open source collaborative interface Platform

List of Explored Open Source Collaborative Interface Platforms:

1. Figma Community
2. GitHub
3. GitLab
4. InVision Freehand
5. Adobe XD (Starter Plan)
6. Miro (Free Plan)
7. Sketch for Teams (Beta)
8. Gravit Designer
9. Vectr
10.Penpot

1. Figma Community Figma Community offers real-time collaboration, version

history tracking, commenting, and prototyping capabilities. It provides access to a vast
library of community-created design resources.

2. GitHub GitHub, known for version control with Git, offers collaboration via
repositories, issue tracking, project management, and extensive integration options. It
is a platform used by developers and designers alike.

3. GitLab GitLab is an end-to-end DevOps platform that features repository

management, continuous integration and deployment (CI/CD), and collaboration tools.
It serves as a comprehensive tool for software development and design .

9
 lOMoARcPSD|22819231

4. InVision Freehand InVision Freehand is an online whiteboard for collaboration,

allowing real-time sketching, ideation, and integration with InVision's design tools. It
supports commenting and feedback, focusing on design collaboration and prototyping.

5. Adobe XD (Starter Plan) Adobe XD is a vector-based design tool with shared

cloud documents, co-editing with collaborators, prototyping, and animation features. It
integrates seamlessly with other Adobe products.

6. Miro (Free Plan) Miro is an online collaborative whiteboard for visual

brainstorming and ideation. It supports real-time collaboration, integrations with
design and project management tools, and is ideal for brainstorming and visual
collaboration.

7. Sketch for Teams (Beta) Sketch for Teams is a vector-based design tool with
shared cloud documents, collaboration features with team members, and support for
third-party plugins and integrations. It is designed for design collaboration and system
design.

8. Gravit Designer Gravit Designer is a cross-platform vector design tool with real-
time collaboration, multi-user editing, and sharing capabilities. It offers cloud storage
for design files and is suitable for vector design collaboration.

9. Vectr Vectr is a web-based vector graphics editor with real-time collaboration,

shareable design projects, simplicity, and ease of use. It is a beginner-friendly option
for design collaboration.

10. Penpot Penpot is an open-source design and prototyping platform featuring

real-time collaboration, version control, a vector-based design tool, and a user-centric
interface. It is ideal for design system collaboration.

Conclusion:
This overview highlights the key features and offerings of ten open-source
collaborative interface platforms for UI/UX design. Exploring these platforms is vital
for design teams looking to enhance collaboration, streamline workflows, and create
user-centric digital interfaces.

10
 lOMoARcPSD|22819231

EX.NO:6
DESIGN THINKING PROCESS
DATE:
AIM:
To explore various Hands On Design Thinking process stages for a new product

Theory:
The hands-on design thinking process is a vital approach for creating user-
centered websites and web applications. This document provides an overview of
the key stages and methods involved in designing a new website or web app.

1. Empathize
In this stage, empathize with the potential users of the website or web app.
Conduct user interviews, surveys, and observations to gain a deep
understanding of their needs, preferences, and pain points. Create user personas
to represent different user segments.
2. Define
Based on the insights gathered during the empathy stage, define the core
problem you aim to solve with your website or web app. Craft a clear problem
statement that serves as a guiding beacon throughout the design process.
3. Ideate
Foster creativity and brainstorm potential solutions to the defined problem.
Gather your design team and employ techniques like brainstorming sessions,
mind mapping, and sketching to generate a wide range of design concepts and
ideas.
4. Prototype
Create tangible representations of your design ideas through prototyping.
Develop low-fidelity wireframes, interactive mockups, or clickable prototypes
using design tools such as Figma or Adobe XD. Focus on quick, iterative design
iterations.
5. Test
Gather valuable user feedback by conducting usability testing with the
prototypes. Observe how users interact with your website or web app concept
and collect insights into their preferences and behaviors. Iterate on the design
based on user reactions and identified needs.

Conclusion:
The hands-on design thinking process is a valuable approach for creating user-
centric websites and web applications. Implementing this process ensures that
your digital products are innovative, user-friendly, and effectively address the
specific needs of your target audience.

11
 lOMoARcPSD|22819231

EX.NO:7
BRAINSTORMING
DATE:

AIM:
To understand what brainstorming is and to come up with features for the
proposed product that we are going to design.

Introduction:
The success of a website depends on the quality and relevance of its
features. Brainstorming is a crucial step in identifying the features that
will make your website innovative and user-friendly. This document
outlines the process of brainstorming features for your website design.

1. Define Project Goals and Audience:

Clearly define the goals and objectives of your website. Identify
your target audience and their needs, problems, and preferences.

2. Assemble a Diverse Team:

Gather a diverse team that includes stakeholders from different
departments and backgrounds. This diversity can bring fresh
perspectives and ideas to the brainstorming process.
3. User Personas:
Create user personas to represent your target audience. Understand
your users' needs and pain points to brainstorm features that cater
to their specific requirements.
4. Brainstorming Features:
Hold brainstorming sessions with your team. Encourage open and
creative thinking. Focus on generating a wide range of feature
ideas. Here are some sample features that could be added to your
website design:
 User Registration and Profiles: Allow users to create accounts and
manage their profiles.

 Search Functionality: Implement a robust search feature for easy content

discovery.

 Responsive Design: Ensure that the website is accessible and functional

on various devices.

12
 lOMoARcPSD|22819231

 Navigation Menus: Create intuitive navigation menus for easy user

movement.

 Content Management System (CMS): Enable content creation, editing,

and publishing.

 Feedback and Contact Forms: Provide options for users to share feedback
and contact the website owner.

5. Prioritize Features:
After generating a list of potential features, prioritize them based
on their alignment with project goals, potential impact on user
experience, and feasibility within your project's scope and
resources.
6. Feasibility Assessment:
Assess the technical, financial, and resource feasibility of each
feature.
7. Prototyping and Testing:
Create low-fidelity prototypes or mockups with selected features.
Conduct user testing to gather feedback and refine the feature list.

8. Iteration:
Based on user feedback, iterate on the website's feature set. Adjust,
enhance, or eliminate features as needed to improve the user
experience.

13
 lOMoARcPSD|22819231

CONCLUSION:

Effective feature brainstorming is a dynamic and iterative process. By following

these steps and involving a diverse team, you can identify the most relevant and
innovative features for your website design. Remember that feature
development is an ongoing process, and user feedback should guide
improvements throughout the website's lifecycle.

14
 lOMoARcPSD|22819231

EX.NO:8
Defining the Look and Feel of the new Project
DATE:

AIM:
To define the look and feel of a project

PROCEEDURE:

STEP 1 : Emphasize the importance of a user friendly UIUX design. Set clear
expectations for the lab's outcome. Highlight the impact of good
design on user engagement and satisfaction.

STEP 2: Clearly define the project's objectives and goals. Specify the target
audience and their characteristics. Identify any specific requirements or
constraints (e.g., branding guidelines, platform limitations).

STEP 3: Study competitors and industry leaders for design inspiration. Conduct
user surveys or interviews to understand preferences and pain points.
Analyze user behavior on similar platforms or products to inform design
decisions.

STEP4 : Include a variety of visual elements (images, icons, patterns) to explore

different design directions. Ensure that the mood board reflects the
project's intended tone, style, and emotion. Experiment with different
color palettes and typography options to find a cohesive look.

STEP 5:
Focus on creating clear, intuitive layouts that prioritize functionality.
Avoid incorporating specific design elements; concentrate on structure
and navigation. Seek input from team members to refine wireframes for
optimal usability.

15
 lOMoARcPSD|22819231

STEP 6: Apply feedback from stakeholders to refine and enhance the highfidelity
mockups. Pay attention to details such as spacing, alignment, and
consistency. Ensure that the design aligns with the project's overall
vision and goals.

STEP 7: Create interactive prototypes that simulate real user interactions. Test
and refine the prototypes to ensure seamless navigation and
functionality Use animations and transitions to provide a realistic user
experience.

STEP 8: Select a diverse group of users to gather a range of perspectives. Ask

specific questions about usability, navigation, and overall experience.
Use user feedback to identify areas for improvement in the UIUX design.
STEP 9: Include a clear rationale for design choices, explaining how they support
the project's goals. Create a comprehensive style guide with specific
details on colors, typography, and UI elements. Provide organized access
to wireframes, mockups, and prototypes for future reference.
STEP 10: Use visuals and clear explanations to effectively communicate design
choices. Highlight how the design aligns with the project's objectives and
target audience. Invite questions and feedback from stakeholders for
further refinement.
STEP 11: Prioritize feedback based on its impact on user experience and project
goals. Collaborate with team members to implement necessary revisions
efficiently. Conduct additional testing if major design changes are made
to ensure optimal usability.

Conclusion:
Hence we have outlined the steps that must be taken to defining the look and
feel of a new product

16
 lOMoARcPSD|22819231

EX.NO:9
Create a Sample Pattern Library for that product
DATE:

AIM:
To create a sample pattern library for the product that we are going to build

PROCEDURE:

STEP 1: Establish a cohesive design foundation through a pattern library.

Emphasize the importance of consistent design elements.
STEP 2: Purpose: Set visual direction with images, color schemes, typography,
and UI elements. Use digital tools for compilation. Ensure alignment
with project goals and target audience.
STEP 3: Importance: Fonts impact readability and visual consistency. Research
and choose fonts that match the project's tone and style. Consider
legibility across different screens and devices.
STEP 4: Significance: Colors convey emotions and establish visual hierarchy.
Generate primary and secondary colors for accessibility and contrast.
Ensure a balanced and harmonious palette.
STEP 5: Provide usage guidelines for headings, body text, and special cases (e.g.,
buttons, labels). Specify font sizes, weights, and styles for different UI
elements. Maintain consistency in font choices.
STEP 6: Define styles for common UI elements (e.g., buttons, forms, icons).
Ensure consistency in appearance and behavior across the project.
Specify states like hover, active, and disabled.
STEP 7: Stress the importance of designing for accessibility for inclusivity.
Provide guidelines for text legibility and color contrast. Ensure
compliance with accessibility standards (e.g., WCAG).

17
 lOMoARcPSD|22819231

STEP 8: Compile all elements into an organized document. Include explanations

and justifications for design choices. Create a resource for future
reference and collaboration

STEP 9: Seek input from team members and stakeholders. Use feedback to
refine and improve the pattern library. Encourage collaboration and discussion for a
wellrounded design.

OUTPUT:

18
 lOMoARcPSD|22819231

CONCLUSION:

Hence we have create a proper library for patterns to be used during the designing
phase of the design we are going to use in our projects

19
 lOMoARcPSD|22819231

EX.NO:10
IDENTIFYING A CUSTOMER PROBLEM
DATE:

AIM:
To identify a customer problem to solve and come up with solutions for the said
Problem.

Introduction:
Understanding and addressing customer problems is a critical aspect of
business success. This document outlines a systematic approach for
identifying customer problems and crafting tailored solutions.
1. Customer Research:
Customer research is the foundation of identifying problems. Start with
surveys and interviews to directly engage with your target audience.
Analyzing customer data, feedback, and behavior patterns can also
provide valuable insights into their pain points. Additionally, studying
your competitors can reveal common industry issues. Conduct market
research to understand market trends and customer preferences.
2. Problem Definition:
Once you have gathered data, prioritize the problems based on their
impact on customers and your business. Create clear and concise problem
statements to articulate the challenges your customers face. These
statements serve as the foundation for developing solutions that directly
address these issues. Ensure that problem definitions are aligned with
your business goals.
3. Solution Ideation:
Brainstorming is a crucial step in generating innovative solutions.
Collaborate with a diverse team, including individuals from various
departments and backgrounds. They can provide fresh perspectives and
creative ideas. Techniques such as mind mapping, ideation sessions, or
design thinking workshops can help in generating a wide range of
potential solutions.
4. Prototype and Testing:
To develop effective solutions, create prototypes or minimum viable
products (MVPs) that represent your ideas. Testing these prototypes with
actual users is essential to gather feedback and validate the proposed
solutions. Iteration based on user feedback is key to refining and
improving your solutions to ensure they effectively address the identified
problems.

20
 lOMoARcPSD|22819231

5. Implementation:
Once you have refined and validated your solutions, move forward with
development and implementation. Collaborate with your team to ensure a
smooth transition. During the implementation phase, it's crucial to
monitor the performance and user satisfaction of your solutions. Be
prepared to make adjustments and improvements as needed.
6. Customer Feedback Loop:
Establishing channels for ongoing customer feedback is vital. This can
include feedback forms, surveys, customer support interactions, and
social media. Create an iterative feedback loop where customer insights
drive continuous improvements. Responding to feedback promptly and
making necessary changes helps maintain strong customer relationships.
Additional Methods for Identifying and Solving Customer Problems:

 Social Listening: Monitor social media channels and online forums to gain real-time
insights into customer sentiments, concerns, and pain points.

 Customer Journey Mapping: Visualize the customer journey to identify touchpoints

where problems may arise and opportunities for improvement.

 User Testing and User Experience (UX) Research: Observe how users interact with
your products to uncover usability and design issues.

 A/B Testing: Experiment with different solutions to identify which ones work best
through data-driven testing.

 Customer Support and Service Data: Analyze customer support interactions and
service data to identify recurring issues and areas for improvement.

 Innovation Workshops: Organize workshops or brainstorming sessions with cross-

functional teams to explore creative solutions.

CONCLUSION:
Identifying and solving customer problems is an ongoing and dynamic process.
By staying attuned to your customers' needs, continuously improving your
solutions, and embracing innovative methods for problem-solving, you can
build strong customer relationships and drive business success.

21
 lOMoARcPSD|22819231

EX.NO:11
USER RESEARCH
DATE:

AIM:
To Conduct end-to-end user research - User research, creating personas,
Ideation process, Flow diagrams, Flow Mapping

PROCEDURE:

STEP 1: Goal: Gather comprehensive insights about end users and ideate
based on those insights. Emphasize user centric design approach.

STEP 2: Methods: Use surveys, interviews, analytics to understand user

needs and preferences. Focus on gathering data about user
behaviors, pain points, and goals.

STEP 3: Purpose: Create fictional representations of different user types

for reference. Include demographics, behaviors, goals, and pain
points to make personas relatable.
STEP 4: Importance: Ideation is key to designing usercentric solutions.
Start with user stories and scenarios to define specific user tasks.

STEP 5: Format: "As a [type of user], I want to [perform an action] so that

[achieve a goal]." Define specific user tasks within the project.

STEP 6: Provide detailed contexts for user stories to help visualize the
user's journey. Describe the context, actions, and expected
outcomes.

22
 lOMoARcPSD|22819231

STEP 7: Visualize user flows using flowcharting tools or software.

Map out the sequence of steps a user takes to accomplish tasks.

STEP 8: Create a visual map illustrating the entire user journey.

Include decision points, interactions, and touchpoints with the
project.

STEP 9: Compile all research data, personas, user stories, scenarios, flow
diagrams, and flow mapping. Provide explanations and
justifications based on user insights.
STEP 10: Share documentation for team and stakeholder review.
Gather feedback on user research findings and ideation process.

OUTPUT:

23
 lOMoARcPSD|22819231

OUTPUT:

CONCLUSION:
Hence Conducted end-to-end user research and prepared the Flow diagrams, Flow
Mapping for further designing and development

24
 lOMoARcPSD|22819231

EX.NO:12
USABILITY TESTING
DATE:

AIM:
To Sketch, design with popular tool and build a prototype and perform usability
testing and identify improvements

PROCEDURE:

STEP 1: Goal: Progress from initial sketches to a refined prototype through

a structured design process. Emphasize the importance of \
user centered design.

STEP 2: Initial phase: Start with rough sketches on paper to visualize

layout and navigation. Focus on basic elements before
transitioning to digital design.

STEP 3: Translate sketches to digital designs using a design tool like

Adobe XD or Figma. Incorporate specific design elements, color
schemes, and typography for a polished look.

STEP 4: Create an interactive prototype with the chosen design tool to

simulate user interactions. Ensure smooth transitions and
functionality for an accurate representation.

STEP 5: Prepare a usability testing plan with tasks for participants (or
selftesting).Record observations and gather feedback on usability
and user experience. Focus on identifying pain points and areas
for improvement.

25
 lOMoARcPSD|22819231

STEP 6: Analyze usability testing results to pinpoint areas for

enhancement. Prioritize changes based on impact on user
experience and project goals. Aim to address usability issues and
refine the overall experience.

STEP 7: Implement necessary adjustments to the prototype based on

identified improvements. Ensure that changes positively impact
usability and user satisfaction.

STEP 8: Record the entire process, including sketches, digital designs,

prototype, usability testing plan, and results. Provide detailed
explanations and justifications for design choices and
improvements. Create a comprehensive resource for future
reference and collaboration.

STEP 9: Conduct a final round of usability testing to validate the

effectiveness of the improvements. Ensure that the refined
prototype meets user expectations and project goals.

26
 lOMoARcPSD|22819231

OUTPUT:

CONCLUSION:
Hence we have Sketched, designed with figma and built a prototype and performed
usability testing and identified improvements

27