The document provides an overview of UI/UX design in an Agile framework, emphasizing the importance of user experience and interface design through competitor and customer analysis. It discusses processes such as collaborative design, user-centric approaches, and the iterative development cycle, aiming to align teams on project goals. Additionally, it highlights the roles and responsibilities of various stakeholders including developers, designers, and product managers within the design process.

1. UI/UX DESIGN IN AGILE

2. UI/UX DESIGN
Overview

3. Concept

4. UX
IA
Creation of information
architecture
Content
Creation of content
UI
Visual design
Overview

5. Content building
Information architecture
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?

8. UXD + 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.

12. Competitor analysis

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.

17. Overall content structure

18. Sketch

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

20. User Interface

21. What is this application?
● This is one of famous e-commerce brands in Vietnam
● They use orange color for their unique identify

25. Design progress
Sketch Wireframe Mockup Prototype

26. Collaborative process

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

32. Integrate design
into 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

35. Design process
Prototype
Analyze
Implement
Ideate
Define
User-centered
design

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

42. Thank you!
ai.quach@axonactive.com
tuan.nguyenanh4@axonactive.com