My design deliverables

by | Jun 29, 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, presentations, implementation and documentation.

Flows

My understanding of business operation processes is categorised into different flows such as:

  • Customer journey maps
  • User flows
  • Task flows
  • Screen flows
  • Flow diagrams

These flows are extremely useful in driving discussions among Subject Matter Experts(SMEs) and business stakeholders.

These are the potential outcomes after running workshops with 5-10 users.

Considering research insights, I design screen flows for every use-case (potential scenarios in each user task). Usually, every step in the flow will tie to a new screen or interaction in the prototype.

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

Wireframes & Sitemaps

A set of detailed wireframes are hand-sketched when the high-level future flows are confirmed. This is my favourite design activity as I enjoy translating complex business requirements into suitable page layouts 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 the product and create a sitemap.

Initial concept development via sketching of wireframes

A designer cannot create a usable and useful product without hearing continuous feedback from different point-of-views. To prevent needless rework, I always validate my design concept before creating any digital screens.

The purpose of a wireframe review session is to ensure that the design concept suits users’ needs and that I am prioritizing data correctly in each screen.

Testing can be conducted at any stage. I showcase mockups for concept testing and use interactive or coded prototypes for usability testing.

Evaluation of design solution can be done with an individual or a group of users

Mockups

Finally, I design some key screens using a prototyping tool (Adobe XD or Axure RP) along with applying visual design best practices like colours, typography and spacing to create visual hierarchy.

These static screens are called mockups, which aims to give users a sense of the potential look-and-feel of the final product.

A sample of e-commerce mockups (mobile application)

Prototypes

Once the general look-and-feel is approved, I continue to design the intermediate screens and link them up according to the validated screen flows earlier on. So far, the maximum number of interactive prototypes I have created for a project is 6, 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 user-tested and iterated, I prepare assets, auto-generated prototype link(s) and design specification link to handoff to the developers. If there are missing interactions or screen states in the prototype, then I will create a separate design specification deck with more details.

Sometimes, I might be requested to code my design in HTML and CSS. When that happens, my codes will cater for screen responsiveness, accessibility and device compatibility.

All kinds of documentation and testings to help the developers
An example of what will be included in the prototype(s) and design spec(s)

Storyboards

I co-create the future flow with user representatives during the storyboarding session. The outcome will always be a hand-drawn screen flow on the whiteboard (refer to the first picture under “Flow”).

I create storyboards in either digital illustrations, photos or vectors only when there is a need for business presentations.

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 !!