UI-UX Designing

Mitali Rajput
10 min readJul 16, 2023

--

Design and Understanding of it

Types of Design

  1. Universal design
  2. Inclusive Design -It includes using personal identifiers like age, gender, ability, race, economic-status focusing on particular type of users only.
  3. Equity-focused Design

Difference between Equality and Equity

Making sure that product is both accessible and fair to all genders ,races and abilities.

Example -Creating a gender form including all the options and Gender neutral restroom.

User-centered design

User-centered design is a framework that puts the user front-and-center. By focusing on the user, designers must consider the story, emotions, and insights gathered about them.

Assistive Technology

AT’s can be used by both people with or without dissability as it makes our life much more easier like using pencil holder.

  1. Color Modification-Helps people with limited or low vision like using High contrast colors on screen dark mode or light mode.
  2. Voice Control- Helps people with dexterity serving as an alternative to keyboard or mouse. Navigate to buttons using their voice. Switch replace the need of using a keyboard or a mouse helping people with limited motor ability.
  3. Screen Readers-Helping people with limited vision. Read text along with buttons
  4. Alternative Text- Translates visual interface into a text-based user interface.
  5. Speech to text

Design Thinking

Empathize , Ideate, Define ,Prototype ,Test

Remember: Users behave differently depending on their device like-

  • Desktop computers
  • Laptop computers
  • Mobile phones
  • Tablets
  • Wearables, like smart watches
  • TVs
  • Smart displays

Brand Identity refers to Visual Appearance and voice of the comapny.

Design Sprint

Design Sprint requires few questions to be asked

  1. Are there many potential solutions to the challenge?
  2. Cross functional teams need to weigh in?
  3. Challenge scope wide enough?

Sprint brief

A document which is shared with all the attendees to help them prepare for the sprint.

Retrospective in Design Sprint

A retrospective in a design sprint is a structured meeting held at the end of the sprint to reflect on the process, identify areas for improvement, and gather insights for future sprints. It allows the design team and stakeholders to review what worked well, what didn’t, and how to enhance the overall effectiveness of the design sprint methodology. Here’s a general outline of how a retrospective in a design sprint might be conducted:

  1. Set the stage: Begin the retrospective by reminding everyone of the purpose of the meeting and the goals of the design sprint. Emphasize that the focus is on learning and improving, not on assigning blame.
  2. Gather data: Collect information and data related to the sprint. This can include feedback from team members, observations, user testing results, metrics, and any other relevant artifacts.
  3. Generate insights: Encourage participants to share their observations, experiences, and insights from the sprint. This can be done through open discussion, individual reflections, or using various collaborative techniques like sticky notes or online tools.
  4. Identify successes: Discuss and highlight the aspects of the design sprint that went well. Identify the practices, techniques, or decisions that contributed to these successes. This helps reinforce positive aspects and provides a foundation for future improvements.
  5. Discuss challenges: Identify the obstacles, issues, or difficulties encountered during the design sprint. Encourage open and honest communication to ensure all concerns are addressed. Focus on understanding the root causes rather than dwelling on blame.
  6. Brainstorm improvements: Facilitate a brainstorming session to generate ideas for improving the design sprint process. Encourage everyone to contribute suggestions, and create a safe environment for sharing different perspectives. Prioritize the ideas based on their potential impact and feasibility.
  7. Action plan: Collaboratively create an action plan to implement the identified improvements. Assign responsibilities and set deadlines for each action item. Ensure that the action plan is realistic and achievable within the context of future design sprints.
  8. Close the retrospective: Summarize the key insights, improvements, and action items discussed during the retrospective. Express gratitude to the participants for their contributions and commitment to continuous improvement.

A-Z Design

  1. A
  2. Accessibility: The design of products, devices, services, or environments for people with disabilities
  3. Advertising agencies: Teams of creatives hired by clients to build marketing campaigns
  4. Alternative text (alt text): Text that helps translate something visual, such as an image or graph, into a description that can be read by screen readers
  5. Apprenticeships: Provides on-the-job training to help people develop real skills
  6. Assets: Everything from the text and images to the design specifications, like font style, color, size, and spacing
  7. Assistive technology: Any products, equipment, or systems that enhance learning, working, and daily living for people with disabilities.
  8. B
  9. Bias: Favoring or having prejudice against something based on limited information
  10. Brand Identity: The visual appearance and voice of a company
  11. C
  12. Call-to-action (CTA): A visual prompt that tells the user to take action, like to click a button
  13. Color modification: Features that increase the contrast of colors on a screen, like high-contrast mode or dark mode
  14. D
  15. Define: The phase of Design Thinking that involves leveraging the insights gained during the empathize phase to identify the problem you’ll solve with your design
  16. Design Agency: A one-stop shop for the look of brands, products, and services
  17. Design Thinking: A UX design framework that focuses on the user throughout all five phases: empathize, define, ideate, prototype, and test.
  18. Digital Literacy: A user’s level of ability related to using digital information and technologies
  19. E
  20. Empathize: The phase of Design Thinking that involves getting to know your user through research
  21. Equality: Providing the same amount of opportunity and support
  22. Equity-focused design: Designing for groups that have been historically underrepresented or ignored when building products
  23. F
  24. Framework: Creates the basic structure that focuses and supports the problem you’re trying to solve
  25. Freelancers: Designers who work for themselves and market their services to businesses to find customers
  26. G
  27. Generalist: A UX designer with a broad number of responsibilities
  28. Graphic designers: Create visuals that tell a story or message
  29. I
  30. Ideate: The phase of Design Thinking that involves brainstorming all potential solutions to the user’s problem
  31. Ideation: The process of generating a broad set of ideas on a given topic, with no attempt to judge or evaluate them
  32. Inclusive design: Making design choices that take into account personal identifiers like ability, race, economic status, language, age, and gender
  33. Information architecture: The framework of a website or how it’s organized, categorized, and structured
  34. Insight: An observation that helps you understand the user or their needs from a new perspective
  35. Interaction designers: Focus on designing the experience of a product and how it functions
  36. Iterate: Revise the original design to create a new and improved version
  37. Iteration: Doing something again, by building on previous versions and making tweaks
  38. M
  39. Motion designers: Think about what it feels like for a user to move through a product
  40. P
  41. Platform: The medium that users experience your product on
  42. Product: A good, service, or feature
  43. Production designers: Make sure first and final designs match in the finished project materials and that the assets are ready to be handed off to engineering team
  44. Prototype: An early model of a product that demonstrates functionality
  45. R
  46. Responsive web design: A design approach that allows a website to change automatically depending on the size of the device
  47. S
  48. Screen reader: Software that reads aloud any on-screen text, interactive elements, or alternative text
  49. Speech to text: Software that allows users to compose text by speaking into their device
  50. Specialist: A designer who dives deep into one particular type of user experience, like interaction design, visual design, or motion design
  51. Startup: A new business that wants to develop a unique product or service and bring it to market
  52. Switch device: An assistive technology device that replaces the need to use a computer keyboard or a mouse
  53. T
  54. Test: The phase of Design Thinking that involves facilitating and observing user tests with your design prototypes
  55. T-shaped designer: A designer who specializes in one kind of user experience (e.g., interaction, visual, motion) and has a breadth of knowledge in other areas
  56. Universal design: The process of creating one product for users with the widest range of abilities and in the widest range of situations
  57. User: Any person who uses a product
  58. User-centered design: Puts the user front-and-center
  59. User experience: How a person, the user, feels about interacting with, or experiencing, a product
  60. UX engineers: Translate the design’s intent into a functioning experience
  61. UX program managers: Ensure clear and timely communication so that the process of building a useful product moves smoothly from start to finish
  62. UX research: Understand users and learn about their backgrounds, demographics, motivations, pain points, emotions, and life goals
  63. UX researchers: A type of researcher that conducts studies or interviews to learn about the users of a product and how people use a product
  64. UX writers: Create the language that appears throughout a digital product, like websites or mobile apps
  65. Visual designers: Focus on how the product or technology looks
  66. Voice control: Allows users to navigate and interact with the buttons and screens on their devices using only their voice
  67. Wireframe: An outline or a sketch of a product or a screen

UX-Research

Product Development Life Cycle

It takes product from design till launch .The product development life cycle has five stages — brainstorm, define, design, test, and launch.

Foundational Research -BrainStorm ,Empathize

Knowing and empathizing with the user and creating user stories ,personas.

Questions you might consider during foundational research include:

  • What should we build?
  • What are the user’s problems?
  • How can we solve those problems?
  • Am I aware of my own biases, and am I able to filter them as I do research?
  • Interviews: A research method used to collect in-depth information on people’s opinions, thoughts, experiences, and feelings. You’ll often conduct interviews of your target users themselves.
  • Surveys: An activity where many people are asked the same questions in order to understand what most people think about a product.
  • Focus groups: A small group of people whose reactions are studied. For example, your focus group might bring together eight users to discuss their perspectives about new features in your design.
  • Competitive audit: An overview of your competitors’ strengths and weaknesses.
  • Field studies: Research activities that take place in the personal environment, rather than in an office or lab.
  • Diary studies: A research method used to collect qualitative data about user behaviors, activities, and experiences over time. Often, a user will log, or diary, about their daily activities and provide information about their behaviors and needs, which can help inform your designs.

Design research — Design Phase

Each time you create a new version of your design, new research should be done to evaluate what works well and what needs to be changed.

Usability study, which is a technique to evaluate a product by testing it on users.

  • A/B testing: A research method that evaluates and compares two different aspects of a product to discover which of them is most effective. For example, you might have users evaluate two layouts for the homepage of your app to find out which layout is more effective.
  • Cafe or guerrilla studies: A research method where user feedback is gathered by taking a design or prototype into the public domain and asking passersby for their thoughts. For example, you might sit in a local coffee shop and ask customers if they would be willing to test your app design for a couple of minutes and provide feedback.
  • Card sorting: A research method that instructs study participants to sort individual labels written on notecards into categories that make sense to them. This type of research is largely used to figure out the information architecture of your project, which we’ll discuss in the next course of the program — Course 3: Build Wireframes and Low-Fidelity Designs.
  • Intercepts: A research method that gathers on-site feedback from users as they engage in the activities being researched. Intercepts are often conducted in the field, so this type of research is often considered a subset of field research. An intercept study can provide quick, high-level feedback.

Post-launch research — After Product launched

Did we succeed? This research will tell you how your final product is performing based on established metrics, such as adoption, usage, user satisfaction, and more.

Key Performance Indicators- measures progress towards the end goals.

  • A/B testing
  • Usability studies
  • Surveys
  • Logs analysis: A research method used to evaluate recordings of users while they interact with your design, tools, etc.

Qualitative and Quantitative Research-

This type of research answers questions like why and what, respectively.

Primary Research -

It is research we do ourselves.

Secondary Research-

Saves time and money. Immediately accessible. Back up your primary research. No user feedback and no first-time user interaction.

Surveys -

Surveys help you collect qualitative and quantitative feedback from a large sample size of users. They’re quick and affordable. Large sample size ,Fast and Inexpensive but no in-depth feedback

Usability Studies-

A usability study is a technique used to evaluate a product by testing it on users.

Interviews

Time consuming ,in-depth information about user feeling ,opinion,Large Budget

Biases

Confirmation bias

It is where you tend to look for statements supporting you and satisfying your bias. To get rid — Ask open ended questions and actively listening and include large sample of users of diverse perspectives.

False Consensus Bias

Overestimate number of people who will agree with our idea or design .OverAssumptions.

To get rid- Large sample of users.

Recency Bias

It is easiest to remember the last thing you heard.

To get rid- Take detailed notes or recordings.

Primacy Bias

Remember the first participant more strongly.

To get rid- Take detailed notes or recordings. Interview each participant in the same way.

Implicit Bias or Unconscious Bias

The collection of attitudes or stereotypes we associate to people without our conscious knowledge. Interviewing people with only limited set of profile such as race ,gender .

Thanks alot for reading this,

Reach me out on Github or Linkedln or Instagram-myartsys.

Please ,let me know for any sort of improvements .Open to all your responds.

--

--