While studying and writing about whether SEO best practices lead to more citations in legal scholarship, I discovered a wealth of other studies that looked at factors that influence citations. Sometimes these findings conflicted. Additionally, many factors were buried in long, complex papers. I wanted to create a website that collected and clearly presented factors beyond quality that tend to increase academic citations.
My Role
UI Designer: sole creator of the UI for this website, including layout, typography, color selection, and concept.
Developer: developed the site from scratch using only HTML and CSS.
Content Creator: conducted research, analyzed studies, and wrote tips summarizing collected studies.
UI Design: Creating a Concept
I set out to make a site with a unique design that would draw people in, while still clearly presenting information. To accomplish this, I went with a dark background and white text. Playing on blueprints, I added lines to add visual interest and direct and bound visitors' attention.
All tips start with a quick summary of the articles, for, against, and finding no impact for the tip.
Studies often disagreed. I decided that the best way to present the conflicts would be to clearly display the number of studies supporting, rejecting, and finding no impact for each tip (see image above). This allows users to quickly get a sense of the level of acceptance each tip has.
To make it easy for all visitors to find information, I used labels and a citation-style agnostic method to present article information.
For users who want to dive deeper, I include all the studies, sorted by their treatment of the tip, at the bottom of each page. Because citation formats vary significantly depending on discipline, I opted to provide the key information used in most citations and label each item — title, author(s), etc. This allows users to find the information that interests them regardless of the citation format they are familiar with. My research showed that sometimes results varied — even within the same study — based on the discipline. To help visitors quickly find the articles most relevant to them, I also laid out the disciplines each article covered with the other citation information.
UI Design: Increasing Contrast
Three color iterations were needed to achieve sufficient contrast.
To help make my site more accessible, I checked color contrasts before launching. This led to several refinements from my original color choices (see image above), which lacked sufficient contrast. When the site launched, I ran it through WAVE and made additional adjustments based on the feedback provided. By making adjustments, I was able to eliminate all "errors" and "contrast errors."
Developer
PageSpeed results from August, 21, 2021: 99 Desktop / 92 Mobile.
I often work with developers to create sites on WordPress. Using a CMS makes content updates easy for clients and allows us to utilize WordPress' comprehensive library of plugins to easily extend functionality. However, I am always looking to improve site speed. I had read that HTML and CSS sites are easier to optimize because you have more control and less complexity. For this site, I planned to make all content updates. So, I decided to build the site with only HTML and CSS. For responsiveness, I relied heavily on CSS Grid. To keep it light, and make it easier on myself, I used CSS animations. After launching the site, I tweaked it a little to get one of the best PageSpeed scores of any of the sites I have worked on: 92 mobile / 99 desktop (screenshot of desktop, above, taken August, 21, 2021).
Final Thoughts
While I usually collaborate with developers when creating sites, I learned a lot and significantly improved my HTML and CSS skills.