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 LinkCADRE 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.
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.
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":
Over 30 collected stories were then further "distilled" and further broken down into more bare-bone functional requirements:
After many meetings and conversations, I created a preliminary structure diagram of CADRE:
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.
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:
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.
After finishing up the branding for CADRE, I put together Information Architecture for the new CADRE website:
Wireframes and different versions of mid-fi mockups were created:
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!
Just to showcase some more pages of the final design of the website.
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.
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 cadre.iu.edu 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.
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.