2. 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
Review
Initial team reviews, stakeholder reviews
Iteratebackuptheprocessasneeded
Development
</>
QA
Testing 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.
3. 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
4. Define
Both 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
Business
Goals
5. Ideate
Both 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
6. Decide
Both 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 Sprints
Agile
7. Prototype
Iteration 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.
8. 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.
9. Test
This 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
10. Good UX =
Improved ROI
$1 spent on UX =
$10 saved on Development =
$100 saved on QA =
$1000 saved on Refactor and Rework