About Me Works

Paradigm

Design System

My Role

UX Research

UI Design

Prototyping

Web Development

Tool

Figma

HTML/CSS

Microsoft Power BI

Team

Anthony Liao

Melissa Wu

Project Overview

Paradigm is a two-member project that I led during my co-op term at Fraser Health Authority in Fall 2020. The project goal was to speed up developer workflows and enable greater visual quality and consistency across all of the department’s interactive data dashboards.

Paradigm accomplishes this by establishing a strict set of design principles on our department's website and attaching a collection of reusable visualization components to assist developers. I was responsible for conducting both generative and evaluative user research, along with prototyping and coding the final website.

FIGURE 1: Screenshots of Paradigm where developers can access guidelines for general design principles and various interactive dashboard elements within Fraser Health's intranet

Process

The process began by employing several UX research and data analysis methods including interviews, affinity mapping, user personas, and journey mapping for an in-depth understanding of the stakeholders and the end-users. 1-on-1 sessions were conducted across 7 developers and 1 product manager to gather insights into their individual needs, pain-points, motivations, and experiences throughout their typical work process.

FIGURE 2: Journey map and user personas of developers; highlighting the opportunities identified for design intervention and developing empathy for the project's target audience based on research findings

Wireframing

The following step was to begin sketching and wireframing the general layout of both the Paradigm website and the individual data visualization components for our department to reuse. It was very important to ensure consistency and quality across all of our designs while following the goals and needs of the developers and the product manager. This process was primarily a continuous iterative cycle between website prototyping and user-testing. I created my designs in Figma to facilitate dynamic and interactive prototypes during user-testing sessions, which reflected a more realistic user experience.

FIGURE 3: A screenshot of wireframes created in Figma that illustrates the general composition of each webpage

Challenge

One of the major challenges that I came across was every developer’s varying interpretation and comprehension of Paradigm’s content. Design principles and languages such as composition, typography, and colour were foreign to many testers. Therefore, descriptions and examples alone were not enough for some developers to adopt properly into the context of their own projects. I tackled this issue by brainstorming and building out 6 different designs based on user-testing feedback. Each developer then compared the prototypes through AB testing, resulting in the final decision of displaying contrasting examples that clearly demonstrates appropriate application scenarios.

FIGURE 4: Screenshots of the design before and after; The original version proved to be too ambiguous while the new design utilizes the UX heuristic, recognition rather than recall, to reduce the cognitive effort by allowing users to directly associate meaning (such as red signifying "no").

Reflection

Overall, the opportunity to utilize UX research methods in a professional setting was very valuable to me as a UX/UI designer. I learned how to carefully listen to stakeholder experiences and critically analyze the most crucial touchpoints for design intervention. I was able to refine and finish Paradigm with excellent results as the department began adopting the design system's standards for creating interactive dashboards. The newer iterations of the dashboards have a significant boost in quality and received great feedback from clients.

Below are some examples of our department's dashboards after Paradigm's introduction:

FIGURE 5: A showcase of my personal application of Paradigm to existing dashboards
FIGURE 6: A showcase of developers' application of Paradigm to new dashboards
  Back