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.

The image featured in the middle of the about us page
The image featured in the middle of the about us page
The image featured in the middle of the about us page

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.

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Wirefram-ing

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.

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Prototyp-ing

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.

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2

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.

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2

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.