University of British Columbia

Project Overview

The Database of Religious History (DRH) is one of the flagship initiatives of the Cultural Evolution of Religion Research Consortium (CERC), based at the University of British Columbia. It is funded by a 6-year, $3 million Partnership Grant from the Social Sciences and Humanities Research Council (SSHRC) of Canada. The DRH aims to bring together data on cultural systems throughout history that will allow statistical analysis, the discovery of new patterns in world history, and the testing of hypotheses about the evolution of human behaviour.

I was the User Interface Designer, working alongside Billy So. Some of my responsibilities included wireframing, visual mockups & animations, and front-end development.

What is the Database of Religious History?

The DRH aims to build the world’s first comprehensive online quantative encyclopedia of religious cultural history. With accessible, rich, and massive historical data, academics will be able to assess the validity of their scholarly generalizations against the historical record. To learn more about the project, feel free to watch this video or visit their website by clicking the button below.

View website

Initial Problem

The DRH team consisted of a small group of academics and computer programmers from UBC. I joined the team about a year in, after the development phase had already started. Most of the back-end was already functional, but the interface that they were using at the time was very difficult to use.

I was asked to join the team as the User Interface Designer, alongside Billy So, who took on the role of User Experience Designer. Our job was to take this enormous, powerful tool and make it usable for everyone by providing all of the functionality through a simple and easy-to-use interface. Making it user-friendly was especially important because we had to cater to the target audience, which was older academics who might not have the same technical skills as younger generations.

Design Process

Since Billy and I worked off-location, other members of the team who worked on-site conducted research, talked with users, and learned their frustrations. Billy and I gathered this information, developed a number of personas, and came up with some actionable recommendations for the new interface.

I started the design process by sketching up possible workflows and wireframes for each task that the user was trying to accomplish. I then prototyped and tested these ideas through photoshop mockups, basic UI animations, and high-fidelity prototypes. After getting approval on these designs, I started on the front-end development of the templates using HTML, CSS & jQuery.

While working on all of this, I maintained a heavy focus on visual design. I intentionally chose specific colors and typography to project a professional feeling and to reinforce the UBC brand. I also had to think of priorities and constraints, making sure all teammates were all on the same page and managing expectations as the project moved forward.


Website Sketches


Website Wireframe


Photoshop Mockup


Website Code


Over the course of a year and a half, we designed workflows for a number of different and complex tasks. Some of these include how allow users would create a new entry in the database, how they would browse & search for existing entries, how they would contribute & input data, and how they can analyze & visualize the data in different ways.

  • Database Screenshot

    Creating a new entry

    A simple 3-step process to define all of the values required to create a new entry.
  • Database Screenshot

    Filling out an entry

    The UI that allows users to contribute data to the database.
  • Database Screenshot

    Browse existing entries

    An extensive browse feature that allows users to look up existing entries in the database, and also view the details of each one.
  • Database Screenshot

    Analyzing data

    Users can select specific variables and import the data it into a bar chart, line graph, or a table of regression coefficients.
  • Database Screenshot

    Data Visualizations

    Users can plot variables onto a map to see if there are any interesting correlations between them during different time periods in history.

Lessons learned

Simply because of the massive scale of this project, working on it gave me the opportunity to refine a lot of of my technical skills. jQuery was something that I used a lot in this project that I never put much focus on before in my previous work.

There were many lessons I that learned just from working with the DRH team. Collaborating with others who didn't have the same design background was often challenging, but it was also very rewarding. There were times where I had to take a step back after proposing an idea that the rest of the team did not fully buy into. This made me question whether or not it was the right choice, or if the idea needed to be refined in order for it to work. These little bumps where I would question my own decisions, although time-consuming, actually improved my design process.