UIUX Design - Experiments7 Style Guide
UIUX Design - Experiments7 Style Guide
01
User Research and Persona Creation
DATE:
Aim
To create user journey maps and develop user scenarios that represent typical user interactions with
the application, highlighting key touchpoints,emotions, and pain points.
Tools Required
Note-taking application
Journey mapping tool (e.g., Miro or Lucidchart)
Documentation software
Procedure
3. Identify and record key touchpoints, potential frustrations, and emotions at each
stage.
4. Develop two user scenarios that represent different ways users might interact with the
application.
5. Refine the journey map and scenarios to ensure they accurately capture user needs and
interactions.
Applications
User journey mapping helps to visualize the complete user experience, identifying potential pain
points and opportunities to improve interactions, while scenarios offer a narrative for user
engagement.
Viva Questions
1. Why is user research essential in the UX design process?
Answer: User research is essential because it provides a deep understanding of user needs,
behaviors, and pain points. This
information is fundamental for creating designs that are user-centered, ensuring the product
effectively addresses real-world problems.
Result
User journey maps and scenarios have been successfully created, offering a clear view of the user’s
interactions and experiences, which will inform design decisions in subsequent stages.
EXP No. 02
User Journey Mapping and Scenario Development
DATE:
Aim
To create user journey maps and develop user scenarios that represent typical user interactions with
the application, highlighting key touchpoints,
emotions, and pain points.
Tools Required
Note-taking application
Journey mapping tool (e.g., Miro or Lucidchart)
Documentation software
Procedure
3. Identify and record key touchpoints, potential frustrations, and emotions at each
stage.
4. Develop two user scenarios that represent different ways users might interact with the
application.
5. Refine the journey map and scenarios to ensure they accurately capture user needs and
interactions.
Applications
User journey mapping helps to visualize the complete user experience, identifying potential pain
points and opportunities to improve interactions, while scenarios offer a narrative for user
engagement.
Viva Questions
Result
User journey maps and scenarios have been successfully created, offering a clear view of the user’s
interactions and experiences, which will inform design decisions in subsequent stages.
EXP No. 03
Problem Framing and Goal Definition
DATE:
Aim
To frame the design problem and define clear objectives based on user research, ensuring
that the design solution aligns with user needs and expectations.
Tools Required
Documentation software
Mind-mapping tool (e.g., MindMeister, Miro)
Procedure
1. Review insights gathered from user research and personas to understand key
user needs.
2. Define the main problem statement by summarizing the primary challenge the
design should address.
3. Use mind mapping to explore possible causes, effects, and related sub- problems.
4. Develop 2-3 clear design objectives that specify what the application aims to achieve
for users.
5. Validate the problem statement and objectives with peers or mentors to ensure clarity and
relevance.
Applications
Problem framing and goal definition provide a clear direction for the design process, ensuring that all
design efforts address a well-defined user challenge with specific goals in mind.
Viva Questions
5. How can a clear problem definition guide the rest of the design process?
Answer: A clear problem definition ensures that each stage of the design process is aligned
with user needs and focused on addressing the main issue. This clarity helps in making
design decisions that are purposeful and relevant, leading to a solution that effectively
meets the user's requirements.
Result
The problem statement and design goals have been successfully defined, providing a solid
foundation for the design process and ensuring alignment with user needs and objectives.
EXP No. 04
Ideation and Concept Generation
DATE:
Aim
To generate and explore multiple design ideas using ideation techniques, with the goal of creating
innovative and user-centered solutions to the defined problem.
Tools Required
Brainstorming board (e.g., Miro or a physical whiteboard)
Sketching tools (e.g., pencil and paper, digital sketching apps)
Mind-mapping tool (optional)
Procedure
1. Begin with a brief review of the problem statement and goals defined in Experiment 3.
2. Use brainstorming to generate as many ideas as possible, focusing on quantity over
quality.
3. Organize ideas using a mind map or similar tool to explore relationships and sub-ideas.
4. Narrow down the ideas to 2-3 viable concepts that best address user needs and project
goals.
5. Sketch simple versions of each concept to visualize and communicate the core design
ideas.
Applications
Ideation allows designers to explore a variety of creative solutions, ensuring that the final design
is both innovative and aligned with user needs. Concept generation helps in visualizing ideas and
testing their potential.
Viva Questions
5. How do you determine which ideas to move forward with after brainstorming?
Answer: Ideas are typically evaluated based on how well they align
with user needs, project goals, and feasibility. The most viable ideas are those that are
innovative, practical, and offer the potential to solve the design problem effectively.
Result
Multiple design concepts have been successfully generated and visualized, laying the groundwork for
further development in creating a user-centered solution.
EXP No. 05
Wireframe Creation for Key Screens
DATE:
Aim
To create wireframes for the primary screens of the application, establishing the layout and
structure for the main user interface elements and navigation flow.
Tools Required
Wireframing tool (e.g., Figma, Adobe XD, or Balsamiq)
Documentation software
Procedure
1. Identify the key screens required for the application based on the user journey and
scenarios from previous experiments.
2. Create a rough outline or sketch for each screen, focusing on layout and placement of key
elements.
3. Use a wireframing tool to create digital wireframes for each screen, including
placeholders for elements like buttons, menus, and text.
4. Ensure that each screen has a clear and intuitive structure, focusing on simplicity and
usability.
5. Review the wireframes with peers or mentors to gather feedback and make any
necessary adjustments.
Applications
Wireframes provide a structural blueprint for the interface, allowing
designers to focus on layout, navigation, and flow without being distracted by color or styling. They
form the basis for the application’s visual and
interaction design.
Viva Questions
4. What are the differences between low-fidelity and high- fidelity wireframes?
Answer: Low-fidelity wireframes are simple, with minimal detail, focusing on layout and
basic structure, while high-fidelity wireframes include more detail, such as specific content
and refined layout, to represent the final design more closely.
5. How can feedback on wireframes improve the final design? Answer: Feedback on
wireframes allows designers to identify and address usability issues, refine the layout for
clarity, and ensure the design meets user needs. Early feedback helps prevent costly
changes later in the design process.
Result
Wireframes for the key screens have been successfully created, establishing a clear and functional
layout that guides the interface design in upcoming stages.
EXP No. 06
Low-Fidelity Prototype Development
DATE:
Aim
To develop low-fidelity prototypes of the application’s key screens, enabling early-stage
interaction testing and validation of design concepts.
Tools Required
Prototyping tool (e.g., Figma, InVision, or Axure)
Documentation software
Procedure
1. Review the wireframes created in Experiment No. 05 to identify key screens for
prototyping.
2. Use a prototyping tool to create low-fidelity prototypes for each selected screen, focusing
on basic layout and interactivity.
Applications
Low-fidelity prototypes serve as a bridge between wireframes and high- fidelity designs. They
enable designers to test interactions, gather user feedback early in the design process, and make
necessary adjustments before developing more detailed designs.
Viva Questions
1. What is a low-fidelity prototype?
Answer: A low-fidelity prototype is a basic representation of the application that allows for
early-stage testing of layout, interactions, and navigation without detailing visuals. It
focuses on functionality and user experience.
Result
Low-fidelity prototypes of the key screens have been successfully developed, providing an
interactive tool for initial usability testing and validating design concepts, paving the way for
high-fidelity designs in subsequent stages.
EXP No. 07
Usability Testing and Feedback Collection
DATE:
Aim
To conduct usability testing on the low-fidelity prototypes and gather feedback to identify areas
for improvement in the application design.
Tools Required
Usability testing tool (e.g., UserTesting, Lookback, or Maze)
Documentation software
Procedure
1. Prepare specific tasks for users to complete using the low-fidelity prototypes.
2. Recruit target users that represent the application’s intended audience.
3. Conduct usability tests, observing users as they interact with the prototypes.
4. Encourage participants to verbalize their thoughts during testing.
5. Collect feedback through surveys or interviews after the testing sessions.
6. Analyze the feedback to identify usability issues and areas for improvement.
Applications
Usability testing allows designers to evaluate the effectiveness and efficiency of the application. It
provides insights into user behavior, preferences, and potential pain points, guiding design
refinements.
Viva Questions
3. What are common methods for conducting usability testing? Answer: Common
methods include moderated tests (in-person or remote), unmoderated tests, A/B testing,
and using tools that record user interactions and feedback.
5. How can the results of usability testing influence the design process?
Answer: The results can highlight usability issues that need to be addressed, inform design
decisions, and validate or invalidate design assumptions, ultimately leading to a better user
experience.
Result
Usability testing has been successfully conducted on the low-fidelity prototypes, resulting in
valuable feedback that will inform design
improvements and enhance the overall user experience in subsequent iterations.
EXP No. 08
High-Fidelity Mockup Design
DATE:
Aim
To create high-fidelity mockups of the application’s key screens,
incorporating visual design elements and detailed interactions to represent the final look and
feel.
Tools Required
Design software (e.g., Figma, Adobe XD, or Sketch)
Documentation software
Procedure
Applications
High-fidelity mockups provide a clear representation of the final design, allowing for stakeholder
reviews, further usability testing, and a guide for developers during the implementation phase.
Viva Questions
Result
High-fidelity mockups of the key screens have been successfully created, providing a detailed
visual representation of the application that will guide further development and user testing.
EXP No. 09
Interaction Design and Navigation Structuring
DATE:
Aim
To design the interaction flow and navigation structure of the application, ensuring a seamless user
experience and intuitive navigation.
Tools Required
Design software (e.g., Figma, Adobe XD, or Sketch)
Documentation software
Procedure
Applications
Interaction design and navigation structuring create a user-friendly experience, guiding users
through the application and enhancing overall usability.
Viva Questions
3. What elements are typically included in navigation design? Answer: Common elements
include menus, buttons, links, search bars, and breadcrumbs that facilitate user movement
throughout the
application.
Result
The interaction design and navigation structure have been successfully developed, providing a clear
and intuitive framework that enhances user experience within the application.
EXP No. 10
Responsive and Accessible Design Testing
DATE:
Aim
To evaluate the application’s design for responsiveness across different devices and its accessibility
for users with disabilities.
Tools Required
Testing tools (e.g., BrowserStack, Axe, or WAVE)
Documentation software
Procedure
Applications
Responsive and accessible design testing ensures that the application provides a consistent and
inclusive experience for all users, regardless of device or ability.
Viva Questions
3. What tools can be used to test for accessibility compliance? Answer: Tools such as
Axe, WAVE, and Lighthouse can help identify accessibility issues and ensure
compliance with standards like WCAG.
Result
Responsive and accessible design testing has been successfully conducted, resulting in valuable
insights that will enhance the application’s usability across devices and for users with disabilities.
EXP No. 11
Design System and Style Guide Development
DATE:
Aim
To create a comprehensive design system and style guide that establishes consistent visual and
interaction standards for the application.
Tools Required
Design software (e.g., Figma, Adobe XD, or Sketch)
Documentation software (e.g., Notion, Confluence)
Procedure
1. Gather all design elements used in the application (colors, typography, icons).
2. Define usage guidelines for each element to ensure consistency.
3. Create reusable components and patterns for UI elements.
4. Document the design system and style guide in an accessible format.
5. Share the design system with the development team for
implementation.
Applications
A design system and style guide provide a unified approach to design, enhancing
collaboration between design and development teams and ensuring a cohesive user
experience.
Output:
Style guide
Viva Questions
3. What elements are typically included in a design system? Answer: Elements typically
include colors, typography, spacing, icons, buttons, form elements, and guidelines for
layout and usage.
Result
A comprehensive design system and style guide have been successfully developed, providing a
foundational resource for maintaining visual and interaction consistency throughout the application.
EXP No. 12
Prototype Testing and User Experience Evaluation
DATE:
Aim
To conduct prototype testing to evaluate the overall user experience and gather insights for further
improvements before final implementation.
Tools Required
Prototyping tools (e.g., InVision, Figma, or Adobe XD)
User feedback tools (e.g., surveys or interview software)
Procedure
Applications
Prototype testing and user experience evaluation help identify usability issues, validate design
decisions, and ensure that the application meets user needs before development.
Viva Questions
4. How can prototype testing influence the design process? Answer: Prototype testing
can influence the design process by providing actionable insights that inform design
changes, ultimately improving the product before final implementation.
Result
Prototype testing and user experience evaluation have been successfully conducted, yielding valuable
insights that will guide final adjustments and enhance the overall user experience of the application.