UX Design = Creating for the Human Experience

UX and Product Development

Process Alignment

Define

Ideate

Decide

Prototype

Test

Review product prioritization and high level requirements, methodology selection, define information architecture /

Empathy mapping, journey mapping, rapid prototyping, sketch and/or white-board design concepts, user flows

Review of assets from ideate phase, team agreements on approach

Wireframes, visual design, mockups, lo-fi clickable prototypes

In house User testing, In house Usability labs, Paid external User Testing

ReviewInitial team reviews, stakeholder reviews

Iterate back up the process as needed

Development</>

QATesting for bugs, and functional UI problems

3 Iteration Limit

Not all activities are appropriate for every project (e.g. changes to backend services that do not affect the UI will not require visual design).

Iteration is not a bad thing – iterations during UX design are faster and CHEAPER than iterations during development.

Sooo...what is UX Design again?

Understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies that impact of design on an audience.

User Research

Design thinking refers to design-specific cognitive activities that designers apply during the process of designing that puts human concerns at the core of the entire design process.

The process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Interaction Design

One who understands and creates the structural design of shared information environments; the art and science of organizing and labelling websites, apps, intranets, online communities and software to support usability and findability.

Information Architecture

This is the use of imagery, color, shapes, icons, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.

Visual Design

A framework of processes (not restricted to interfaces or technologies) in which the needs, wants, and limitations of end users of a product, service or process are given extensive attention at each stage of the design process.

User Centered Design

DefineBoth the Product Owner, and UX designer

are responsible for ensuring that all information needed to proceed is correct prior

to moving into the ideate stage.

The structural design of shared information environments; the art and science of organizing and labelling websites,intranets, online communities and software to support usability and findability within an emerging community of practice focused on bringing principles of design and architecture to the digital landscape. During this phase a flow chart, feature map, or product map will be created.

Information Architecture

During this phase the front end product owner will meet with the UX designer to go over leadership requirements and product prioritization. From there they will decide the methodologies that will need be used during the design thinking phase. Use cases will be written up as needed.

A team discussion with the Product Owner, User Experience Designer and Dev team to review the Information Architecture and come to an agreement on the methodologies that will be used in the ideate-prototype phases.

Methodology Selection

Product Owner

User Experience

Development

BusinessGoals

IdeateBoth the Product Owner, and UX designer are responsible for ensuring that all ideas

have been properly recorded and saved prior to the decide stage.

A collaborative tool teams can use to gain a deeper insight into their customers. Much like a user persona, an empathy map can represent a group of users, such as a customer segment.

Empathy Map

During this stage the UX Designer will work independently and with team members (as needed) to come up with any and all ideas that will be the basis for building out a prototype.

A visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or brand, over time and across channels.

Journey Map

Sketching is an expression of thinking and problem-solving. It’s a form of visual communication, and, as in all languages, some ways of communicating are clearer than others.

Sketch

Whiteboarding is an expression of thinking and problem-solving. It’s a form of visual communication, and, as in all languages, some ways of communicating are clearer than others.

Whiteboarding

The process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers.

Rapid Prototyping

DecideBoth the Product Owner and UX Designer must

be 100% sure about all the was created and learned from the ideate stage before bringing it

before the development team.

This is the stage in which team agreements are to be made, and the Design Sprint is to begin. Until there are team agreements in place, the Design Sprint stories and tasks can not be created.

Design Sprint

Development Sprint

Design tasks regardless of the stage it is in should fall into its own Sprint. Any development tasks that will come out of the design sprint will fall into following development sprint.

Sprint 1

Sprint 2

Staggered SprintsAgile

PrototypeIteration is not a bad thing – iterations during UX

design are faster and cheaper than iterations during development

These are the schematics or screen blueprints, that act as a visual guide representing the skeletal framework of a website or app. Wireframes are created for the purpose of arranging elements to meet the design goals and requirements.

Wireframes

This is the use of imagery, color, shapes, icons, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.

Visual Design

A mockup, or mock-up, is a to scale or full-size design, used for teaching, demonstration, design evaluation, promotion, and other purposes that will be used to show stakeholders what the final system will look like, and by developers us base their system off of when developing.

Mockups

A clickable prototype that can be sketchy and incomplete, or has complete pixel perfect mockups with the complete visual design. No coding is done or required for this method. This prototype will have most of if not all the characteristics and interaction design of the target product but is otherwise simple, in order to quickly produce the prototype and test broad concepts.

Lo-fi Prototypes

During this stage the UX Designer will work independently and with team members (as needed) to come up with any and all ideas that will be the basis for building out a prototype.

Review This is the main Design Review. There will be

feedback loops, and reviews during the Design Sprint between the UX Designer and

development team members.

The design review is intended to include members of the dev team that will be handling the development of the design tasks as well as all the Product Owner, and stakeholders involved in the project. Prior to any user testing there will need to be agreements made. If iterations are in order they will be discussed by everyone during this review, then the UX Designer and Product Owner will meet with the necessary dev team members to plan out.

TestThis is NOT to be confused with the testing done in

QA. This is strictly User Testing of prototypes.

The point of User Testing is to Quickly and easily understand how the user experience of a site or app works for the User. Through this testing analytics and data will be collected to better understand how a user thought, and felt while using an app. Both positive and negative feedback can come out of this and will be crucial in understanding where improvements need to be made (if any) prior to development. The type of user testing will we do are: Through certain tools user will have access to clickable prototypes. They will be able to go through the prototype on a an actual device as if it were the final product. During this testing the user's, gestures, touches, and interactions will be recorded, analytics will be collected, and a video of the session will be made using the device’s camera.

Remote Usability Testing

This is a place where Usability testing is done. It is an environment where users are studied either as a group or individually interacting with a system for the sake of evaluating the system's usability.

Usability Lab

Is comparing two versions of a web page, or app screen to see which one performs better. You compare the two by showing the two variants (let's call them A and B) to similar users at the same time. The one that gives a better conversion rate or better positive feedback, wins!

A/B Testing

Good UX = Improved ROI

$1 spent on UX =$10 saved on Development =

$100 saved on QA =$1000 saved on Refactor and Rework