CADRE: Web Design

Crafting the UI/UX for the official website and platform gateway of Project CADRE.

CADRE: Branding

Designing the visual identity of the CADRE project.


The social-credit-based micro-loan solution for Hong Kong Millennials.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link


What is CADRE?

CADRE stands for Collaborative Archive and Data Research Environment and is being developed by Indiana University Network Science Institute (IUNI) and Big Ten Academic Alliance led by Indiana University Libraries. CADRE strives to become a user-friendly research platform that provides sustainable, affordable, and standardized text- and data-mining services for licensed big datasets as well as open and non-consumptive datasets that are too large or unwieldy to work with in existing research library environments.

What I did in the Project

I conducted user research in the early stages to map out potential users' needs; the understanding gained through user research, combined with the development team and our in-house data scientists' insights, structured CADRE's MVP for the alpha launch. I also performed branding/visual identity design for CADRE as well as UI/UX design for both the actual functions of the platform and the landing website. This case study documents the web design portion of my work for this project; read about what I did on the branding/VI aspect here.

User Research

Collecting User Stories for an Abstract Problem

CADRE started off of a vague idea that something could be created to simplify bibliographical querying on massive academic datasets like Web of Science (WoS) and Microsoft Academic Graph (MAG), and reduce the effort and time researchers and data scientists invest to obtain needed data in desirable formats. Yet, this is bound to be a hard-to-address and somehow wicked problem, because our potential users are using these datasets for drastically different purposes, and their research approaches and toolsets are often times unique to their specific research topics; other subordinate factors such as purchasing different versions of datasets, data cleaning, and retrieving required data efficiently with a minimal amount of effort also easily add to the problem's complexity.

Under said circumstances, how do we figure out what our users' actual needs are? We started collecting user stories with a user story request drafted by our own researcher-data-scientist, Xiaoran Yan:

User story requests soon became the user story submission form on our website; I started documenting collected user stories with a excel table, following the structure of "WHO-WHAT-WHY":

Some of the initial user stories, "WHO-WHAT-WHY" formatted.

Over 30 collected stories were then further "distilled" and further broken down into more bare-bone functional requirements:

Building CADRE

Defining the Bones

After many meetings and conversations, I created a preliminary structure diagram of CADRE:

CADRE structure diagram, version 1

This diagram was very important to the team in the early stage of design and implementation and served the purposes of facilitating design discussions and keeping the whole team on the same page.

Wireframing and Prototyping

We decided to take creating the most important and central piece of CADRE - the Query Builder - as our first step. First version of query builder wireframes were created in Balsamiq:

V1 wireframe of CADRE dashboard. As shown in the wireframe, "packages", "projects" and "tools" are the three key types of entities in CADRE system, and this design remained until today.
Part of the Query Builder user flow. User selects the field to query, define the logical rules to match; multiple rules can be added. Allowing adding multiple section in one "query build" enables users to build data pipelines, instead of separated queries.

Designing the CADRE Website

Re-focus: from the Platform to the Website

For a long period of time, our progress on the database management front was stagnant; available manpower was limited, yet various tasks - dataset cleaning, testing, selecting and verifying programming languages, database schemas and storage technologies, and so much more - all required huge amount of hours and attention. On the other aspect, as our team started to apply for research grants, attend academic conferences and events, and maintain conversations with more and more interested researchers who see potential in CADRE, a place where people can find information and learn about CADRE without having to talk to someone is increasingly needed. The team decided to put building the CADRE platform on hold, instead start creating CADRE's official website.

Sketching Up the Website

After finishing up the branding for CADRE, I put together Information Architecture for the new CADRE website:

First version of CADRE website's information architecture, side by side.

The latest CADRE website information architecture after our last content update. White-outlined rectangles inside colored blocks = in-page content section; white-outlined round-tangles = functional component groups/accesses/links.

Wireframes and different versions of mid-fi mockups were created:

From the left: lo-fi wireframe and two different trial versions of mid-fi mockups. The two different versions were used for A/B testing among team members to determine the most welcomed layout.

One thing I definitely wanted to do for a project as special as CADRE was to create a set of visuals - typically illustrations - and use them on the website; custom-created illustrations would greatly improve the perceived completeness of a website, and for sure they will represent and convey CADRE's value, meaning and concept in the best way possible, better than any other re-purposed generic library illustrations. I had a lot of fun creating these illustrations!

I created these four major illustration pieces from scratch. Colors used followed the branding palette. Read more about the branding palette here.

Just to showcase some more pages of the final design of the website.

News & Events page (left) and About CADRE page (right)

The finishing bit of the web design stage for CADRE was marked by new designs that are consistent with the website for the CADRE platform, where our users log in to do their research.

Making CADRE More Accessible to More

Accessibility Audit: Methodology

From August to October 2020, before CADRE's Beta version was launched on Oct 23rd, the team conducted a major accessibility audit which greatly improved both CADRE website and platform's accessibility, with emphasis on several aspects, such as color contrast, facilitating easier structural navigation for Assistive Technology (such as screen readers) users, clearer visual hierarchy, and so on. I led the audit and did most of the work on the design side.

My methodology was simple, not as efficient as expected, but very concrete: each and every page reachable within the domain was visited then inspected with the WAVE plugin for Chrome; all Errors, Contrast Errors and Alerts (see the screenshot below) are checked one by one, design updates/solutions were then created, aiming to address as many shown problems as possible. The corresponding design updates/solutions were then forwarded to our web developer, Ben, through Zeplin where each update/solution is mapped to the specific elements requiring changes on each page, for convenient review and quick pinpointing of problematic elements.

WAVE inspection result on a random webpage. Accessibility issues are categorized and the plugin would mark out each issue on the webpage.
How design changes were marked, communicated and checked between Ben and me in Zeplin.

Finally, as a summary to the completion of the accessibility audit, I put together a report showcasing all changes we made to the website and the platform. Read the report here.