Design Thinking
Design process
My end-to-end design process that helps tackles
design problems and ensures a smooth project
delivery process.
User research
Conduct user research to understand the goals / problems and gain
better insights about the existing / potential users.
Sometimes I combine user search with market research and competitor
research to define the value propositions of the products.
User interviews, surveys and user testing are the main methods I use to
conduct user research.
User stories
Extract user stories from problem statements of the last step. Clarify the
features, user flows and outcomes included in these user stories.
01
Customer journey map
Create customer journey maps to evaluate the features, efficiency, satisfaction
levels of the customer journey.
02
Swimlane diagram
Create swimlane diagram to visualize the user flows. Sometimes I also use ERD
diagrams to visualize the data flows.
03
User stories
Document user stories (I normally use Jira/Confluence/Notion) and provide
descriptions, screenshots, story points to the tickets.
04
Tasks and tickets
Discuss with technical teams and convert the selected user stories to actionable
tasks.
05
Sprint planning
Work with the whole team to plan the project scope and timelines.
Wireframing
Ideate and wireframe the user flows, test wireframes in iterations to
refine the key inputs and outputs in the user flow.
01
Ideation
Only use greyscale wireframes (remove the distractions of colours and iterate the
process faster) to conduct user testing and improve the design.
02
Testing
Conduct interviews / user testing to evaluate the efficiency and usability of the UI
and UX.
03
Feedback
Organise, analyse user feedback from the iterative wireframing and testing
process. Finalise design and prepare for high-fidelity designs.
Prototyping
Create high-fidelity prototypes and interactive prototypes in Figma.
Consider brand system and design systems (or establish a new one) in
the process.
Communicate with technical / delivery teams regarding the feasibility of
the features before finalising the design.
Run user testing sessions with prototypes and/or interactive prototypes
to gather both quantitative and qualitative data, finalise the design using
the analytical results.
Ensure each design ticket is delivered on time and aligns with the defined
requirements. Track progress/issues/follow-ups.
Design System
Collaborate closely with design team members, product managers and
developers, to refine or establish scalable product design systems using
Figma variables and tokens, ensuring the highest level of consistency and
accessibility across the platforms, including the data visualisation
patterns such as dashboards.
Consider technical capabilities and constraints when developing the
design systems. Consolidate the custom use cases with UI/UX design
principles, patterns, libraries and frameworks (such as Google Material UI,
iOS/Mac OS design systems, Bootstrap, React.js, Tailwind CSS, etc.)
depending on the individual project tech stacks.
Document design system component libraries, guidelines and change
logs in a sharable format for cross-functional teams.
Delivery
Document the design details including specs, responsive behaviours,
interactions and example code snippets when handing over the design to
development teams, making sure a mutual understanding of the
development requirements and a clear documentation at a shared place
in the project management tools (Jira/Notion/DevOps).
Facilitate with QA processes after tickets are completed. Assist with
sprint reviews and retrospectives to continuously improve the delivery
process.
Design Thinking
Design process
My end-to-end design process that helps tackles
design problems and ensures a smooth project
delivery process.
User
research
Conduct user research to understand the goals / problems and gain
better insights about the existing / potential users.
Sometimes I combine user search with market research and competitor
research to define the value propositions of the products.
User interviews, surveys and user testing are the main methods I use to
conduct user research.
User
stories
Extract user stories from problem statements of the last step. Clarify the
features, user flows and outcomes included in these user stories.
01
Customer journey map
Create customer journey maps to evaluate the features, efficiency, satisfaction
levels of the customer journey.
02
Swimlane diagram
Create swimlane diagram to visualize the user flows. Sometimes I also use ERD
diagrams to visualize the data flows.
03
User stories
Document user stories (I normally use Jira/Confluence/Notion) and provide
descriptions, screenshots, story points to the tickets.
04
Tasks and tickets
Discuss with technical teams and convert the selected user stories to actionable
tasks.
05
Sprint planning
Work with the whole team to plan the project scope and timelines.
Wirefram-
ing
Ideate and wireframe the user flows, test wireframes in iterations to
refine the key inputs and outputs in the user flow.
01
Ideation
Only use greyscale wireframes (remove the distractions of colours and iterate the
process faster) to conduct user testing and improve the design.
02
Testing
Conduct interviews / user testing to evaluate the efficiency and usability of the UI
and UX.
03
Feedback
Organise, analyse user feedback from the iterative wireframing and testing
process. Finalise design and prepare for high-fidelity designs.
Prototyp-
ing
Create high-fidelity prototypes and interactive prototypes in Figma.
Consider brand system and design systems (or establish a new one) in
the process.
Communicate with technical / delivery teams regarding the feasibility of
the features before finalising the design.
Run user testing sessions with prototypes and/or interactive prototypes
to gather both quantitative and qualitative data, finalise the design using
the analytical results.
Ensure each design ticket is delivered on time and aligns with the defined
requirements. Track progress/issues/follow-ups.
Design
System
Collaborate closely with design team members, product managers and
developers, to refine or establish scalable product design systems using
Figma variables and tokens, ensuring the highest level of consistency and
accessibility across the platforms, including the data visualisation
patterns such as dashboards.
Consider technical capabilities and constraints when developing the
design systems. Consolidate the custom use cases with UI/UX design
principles, patterns, libraries and frameworks (such as Google Material UI,
iOS/Mac OS design systems, Bootstrap, React.js, Tailwind CSS, etc.)
depending on the individual project tech stacks.
Document design system component libraries, guidelines and change
logs in a sharable format for cross-functional teams.
Delivery
Document the design details including specs, responsive behaviours,
interactions and example code snippets when handing over the design to
development teams, making sure a mutual understanding of the
development requirements and a clear documentation at a shared place
in the project management tools (Jira/Notion/DevOps).
Facilitate with QA processes after tickets are completed. Assist with
sprint reviews and retrospectives to continuously improve the delivery
process.
Design Thinking
Design process
My end-to-end design process that helps tackles
design problems and ensures a smooth project
delivery process.
User
research
Conduct user research to understand the goals / problems and gain
better insights about the existing / potential users.
Sometimes I combine user search with market research and competitor
research to define the value propositions of the products.
User interviews, surveys and user testing are the main methods I use to
conduct user research.
User
stories
Extract user stories from problem statements of the last step. Clarify the
features, user flows and outcomes included in these user stories.
01
Customer journey map
Create customer journey maps to evaluate the features, efficiency, satisfaction
levels of the customer journey.
02
Swimlane diagram
Create swimlane diagram to visualize the user flows. Sometimes I also use ERD
diagrams to visualize the data flows.
03
User stories
Document user stories (I normally use Jira/Confluence/Notion) and provide
descriptions, screenshots, story points to the tickets.
04
Tasks and tickets
Discuss with technical teams and convert the selected user stories to actionable
tasks.
05
Sprint planning
Work with the whole team to plan the project scope and timelines.
Wirefram-
ing
Ideate and wireframe the user flows, test wireframes in iterations to
refine the key inputs and outputs in the user flow.
01
Ideation
Only use greyscale wireframes (remove the distractions of colours and iterate the
process faster) to conduct user testing and improve the design.
02
Testing
Conduct interviews / user testing to evaluate the efficiency and usability of the UI
and UX.
03
Feedback
Organise, analyse user feedback from the iterative wireframing and testing
process. Finalise design and prepare for high-fidelity designs.
Prototyp-
ing
Create high-fidelity prototypes and interactive prototypes in Figma.
Consider brand system and design systems (or establish a new one) in
the process.
Communicate with technical / delivery teams regarding the feasibility of
the features before finalising the design.
Run user testing sessions with prototypes and/or interactive prototypes
to gather both quantitative and qualitative data, finalise the design using
the analytical results.
Ensure each design ticket is delivered on time and aligns with the defined
requirements. Track progress/issues/follow-ups.
Design
System
Collaborate closely with design team members, product managers and
developers, to refine or establish scalable product design systems using
Figma variables and tokens, ensuring the highest level of consistency and
accessibility across the platforms, including the data visualisation
patterns such as dashboards.
Consider technical capabilities and constraints when developing the
design systems. Consolidate the custom use cases with UI/UX design
principles, patterns, libraries and frameworks (such as Google Material UI,
iOS/Mac OS design systems, Bootstrap, React.js, Tailwind CSS, etc.)
depending on the individual project tech stacks.
Document design system component libraries, guidelines and change
logs in a sharable format for cross-functional teams.
Delivery
Document the design details including specs, responsive behaviours,
interactions and example code snippets when handing over the design to
development teams, making sure a mutual understanding of the
development requirements and a clear documentation at a shared place
in the project management tools (Jira/Notion/DevOps).
Facilitate with QA processes after tickets are completed. Assist with
sprint reviews and retrospectives to continuously improve the delivery
process.