I produce a wide variety of UI and UX design deliverables to communicate research findings, design concepts, and final solution to different audiences.
The following deliverables are used at team meetings, client sessions, design presentations, product development, or simply for documentation.
I create different types of flows to drive discussions among Subject Matter Experts(SMEs) and business stakeholders:
- Customer journey maps
- User flows
- Task flows
- Screen flows
- Flow diagrams
For every use case or scenarios, I prefer using user flows or screen flows to show the journey of how a user can complete his/her task from start to end.
Wireframes & Sitemaps
Once the high-level future flows are confirmed, I will translate the complex business requirements into hand-sketched wireframes, focusing on page layout and content hierarchy.
Occasionally, I run card sorting exercises to observe how users categorize different data together. This activity helps me to decide the Information Architecture (IA) of a product.
Before creating any digital screens (mockups), I will schedule a wireframe review session to validate my design concepts. This session helps me to gather feedback from different point-of-views and minimise effort to rework.
I conduct rapid iteration testing throughout the entire design phase:
- Early design stage: concept testing using wireframes or mockups
- Late design stage: usability testing using interactive/coded prototypes
After the wireframe design review, I use Adobe XD, Axure RP or Sketch to create mockups with clear visual hierarchy, contrast accessibility and design consistency. This is the time when I focus on the visual design of the screens, eg: colours, typography and spacing.
Once the visual design is approved, I link up all mockups into an interactive prototype for usability testing. My biggest achievement was that I have created 6 interactive prototypes for a project over a span of 3 months, with a total of 20 to 120 screens per prototype.
Other documentation for design handoffs
Once the design is readied for development, I will prepare the following deliverables:
- design documentation: a file (usually pdf) documenting screen flows, use-cases, scenarios, various screen states, UI component interactions and behaviours
- design assets: prototype link(s), design specification link and other exportable images
Sometimes, I might be requested to code my design in HTML and CSS. When that happens, I will refactor my codes to cater for screen responsiveness, accessibility and device compatibility.
When I am co-creating the future flow with the workshop participants, I will sketch a storyboard on the whiteboard to align everyone. There are also times when I need to draw digital storyboards for business presentations, as shown below.