SlideShare a Scribd company logo
UI/UX DESIGN IN AGILE
UI/UX DESIGN
Overview
Concept
UX
IA
Creation of information
architecture
Content
Creation of content
UI
Visual design
Overview
Content building
Information architecture
Visual design
Overview
This action familiar with:
- User experience design?
Or
- User interface design?
UXD or UID?
This action familiar with:
- User experience design?
Or
- User interface design?
UXD or UID?
UXD + UID =
UX is a term for the sum of all the interactions users
have with a product, service, or brand.
● Competitor analysis
● Customer analysis
● Overall content structure
● Help developing the content so it best fits the user.
● Sketch
Responsibilities
Competitor analysis
Strengths Weaknesses
Opportunities Threats
● Competitor analysis in marketing and strategic
management is an assessment of the strengths and
weaknesses of current and potential competitors.


● This analysis provides both an offensive and defensive
strategic context to identify opportunities and threats.
Example
I want take a bike from PVcombank building to Melia resort.
I still don't have any account or install drive app before.
Competitor analysis
Customer analysis
● A customer analysis (or customer profile) is a
critical section of a company's business plan or
marketing plan.
● It identifies target customers, ascertains the
needs of these customers
● And then specifies how the product satisfies
these needs.
Customer analysis
User research is about
gathering users' wants
and needs.
Extract pain points,
goals, and persona
information and
highlights the order of
the actions
Personas are imaginary,
yet realistic and detailed
descriptions of the
users.
UI/UX Design in Agile process
Overall content structure
Help developing the
content so it best fits
the user.
Overall content structure
Sketch
Then that designers gonna do all of the graphic and
visual design for the project. If it’s an interface for an
application or a website we’re talking.
● Color palette
● Typography
● Buttons
● Interactions
● Animations
● Prototype
Responsibilities
User Interface
What is this application?
● This is one of famous e-commerce brands in Vietnam
● They use orange color for their unique identify
UI/UX Design in Agile process
UI/UX Design in Agile process
UI/UX Design in Agile process
Design progress
Sketch Wireframe Mockup Prototype
Collaborative process
DeveloperDesignProject
manager
Customer
Traditional Collaboration Process
Traditional process is a liner flow,
a sequential process.
Deal with issues in the design
Potential development issues can be researched and
tackled in the design stage – and alternative solutions
planned – before any programming takes place.
Potential lack of flexibility
There may be issues with the flexibility of the model to
cater for new developments or changes of
requirements which may occur after the initial
consultation. Changes due to business plans or market
influences may not have been taken into account when
planning is all done up front.
Longer delivery time

Projects may take longer to deliver, compared to using
an iterative methodology such as Agile.
No communication One-side view PM is the one has responsibility
The Problem
Design process take a lot of time
"Collaborative design is all about getting
multiple perspectives on a problem”
Goal of collaboration modal
We'll need collaboration model
between the development team
and the product team
Each team works
independently on its own
priorities
Communication and
collaboration becomes more
efficient as the two teams
Both team move in the
same direction to make
project successful
Developer
Design
Project
manager
Customer/
PO
Collaboration
Process
Product/
Customer
needs
Product/

Customer
needs
Stakeholders will works under
the role in the project
Development team will
contribute to the success of
product
Product-centric
Make sure build the right
things that user needs
Customer also contribute during
the development process
Integrate design
into development process
The Solution - Lean UX
Cross-functional team
Teams cross-functional has
sustainable connection

Always keep under 10 team
member to focus on
communication, friendship, focus
Progress = outcomes, not out put
Progress has evaluated by the
business goal (outcome), not feature
or services. Focus on problem helps
provide outcomes.
User-Centricity
As soon as received feedback from
customer, the rate success is higher
Get out of deliverables business
Focus on client and product than
deliverables business
Communication between stakeholders Multiple perspective The responsibility
The Benefit
Design process
Prototype
Analyze
Implement
Ideate
Define
User-centered
design
Design & Developers:

Invite stakeholders in to kickoff meeting, sharing project poster
Define the problem, research for some insights
Get the developer perspective.
Designers: 

look for best practice pattern

Try to come up with solution
Developers: 

Contribute the idea based on the research
and their experience
Define
Ideate
Design process
Designers 

create high-fidelity prototype

Get feedback from product side, clients

Developers 

contribute based on technical perspective
Designers 

Export all asset files
Designers

UI testing, usability testing
Prototype
Analyze
Implement
Design process
Week 1
Weekly demo
Planning 1

Design planning 1
Design review
Weekly demo

Grooming meeting
Kick-off meeting
Mon Tue Wed Thu Fri
Planning 2
Retro meeting
Design planning 2
Design retro
Week 2
Triad sync
Triad sync
Design sparring
Start
End
Productive space Productive space Productive space
Productive space Productive spaceProductive space Productive space
How to create a collaboration modal
Collaboration modal
Demo features of the sprint that have been released
to Staging
Weekly demo
• Plan the upcoming sprint
• Set the sprint goals
• Move issues into the sprint backlog and kick-off the
sprint in each team
Sprint planning 1
• Internal sprint planning of the engineering team (without
PO) to clarify open questions
• Estimate the effort for the scope of the sprint
Sprint planning 2
• What went well, what didn't go so well during the lat sprint
• Identify areas for improvement for the team
Sprint retrospective
• Present high level topics (not story by story)
• Discuss which team will be working on which topics
• Grooming will be used to assign and discuss stories
in the planning sessions of each team in PL1 + PL2
Sprint grooming
• We’ll assign a “Customer value”: how much value does
fixing this issues bring to our customers?
• We’ll assign a “Complexity value”: how much engineering
effort is it to fix this issue?
Triad sync
• Walk through the product features that needs design
• Bounce around ideas and discuss obstacles
• Define a set of goals, expectations, and action items 
Kick-off meeting
• Review designs are ready for implement
Design review
Wrap-up
Have a very clearly defined problem to solve, or a big picture
defined that you can sprint towards.
Involve the entire team in the process
Sparring new feature
Avoid to miscommunication between users and stakeholders
Q&A
Thank you!
ai.quach@axonactive.com
tuan.nguyenanh4@axonactive.com

More Related Content

UI/UX Design in Agile process

  • 4. UX IA Creation of information architecture Content Creation of content UI Visual design Overview
  • 6. This action familiar with: - User experience design? Or - User interface design? UXD or UID?
  • 7. This action familiar with: - User experience design? Or - User interface design? UXD or UID?
  • 9. UX is a term for the sum of all the interactions users have with a product, service, or brand. ● Competitor analysis ● Customer analysis ● Overall content structure ● Help developing the content so it best fits the user. ● Sketch Responsibilities
  • 10. Competitor analysis Strengths Weaknesses Opportunities Threats ● Competitor analysis in marketing and strategic management is an assessment of the strengths and weaknesses of current and potential competitors. 
 ● This analysis provides both an offensive and defensive strategic context to identify opportunities and threats.
  • 11. Example I want take a bike from PVcombank building to Melia resort. I still don't have any account or install drive app before.
  • 13. Customer analysis ● A customer analysis (or customer profile) is a critical section of a company's business plan or marketing plan. ● It identifies target customers, ascertains the needs of these customers ● And then specifies how the product satisfies these needs.
  • 14. Customer analysis User research is about gathering users' wants and needs. Extract pain points, goals, and persona information and highlights the order of the actions Personas are imaginary, yet realistic and detailed descriptions of the users.
  • 16. Overall content structure Help developing the content so it best fits the user.
  • 19. Then that designers gonna do all of the graphic and visual design for the project. If it’s an interface for an application or a website we’re talking. ● Color palette ● Typography ● Buttons ● Interactions ● Animations ● Prototype Responsibilities
  • 21. What is this application? ● This is one of famous e-commerce brands in Vietnam ● They use orange color for their unique identify
  • 27. DeveloperDesignProject manager Customer Traditional Collaboration Process Traditional process is a liner flow, a sequential process. Deal with issues in the design Potential development issues can be researched and tackled in the design stage – and alternative solutions planned – before any programming takes place. Potential lack of flexibility There may be issues with the flexibility of the model to cater for new developments or changes of requirements which may occur after the initial consultation. Changes due to business plans or market influences may not have been taken into account when planning is all done up front. Longer delivery time
 Projects may take longer to deliver, compared to using an iterative methodology such as Agile.
  • 28. No communication One-side view PM is the one has responsibility The Problem Design process take a lot of time
  • 29. "Collaborative design is all about getting multiple perspectives on a problem”
  • 30. Goal of collaboration modal We'll need collaboration model between the development team and the product team Each team works independently on its own priorities Communication and collaboration becomes more efficient as the two teams Both team move in the same direction to make project successful
  • 31. Developer Design Project manager Customer/ PO Collaboration Process Product/ Customer needs Product/
 Customer needs Stakeholders will works under the role in the project Development team will contribute to the success of product Product-centric Make sure build the right things that user needs Customer also contribute during the development process
  • 33. The Solution - Lean UX Cross-functional team Teams cross-functional has sustainable connection
 Always keep under 10 team member to focus on communication, friendship, focus Progress = outcomes, not out put Progress has evaluated by the business goal (outcome), not feature or services. Focus on problem helps provide outcomes. User-Centricity As soon as received feedback from customer, the rate success is higher Get out of deliverables business Focus on client and product than deliverables business
  • 34. Communication between stakeholders Multiple perspective The responsibility The Benefit
  • 36. Design & Developers:
 Invite stakeholders in to kickoff meeting, sharing project poster Define the problem, research for some insights Get the developer perspective. Designers: 
 look for best practice pattern
 Try to come up with solution Developers: 
 Contribute the idea based on the research and their experience Define Ideate Design process
  • 37. Designers 
 create high-fidelity prototype
 Get feedback from product side, clients
 Developers 
 contribute based on technical perspective Designers 
 Export all asset files Designers
 UI testing, usability testing Prototype Analyze Implement Design process
  • 38. Week 1 Weekly demo Planning 1
 Design planning 1 Design review Weekly demo
 Grooming meeting Kick-off meeting Mon Tue Wed Thu Fri Planning 2 Retro meeting Design planning 2 Design retro Week 2 Triad sync Triad sync Design sparring Start End Productive space Productive space Productive space Productive space Productive spaceProductive space Productive space How to create a collaboration modal
  • 39. Collaboration modal Demo features of the sprint that have been released to Staging Weekly demo • Plan the upcoming sprint • Set the sprint goals • Move issues into the sprint backlog and kick-off the sprint in each team Sprint planning 1 • Internal sprint planning of the engineering team (without PO) to clarify open questions • Estimate the effort for the scope of the sprint Sprint planning 2 • What went well, what didn't go so well during the lat sprint • Identify areas for improvement for the team Sprint retrospective • Present high level topics (not story by story) • Discuss which team will be working on which topics • Grooming will be used to assign and discuss stories in the planning sessions of each team in PL1 + PL2 Sprint grooming • We’ll assign a “Customer value”: how much value does fixing this issues bring to our customers? • We’ll assign a “Complexity value”: how much engineering effort is it to fix this issue? Triad sync • Walk through the product features that needs design • Bounce around ideas and discuss obstacles • Define a set of goals, expectations, and action items  Kick-off meeting • Review designs are ready for implement Design review
  • 40. Wrap-up Have a very clearly defined problem to solve, or a big picture defined that you can sprint towards. Involve the entire team in the process Sparring new feature Avoid to miscommunication between users and stakeholders
  • 41. Q&A