UI/UX Design in Agile process
3 likes1,341 views
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.
UI/UX Design in Agile process
- 1. UI/UX DESIGN IN AGILE
- 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.
- 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.
- 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
- 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
- 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