UI Design

UI design is the designing of visual interface of a software. I the look and feel, the presentation and interactivity of a product. It’s the point of interaction between the user and the digital product Good design makes something intelligent, memorable and meaningful. A design language is a set of consistent visual element that can be reused.

Principles of UI design

• White Space - the amount empty space between elements.
• Color - use 4 or 5 colors(recommended).
• Contrast - being ‘strikingly’ different from something else.
• Scale - consider the size of the element.
• Alignment - the process of ensuring every element is positioned correctly in relation to each other.
• Typography
• Visual Hierarchy

Stages of UI design

• Rough sketches
• Block design
• Wire frame
• Mockup ui
• Prototype

UX DESIGN

content:

1. Foundations of User Experience design
2. Start the UX Design process: Empathize, Define and Ideate
3. Build wireframes and Low-fidelity prototypes.
4. Conduct UX research and test Early concepts.
5. Create High-Fidelity Designs and prototypes in figma.
6. Responsive web design in Adobe XD.

Foundations of User Experience Design

Introduction

User Experience Design focus on the experience that the users have while using a product like websites, apps and physical objects.

UX mostly focuses on usability, problems and accessibility. It involves interactions between the potential or active user of a product. It relies on visual design, behavioral psychology and consumer research.

Tools - figma, adobe xd

A good design should be:

• usable
• equitable - accessible to all
• enjoyable
• useful - give value to users.

Tips to make a great design:

• Emphasis and importance
• Make everything the user needs readily accessible.
• Be consistent and mobile friendly
• Contrast and readability
• Be clear by splitting steps into different pages.
• Give Feedback to the user eg “form submitted”
• Proximity and layout
• Use recognition by using most used icons that users can easily identify.
• Follow design standards.
• Borders and spacing
• Keep things stupid simple.
• Fill and corners
• keep relevant items eg.buttons together
• Test your designs

A UX designer can do:

• user research
• branding
• user flows
• UX writing
• visual design
• prototyping
• product design
• information architecture
• usability testing.

User experience is how a person , the user feels about interacting with or experiencing a product.

A product is a good, service or a feature.

A UX designer is:

• Curious- try to understand people and how their minds work.
• Empathetic - ability to understand someone’s feeling or thought situation.

Types and colleagues of UX designers

1. Interaction Designer - focus on designing the experience of a product and how it functions.
2. Visual Designer - focus on how a product or technology looks. eg ui, fonts, logo.
3. Motion Designer - thinks on how it feels like for a user to move through a product. ie transition.
4. Graphic Designer - focus on the physical appearance of of the product.
5. UX Researcher - conduct studies or interviews that help us learn how people use a product.
6. UX Writers - think about how to make the language within a product clearer.
7. Production designer - works as a bridge between interaction designers and engineers.
8. UX engineer - translate the design intent into functioning experience.
9. UX Program Manager - ensure clear and timely communication so that the process of building a useful product moves smoothly from start to finish.

Assets - text, images, design, specification, font style, color, size , spacing, etc.

Product Development Cycle

Refers to the process used to take a product from an idea to product.

Stages:

1. Brainstorm - research to understand user problem.
2. Define - using the insights from the brainstorming stage and starting to narrow the focus.
3. Design - implementing insights into new designs using various tools ie. create assets, storyboards, sketches, prototypes.
4. Test - Evaluating the product design based on feedback from potential users.
5. Launch - sharing the finished version of the design with the public

Research -> Brainstorming -> Implementation -> Reporting

Research

Involves: Understanding - conducting of user interviews to identify the requirements.Understand the problem you’re solving. User personas - representation of a typical user to identify their needs. Use cases - how might different people use the product or service. Journey maps - how a user might start to use and finish the experience

Brainstorming

How to solve the problem. Generate and validate ideas. Involves: User flows - diagrams that outline the steps a user might take during the experience as they go from step to step in the UI. Wireframes - a rough skeleton representation of the UI and the various components that make up the UI.Templates of each page are sketched.Color schemes are chosen

Implementation

Prototype - UI designers create a low or high fidelity prototype, which may or may not be interactive. Front-end and Back-end development - once the prototype has been approved the developers make the prototype of a working product.

Reporting

Usability reporting - observing real users using the product through a variety of means. Split testing - testing the effectiveness of one design iteration over another. Analytics reporting - gaining additional insights eg. time spend on pages, bouncing rates

Job Responsibilities of a UX designer

1. Researching - understand the audience
2. Wireframing - outline/ sketching products or screens.
3. Prototyping - develop early design of the product that demonstrates functionality.
4. Creating information architecture - framework of a website, how it is organized and structured.
5. Communicating effectively

UX common terms, tools and frameworks

End user - is the specific audience a UX designer creates something for.

user - refers to any person using the product.

user -centric design - putting the user at the front and center.

• Understand
• Specify
• Design
• Evaluate.

Key UX frameworks:

A framework creates the basic structure that focuses and supports the problem you’re trying to solve.

1. The five elements of UX design framework.

2. steps a designer takes to turn an idea into a working product.

   • strategy - most abstract
   • scope
   • structure
   • skeleton
   • surface - most concrete

3. Design thinking UX framework. A way to create solutions that addresses a real user problems and are functional and affordable. steps

   • empathize
   • define
   • ideate
   • prototype
   • test
4. Equity based design. build products that meet the needs of specific individuals and groups who have historically been excluded.

Next Billion Issue

• Cost
• Connectivity
• Digital literacy
• Literacy

Platform is the medium that users experience your product on eg mobile, desktop.

Brand identity is the visual appearance and voice of a company.

Responsive web design allows a website to change automatically depending on the size of the device users behave differently depending on their device.

When designing for different platforms ensure:

• Consistency
• Continuity
• Context
• Complementary

Universal design is the process of creating one product for users with the widest range of abilities and in the widest range of situations.

Inclusive design - making design choices that take into account persoanl identifiers like ability, race, economic status, language, race.

Accessibility - the design of products, design, services or environments for the people with disabilities.

Equity-focused design - design for groups that have historically underrepresented or ignored when building products.

Equality - providing the same amount of opportunity and support.

Equity - providing different levels of opportunity and support for each person in order to achieve fair outcomes. (better equality)

Social model of disability - defines a disability as being caused by the way society is organized of how products are designed, rather than a person’s ability or difference.

Assistive technology -Any products, equipment and systems that enhance learning, working and daily living for people with disabilities.

Joining design sprints

Design sprint - Is a time-bound process, with five phases typically spread over 5 full days. The goal of a design sprint is to solve a problem through designing, prototyping and testing ideas with the users.

Phases

1. Understand - understand the dewsign challenges.
2. Ideate - plan for user testing, expert ideas.
3. Decide - decide the solution to go with.
4. Prototype - get a working prototype.
5. Test - observe and interview user for experience.

Benefits of design sprint:

1. Save time
2. Create a path to bring a product to market.
3. Prioritize the user.
4. Test product before launch.
5. It’s all about the user
6. Value every person in the room.
7. The best ideas rise to the top.
8. Lower risks

When to sprint:

1. Many potential solutions to challenge?
2. Cross-functional teams needed to weigh in?
3. Challenge a scope wide enough.

Plan design sprints

1. User research.
2. Call in the experts.
3. Find the right space.
4. Gather supplies.
5. Establish rules for the sprint
6. Plan introductions
7. Post-sprint plannign, documentation.

Sprint brief - A document that you share with all your attendees to help them prepare for the sprint.

1. Sprint challenge
2. Key deliverables
3. Logistics
4. Approvers
5. Resources

Sprint leader - is the person who sends out the sprint brief to the team.

Starting research into the design process

Intergrating research into the design process

• Empathiize with users
• Build an empathy map
• Understand user pain points
• Explore personas
• Write user stories
• Identify happy paths and edge cases
• Discover the benefits of user journey maps.
• Write problem statements and hypothesis statements.
• Consider accesibility.

UX Research - focuses on understanding user behaviour, needs, and motivation through observation and feedback.

Product development lifecycle is the process used to take a product from an idea to reality.

A UX Researcher has:

1. Empathy - ability to understand someone’s else feelings or thought in a situation.
2. Pragmatism - focused on reaching goals
3. Collaboration - can work with a range of people personalities and work styles.

Foundational research - done before you start designing.

Bias - is favouring or having prejudices against something based on limited information.

Kinds of UX Biases

1. Confirmation bias - occurs when you start looking for evidence to prove a hypothesis you have.
2. False consensus bias - overestimate the number of people who will agree with our idea or design.
3. Primary bias -remember the first participant most strongly.
4. Implicit bias - the collection of attitudes and stereotypes we associate to people without our conscious.
5. Sunk cost fallacy -the deeper we get into a project, we’re invested in, the harder it is to change course.
6. Recency bias - remember the last participant most strongly.

Screener survey - a detailed list of questions that helps researchers determine if potential participants meet requirements of the research study.

Representative sample - a subset of the target population that seeks to accurately reflect the characteristics of the larger group.

Prepare for user interviews

1. Script interview questions.
2. Collect supplies.
3. research the users.
4. Practice.

Conduct user interviews

1. Meet the participant - build a good rapport, thank the participant for coming, review legal details, gather base details.
2. Conduct the interview - follow interview etiquette, ask open ended questions.
3. Take notes.
4. Wrap up the interview.

Empathy map - an easily understood chart that explains everything designers have learned about a type of user. What tghe users says, thinks, feels, and does.

Aggregated empathy maps represent a visualization of everything designers know about an entire user segment or group of similar users.

Pain points are any issues that frustrates the user and block the user from getting what they need.

Types of pain points

1. Financial
2. Product
3. Process
4. Support

Personas - fictional users whose goals and characteristics represent the needs of a larger group of user personas are built based on research. They help build empathy, tell stories.

User groups - a set of people who have similar interests, goals, and concerns.

Creating user stories and user journey maps

User story - a fictional one-sentence story told from the personas point of view to inspire and inform design decisions.

Advantages of user stories:

1. Prioritize design goals.
2. Inspire empathetic design decisions.
3. Unites the team.
4. Personalize pitches to stakeholders.

Edge case - a rare situation or unexpected problem that interrupts a standard user experience.

Spotting and resolving edge cases:

1. Create personas and user stories.
2. Thoroughly review the project before launch.
3. User wireframes.

User journey - the series of experiences a user has as they achieve a specific goal.

User journey map - an illustration of what a user goes through to achieve their goals.

Benefits of user journey maps:

1. Helps UX designers create obstacle-free paths for users.
2. Reduces the impact of design bias.
3. Highlight new pain points.
4. Identify improvement opportunities. Curb-cut effect - a phenomenon that describes how products and policies designed for people with disabilities often and up helping everyone.

Define problem and hypothesis statements

Problem statement is a clear description of the user’s need that should be addressed.

• Human centered
• Broad enough for creative freedom.
• Narrow enough to be solved by a design.

is a who needs because

Problem statements helps:

1. Establish goals
2. Understand contraints
3. Define deliverables.
4. Creates benchmarks for success.

Hypothesis statement - our best educated guess on what we think the solution to a design problem might be.

If then

Value proposition - the reason why a consumer should use a product or a service.

Steps in building value proposition

1. Describe your product features and benefits.
2. Explain the value of the product.
3. Connect these features and benefits with the needs of your users.
4. Review your official value proposition.

The human factor - describes the range of variables human bring to their product interactions.

• Impatience, limited memory, needing anologies, limited concetration, changes in need, needing motivation, prejudices, fears, making errors, misjudgement.

Mental models -Internal maps that allow humans to predict how something will work.

Feedback loops - the outcome a user gets at the end of the process.

Von resterff effect(Isolation effect) - when multiple similar object are present, the ones that differs from the rest is most likely to be remembered.

Call-to-action - a visual prompt that tells the user to take action.

Serial position effect - when people are given a list of items, they are more likely to remember the first few and the last few, while the items in the middle tend to blur.

Hicks law - the more options a user has, the longer it takes them to make a decision.

Ideating design solutions

Ideation is the process of generating a broad set of ideas on a given topic, with no attempt to judge or evaluate them.

• Brainstorm out loud.
• Document all ideas.
• Focus on quantity.
• Do not allow evaluation.
• Gather a diverse team.
• Question the obvious.

• Evaluate the ideas.

  • Feasible - technically possible to build.
  • Desireable - best at solving the user problem
  • Viable - financially beneficial.

Prepare for ideation

1. Empathize with your user.
2. Define a creative environment.
3. Set a time limit.
4. Assemeble a diverse team.
5. Think outside the box.

Scope the competition(competition audit)

1. Identifying your key competitors.
2. Reviewing the product that your competitors offer.
3. Understanding how your competitors posistion themselves in the market.
4. Examining what your competition does well and what they could do better.
5. Considering how competitors talk about themselves.

Direct competitors - have offerings that are similar to your product and focus on the same audience.

Indirect competitors - have a similar set of offerings but focus on a different audience, or have a different set of offerings and focus on the same audience.

Benefits of competitive audit

1. Inform your design process.
2. Solve usability problems.
3. Reveal gaps in the market.
4. Provide reliable evidence.
5. Save time, money , and energy.

Limits of competitive audits

1. Stiffle creativity
2. Depend on how well you interpret the findings.
3. Not all designs work in all use cases.
4. Need to be done regulary.

Competitive audit steps

1. Outline the goals.
2. Create a spreadsheet with a list of your competitors.
3. Call out the specific aspects you want to compare.
4. Research each company.
5. Analyze findings.
6. Summarize findings in a report.

Delivering a strong presentation

1. Get feedback from your team.
2. Limit the amount of text on your slides.
3. Stick to the highlights.
4. Use notes.
5. Practice ahead of time.
6. Use relevant graphics.
7. Keep your biases in check.
8. Be able to defend your conclusions.

Build wireframes and low-fidelity prototypes

Empathy map - an easily understood chart that explains everything designers have learned about type of user.

Product goal statement - one or two sentences that describe a product and it benefits for the user.

User flow - the path taken by a typical user on an app or website, so they can complete a task from start to finish.

Storyboard - a series of panels/frames that visually describe and explore a user’s experience with a product.

Elements:

• Character - user
• Scene - user environment
• Plot - benefit of the design
• Narrative - how the design solve the problem

Big picture storyboards - focus on user experience

Close-up storyboard - focus on the product

Wireframe - a basic outline of a digital experience, like an app or website.

Purpose of wireframes:

1. Establish the basic structure of a page.
2. Highlight the intended function of the product.
3. Save time and resources.

Elements - building blocks for creating a design. ie. lines, shapes, text

A design solves a real problem that users are experiencing.

Benefits of wireframes:

1. Inform the elements to include in your design.
2. Catch problems early.
3. Get stakeholders to focus on structure.
4. Save time and effort.
5. Iterate quickly.

Fidelity - how closely a design matches the look and feel of the final product.

Low fidelity:

• Lower amount of complexity
• Less refined or polished
• Called “Lo-fi” for short.

High fidelity:

• Closely matches the work and feel of the final product.
• More refined and polished.
• Called “hi-fi” for short.

Creating paper and digital wireframes

Information architecture(IA) - orgainizes content to help users understand where they are in a product and where the information they want is.

Importance of Information architecture:

1. Organizes and defines the overall structure for the app or site.
2. Provides a highlevel view of a product.
3. Helps stakeholders review your design.
4. Helps engineers understand how to organize the data.
5. Allows ideas to grow and iterate with the design.

Components of Information architecture

1. Organization - how different pieces of information connect to the product.
2. Hierachy - tree structure.
3. Sequence - enables users to move through an app via certain orders or steps.

8 basic principles of Information architecture

1. Object principle - content changes and grows over time.
2. Choice principle - fewer choices that are well organized.
3. Disclosure principle -information should not be unexpected and unnecessary.
4. Examplar principle - human put things into categories and group different concepts together.
5. Front door principle - people will usually arrive at a home page from another website.
6. Multiple classifications principle - people have different ways of searching for information.
7. Focused navigation principle -there must be a strategy and lose behind the way navigation menus are designed.
8. Growth principle - amount of content in a design will grow over time.

Paper wireframes are fast, inexpensive, and explore lots of ideas.

Steps in creating a wireframe

1. Gather materials.
2. Write a list of elements you need to include in your wireframe.
3. Create 5 different versions of how to structure information on the page.
4. Choose which elements to refine.
5. Combine elements into a refined wireframes.

Gestalt principles - how human group similar elements, recognize patterns, and simplify complex images when we perceive objects.

1. Similarity - elements looking similar/have same function.
2. Proximity - elements close together are more related.
3. Common region - elemets within same are grouped together.

Prototype - is an early model of a product that demonstrates functionality. It shows stakeholders and potential users what your design can do.

The difference between a wireframe and a low fidelity prototype is the ability to click.

Benefits of paper prototypes

1. Inexpensive
2. Rapid iteration
3. Low commmitment
4. Encourage honest feedback.
5. Collaborative activity

Deceptive patterns are UX methods that trick users into doing/buying something they wouldn’t otherwise have done or bought.

1. Forced continuity - charging for membership without warning and reminder.
2. Sneak into the basket - adding extra products without concent.
3. Hidden cost -paying fees you aren’t aware.
4. Confirm shaming - makes useer feel bad.
5. Urgency - limited time offer.
6. Scarcity -limited number of items.

Conduct UX Research and Tesst Early Concepts

Elemets of UX research studies

1. Project background
2. Research goals
3. Research questions
4. Key performance indicators
5. Methodologies
6. Participants
7. Script

Research study - is a step-by-step examination of a group of users and their needs, which adds realistic context to the design process.

Steps:

1. Plan - outline the background set research goals, audience
2. Research - gather
3. Analyze and sythesize
4. Share

Usability study - a research method that assesses how easy it is for users to complete core tasks in a design.

Project stakeholders - people who are involved in the project or who will be impacted by it’s results.

Research presentation contains methods, data, conclusion, recommendations.

Communication needs to be equitable, inclusive, honest, neutral and team player.

Elements of a UX research plan

1. Project background - what let you to conduct research.
2. Research goals - what design problems are you trying to solve.
3. Research questions - what questions is the research trying to answer.
4. Key Performance Indicators - how to measure progress.
5. Participants - who will you survey.
6. Script - discussion guide, specific question, to the research goals.

Importance of Project Background:

1. Get’s the team on the same page at the beginning of the study.
2. Shows you understand why you are doing the research.
3. Promotes confidence in the overall quality of your analysis and insights.

How to write the project background:

1. Identify the signals that indicated research was necessary.
2. Describe any previous research
3. List insights the research will generate

Foundational research goal - understand why or if you should build the product.

Design research goal -understand how to build the product.

Post launch research goal - understand if the product worked as expected.

Research questions should provide focus, they should actionable, specific, avoiding leading questions

Types of KPI’s

1. Time on task - measure how long it takes a user to complete a task.
2. Use of navigation vs search - the number of people who use a website or app navigation compared to number of people who use the search functionality.
3. Use error rates - indicate the parts of a design that cause users to make errors.
4. Drop-off rates - how many users abandon the experience.
5. Conversion rates - measure the percentage of users who complete a desired action.
6. System usability scale(SUS) - a questionnaire to measure the usability of your design.

Use the same set of questions for each interview, ask open-ended questions, elaboration encouragement, ask same questions in multiple angles, don’t mention other users, don’t ask leading questions.

Personally Identifiable Information(PII) - specific details that could be used to identify a user.

Sensitive Personally Identifiable Information(SPII) - data that if lost, compromised, or stolen, could cause your users financial harm, embarrassment or discrimination.

Importance of keeping user data privacy

1. It’s the right thing to do.
2. Privacy laws and ethics.
3. Risk of hacking.
4. Protecting your company’s brand.

Privacy and security practices

1. Be transparent about data collection.
2. Only collect user data that’s absolutely necessary.
3. Get active consent.
4. Detail how you’ll use participants info and protect privacy.
5. Allow users to withdraw.
6. Inform users of who will have access to their data.
7. How you plan to store and delete user data once it has been used.

Vulenerable population - groups of people who have limited ability to provide their consent or have special privacy concerns.

Data recording - document your study and results in a way that’s consistent with UX research standards.

Data storage - make sure your data is held in a way that’s safe from hacking and physical damage.

Data retention -how long you and your company hold on to research data.

De-identification - removing any identifying information from a user’s data that you collect during a study

Conducting research with usability studies

Usability study - is a research method that assess how easy it is for participants to complete core tasks in a design.

Moderated usability study - a moderator guides participants through the study in real time.

Unmoderated usability study -participants test out the prototypes without human guidance.

How to begin a moderated usability study

1. Build a rapport with participants.
2. Thank participants for coming.
3. Remind participant to be open and honest.
4. Have participants fill out paperwork like an NDA.
5. Explain the focus of the study and what participant will give feedback on.
6. Establish ground rules for this study.
7. Remind participants that they are not being tested.

Reduce bias by adentifying and admitting own biases, find participants from a representative sample, define interview questions thoughtfully, let participants express themselves fully, be mindfull of your body languages.

Analyzing and synthesizing research results

Synthesize - combine ideas to draw conclusions.

Iterate - revise original designs to create a new and improved version.

Insight - an observation about people that helps you understand the user or their needs from a new perspective.

Affinity - a feeling of like-mindedness or compatibility towards something or someone.

Observation to insights:

• gather data in one place.
• organize the data
• find themes
• come up with insights.

Qualit of a strong insights:

• Grounded in real data.
• Answer research questions
• Easy to understand.
• Increase empathy for the user experience.
• Insert direct action.

Sharing research insights for better designs

Presentation - a group of slides, where each slide has new information.

Research rapport - a document with fewer visuals, containing the same information as the presentation.

• Know your audience.
• Provide an overview.
• Tell a story
• Show numbers
• Less is more when it comes to text.
• Provide recommendations for next steps.
• Leave time for questions.

Tips

• Be concise.
• Keep your tone conversation.
• Use stories.
• Allow pauses.
• Make eye contact.

Create High-Fidelity Designs and prototype

Visual design - how a product or technology appear to users.

Mockup - a static high fidelity design that represent your final product.

Fidelity- how a product design looks, feels like the final product.

Foundation elements of visual design

1. Typography - use of text and fonts, adds hierachy to your designs, make text easy to read, adds visual style.
2. Color - messages that certain colors communicate, how people understand color, how color mix, match or contrast with one another.
3. Iconography - refers to the images or symbols associated with a subject or idea.

Typographic hierarchy - a method of ordering typefaces and fonts in a layout to create divisions that show users where to focus and how to find information.

Importance of color:

1. Add emphasis in your design.
2. Communicate branding.
3. Impact the accessibility.

Benefits of images:

1. Communicate a message without using words.
2. Create emotional response to users.
3. Set a product apart from the competitors. ENhance designs, create connection to the product for users, establish a strong brand presence.

Links:

1. An unclutered page is easier to read.
2. Meet your expectations.
3. Not all links look the same.
4. Use descriptive links.

Buttons:

1. Make buttons look like buttons.
2. Be consistent.
3. Include negative space.

Inputs:

1. Use visual cues.
2. Group inputs using sub-categories.

Layout - refer to specific placements of text, styles, icons and images.

Grids to guide layouts:

Basic grids - intersecting lines divide pages into small squares that allow you to easily lay out elements in a design.

Layout grids - a series of columns and alleys that allow you to organize elements in a design.

Reasons to use grids:

1. Create clarity and consistency.
2. Quicken the design process.
3. Make it easier to collaborate on designs.

Use visual barriers to keep designs neat and organized.

Dividers - lines that separate sections.

Borders - group of lines to break up sections of a page.

Fill - assigns colors to borders and shapes.

Shadow - create dimension in combination with borders or fill.

Negative(white*) space - the gaps between elements in a design, often referred to as negative space(line spacing, margins, padding).

Importance of white space:

1. Provide emphasis on a focal point within the design.
2. Group items together, which is also known as proximity.
3. Gives users a visual break.
4. Increases readibility.

Applying visual design principles to mockups

Mockups - something that attracts attention.

Visual weight - a measure of the force that an element exerts to attract the eye.

Contrast - creation of opposing visual elements to convey emphasis or comparison.

Texture - elements within an object that add depth or a pattern to an object.

Hierachy - refers to a group of elements that are organized in order of importance.

Emphasis is about making an element stand out from the other elements.

Scale - explains the size relationship between a given element and the other elements in the design.

Proportion - the balance or harmony between elements that are scaled.