2020 - 2022
Design systemsFront end development

Sourcery

Improving onboarding and visual language for a document retrieval platform

Sourcery

Overview

Sourcery is a not-for-profit web application that connects researchers with archivists who retrieve, scan, and deliver primary source documents on demand.

I joined a small cross-functional team as a UI/UX Developer, contributing both design and frontend implementation across two years of active development.

Problem

When I joined, the product was functional but lacked design consistency. The interface had been built and styled primarily by developers, leaving room for improvement in regards to both aesthetics and user experience.

The lead designer was split across multiple projects, creating a gap between design intent and what got built. The landing page hadn’t been updated since launch, and there was no shared component foundation to build from.

My role & constraints

I worked part-time as the bridge between design and development by creating mockups reviewed by the lead designer, and then implementing them in code reviewed by the lead developer.

This hybrid role gave me direct influence over both what was designed and how it was built, and was particularly valuable within the constraints of a small academic team operating on a not-for-profit budget.

Work

One of my first substantial tasks was designing and implementing a new onboarding flow. Having 2 different key user types, Researchers and Sourcerers, meant that our onboarding flow would have to accomodate both of these personas, with Researchers requiring a payment method on file, and Sourcerers requiring a Stripe connection for payouts.

In addition to new features, I also improved maintainability and consistency by implementing a more robust component set, consisting of commonly used elements, such as cards, accordions, and side navigation. Along with more consisent code, I took the opportunity to polish up design inconsistencies with typographical and spacing styles. I reduced the need for dedicated mockups during testing by working on the front end code myself, which allowed for quick iteration on design inconsistencies.

Case study in progress

I'm still finalizing this case study, but I'd be happy to share more details!

Get in touch
Email LinkedIn GitHub Behance Figma Twitter