My design deliverables

by | Jun 30, 2020

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.

Flows

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
These are the potential outcomes after running workshops with 5-10 users.

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.

A low-fidelity flow is sufficient to start a productive discussion among the project team.

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.

Initial concept development via sketching of wireframes

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
Evaluation of design solution can be done with an individual or a group of users

Mockups

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.

A sample of e-commerce mockups (mobile application)

Prototypes

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.

This is a simple e-commerce prototype with 2 flows

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.

All kinds of documentation and testings to help the developers

Storyboards

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.

Narrate the future journey using stock photos and mockups
Narrate the future journey using hand-drawn illustrations
Compare the current and future journey using hand-drawn illustrations
Using vectors to create infographics
error: Content is protected !!