Use Research to Inform Ideation

Empathy maps, personas, user stories, and user journey maps are tools UX designers commonly use to expand our understanding of the people we are designing for. Let’s review those concepts:

• Empathy Maps - an easily understood chart that explains everythong designers have learned about a type of user. explore’ users’ four main motivations: what the user says, thinks, does and feels. The insights gathered from empathy maps help you come up with ideas for solutions to address the user’s real problems.
• Personas - fictional users whose goals and characteristics represent the needs of a larger group od users. Place the users who you are designing for front-and-center. By creating detailed user personas, you can clearly envision potential users that you’d design for.
• User Stories - fictional one-sentence story told from a perona’s point of view to inspire and inform design decisions. determine which user needs are the most critical to address with your designs. This direction will help focus your ideation
• User Journey Maps - the series of experiences a user has as they interact with your product. helps you come up with ideas for designs that truly support the users’ needs and solve their problems
• Problem Statement - is a clear description of the user’s needs that should be addressed. The problem statement will guide the focus of your ideation.

Build Goal Statements

Goal Statement - one or two sentences that describes a product and it’s benefit for the user. goal statements focus the scope for future designs…gives the ideal solution for the design
Goal Statements… focus on who the product will srve, what the product will do, and why the product solves the user’s need.
To determine the who, what and why, refer back to the problem statement(s)

\(\underline{\mbox{ (user's name) } \Large{WHO} }\) is a/an \(\underline{\mbox{ (user characteristic) }\Large{WHO}}\) who needs \(\underline{\mbox{ (user need) }\Large{WHAT}}\) because \(\underline{\mbox{ (insight) }\Large{WHY}}\)

Now to transition from identifying the problem to defining the goal with a goal statement
Goals statements include:

• description of the specific action users can take or what the product will do
• defines who the action will affect
• states the positive impact of the action or why the product solves the user’s need
• outlines success in measurable terms

Our \(\underline{\mbox{ (product) } \Large{WHAT} }\) will let users \(\underline{\mbox{ (perform specific actions) }\Large{WHAT}}\) which will effect \(\underline{\mbox{ (describe who the action will affect) }\Large{WHO}}\) by \(\underline{\mbox{ (insightdescribe how the action will positively affect users) }\Large{WHY}}\)
We will measure effectiveness by \(\underline{\mbox{ (describe how you will measure the impact) } \Large{HOW} }\)

My attempt:

Exemplar:

Goal statement for my sharpen prompt (Portfolio Project #1):

Outline User Flows

Outline a User Flow
User Flow - is the path taken by a typical user on an app or a website, so that they can complete a task from start to finish.
Create user flows before designing an app, because it can help to picture how users will move through an app or website. You will need to determine:

• What actions will users take in the app?
• What decisions will users make?
• What screens will users experience after taking action or making a decision?

• Action - (circle) the actions users take when moving through a product design
• Screen - (rectangle) the screens of a digital product that users will experience while completing tasks
• Decision - (diamond) points in the user flow where users must ask a question and make a decision
• User flow direction - lines with arrows tie everything together

Consider the entire journey the user takes in order to get what they need from the product.

How do user flows compare to other processes:

• A user journey map focuses on the end-to-end use case for one specific user type and one specific user case

• Storyboards are a visual representation of the way that a user interacts with one or multiple areas of your product

• A user flow describes what users see and how they interact with a product as they reach their goal. User flows illustrate all the different paths that users can take to reach their goal.

• Clear an easy flow for users to get from the entry point of opening the app, to completion of the task

• Clearly labeled steps

• Lines and arrows connecting the steps of the user flow

Create Storyboards

Introduction to story boarding user flows
Storyboard - a series of panels or frames that visually describe and explore a user’s experience with a product.

Four elements of a storyboard

1. Character - the user in the story
2. Scene - helps us imagine the user’s environment
3. Plot - the benefit or solution of the design
4. Narrative - the user’s need or problem and how the design will solve the problem

Understand the two types of storyboards

1. Big Picture - (how & why) focuses on the user experience. we want to include emotion in a big picture storyboard. maybe best for early on in the design process when designers are trying to get stakeholders to support their ideas. focuses on what the user needs, their context, and why the product will be useful to the user.
2. Close-up - (what) focuses on the product. what happens on each screen of a product? concentrates on the product and how it works. best used in the middle to the end of design process.

Creating a Big Picture Storyboard

1. Start with a problem statement
2. Create a goal statement
3. Set up the storyboard
4. Add the storyboard scenario - a sentence that sets the narrative for the storyboard
5. Draw one idea per panel - set the scene, then use panels the think about actions that push the stpory forward and how the user feels in each panel
6. Expose pain points for the user along their journey
7. Include the user goal or conclusion in the final panel

For Close-up storyboard: Big picture storyboards and close-up storyboards differ in step five, when you draw each panel. Remember, big picture storyboards focus on the user, while close-up storyboards focus on the product. For this close-up storyboard, think about which product details you want to draw attention to on each panel and why. You want to demonstrate the user flow within the product and how each action within the product will lead to the next screen.

My Attempt:

My Sharpen Prompt big picture My Sharpen Prompt close-up

Get Started with Wireframes

Introduction to Wireframes
A design solves a real problem that users are experiencing…and a strong design always puts the user front and center Fidelity - How closely a design matches the look-and-feel of the final product
Low Fidelity - (lo-fi) Lower amount of complexity. Less refined or polished than the intended product. useful for getting ideas out quickly while leaving room open for exploration.
High Fidelity - (hi-fi) Closely matches the look and feel of the final product. More refined and polished than a lo-fi prototype.
Wireframe - a basic outline of a digital experience, like an app or website. wireframes establish the basic structure of a page.

Purposes of Wireframes

• establish the basic structure of a page
• highlight the intended function of the product
• save time and resources

Start Drawing Wireframes
A good wireframe is all about organizing and communicating information clearly to your colleagues who will implement your design

Industry Standards - common ways to indicate page elements

• Text - horizontal lines
• images - boxes with and X inside
• calls to action - rectangles or circles

Benefits of Wireframes

• Inform the elements to include in your design
• Catch problems early
• get stakeholders the focus on structure (instead of details like font/text)
• Save time and effort
• Iterate quickly

The basics of information architecture

Information Architecture - organizes content to help users understand where they are in a product and where the information they want is.

Importance of Information Architecture

• Organizes and defines the overall structure for the app or site
  
• Provides a high-level view of the product
  
• Help stakeholders review your designs
  
• Helps engineers understand how to organize the data
• Allows your ideas to grow and iterate with the design

Create Paper Wireframes

basic outlines (lo-fi) of a digital experience

Benefits of Paper Wireframes

• Fast
• Inexpensive
• Explore lots of ideas

Create Digital Wireframes

Moving from paper to digital wireframes

• Is my paper wireframe complete?
• Have I received feedback on my paper wireframe?
• Am I ready to consider basic visual cues?

Transitioning to digital:

• Use actual content for important pieces of text, instead of all placeholder text. e.g. section headers and icons.
  
• Lorem ipsum - meaningless placeholder text written in Latin that you can use to show where content will go and how a page will be laid out. To be used in wireframes where bigger chunks of text should be.
• Hold back on adding expressive content ( colors, images, etc )

Benefits of Digital Wireframes

• Pay more attention to details
• Easier to share

Use Gestalt Principles when creating wireframes

Humans naturally notice the whole of something before the parts

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

• Similarity - elements that look similar are perceived to have the same function. When designing a wireframe, consider making elements that have a similar function look similar to give your app a more intuitive user experience.
• Proximity - elements that are close together appear to be more related than things that are spaced further apart. Group like things close together when designing you app to make the grouping more intuitive
• Common Region - elements located within the same area are perceived to be together. use borders in wireframes to group elements together.

Sharpen Prompt: User Flow - Check the status os a recent order

Create a Paper Prototype

Benefits of paper prototypes

• Inexpensive
• Rapid Iteration
• Low Commitment
• Encourage honest feedback
• Collaborative activity

Drawbacks of paper prototypes:

• Hard to interpret (some stretches of the imagination required)
• Need to be tested in person
• Makes remote collaboration difficult

Building paper prototypes is most useful during brainstorming session or for early product testing

Creative ways to make paper prototypes:

• preprinted templates
• index cards
• sticky notes
• stencils
• demo device
• anything you can dream up!

Introduction to Building lo-fi prototypes in Figma

Many of the tools we use can be applied to the development of both lo-fi and hi-fi designs
Many of the skills we’ll learn to build digital prototypes are transferable to other UX design applications like Adobe XD and Sketch.

Wireframes - draw each screen a user might interact with
Prototypes - understanding how users interact with the design (what happens when they press a button or tap a menu)

Understand Ethical and Inclusive Design