CiteWeb
Project lead, designer, and researcher
Learning is a universal experience. We've all been students at one point, and writing papers is an inevitable part of the process. Accumulating sources, identifying key information, and writing bibliographies are all key elements in a good paper, but too many tools are bogged down by intrusive advertisements that get in the way of their functionality. CiteWeb is an application that not only helps students create proper citations but manage bibliographies for multiple projects.
01
The Problem
Students need an easily managed citation tool that helps them gather their thoughts, manage bibliographies, and visualize their ideas.
02
Demographics
I began my research by looking into citation services online. Since many of these services paywall portions of their content, they make it inaccessible to young students starting out their academic journey. I wanted CiteWeb to be a product that is accessible and has longevity, able to be used throughout students' academic careers.
03
Market Analysis & Insights
There are plenty of writing companion apps that students and professionals can use, but they are complicated and easily cluttered by adding too many notes. Users are markedly constrained by having to use multiple apps to accomplish one goal: one for sources and notes, one for citations, and one for organizing their project as a whole. It's easy for items to fall through the cracks and get lost. CiteWeb resolves this by keeping an export-ready bibliography for users as they update their sources with the Citation Helper tool.
​
Younger users need a simple, tactile approach to citations that guides them through the early stages of writing a paper, while users further along in their academic career need a robust application that can fulfill their needs across multiple projects.
04
Sketches
I drafted my ideas using paper and pencil, trying to put as many ideas to paper as I can. I added notes on functionality and potential features in the margin as well as the start of information architecture, mapping out which pages linked to one another.
05
Mockups
I went with a simple red, black, and white color scheme, keeping pops of color limited to items that are currently highlighted or interactable. CiteWeb needs to appeal to a wide age range, so its color scheme could not be too dull (boring for younger users) or too bright (childish for older users). Following the insights I gleaned from initial feedback, I added headers to the notes as well as the ability to add sub-folders in projects for those who want more opportunities for organization.
Icons denote the type of source in each bibliography, increasing the amount of information users can digest in a single glance.
08
Prototype
The last paper prototype I assembled had the updated hierarchy, icon labels, and notes with headers. The movement of notes felt natural and users across age groups enjoyed being able to reorganize their ideas according to their preferences.
09
Final Thoughts
CiteWeb taught me a lot of things, designing for drastically different age groups chief among them. Children, teenagers, and adults all have different needs and preferences, but I found that ensuring the design was accessible to those with the least experience (young children) meant that users from across my targeted demographics were able to navigate the product with ease.
I set out to create a product that could grow with students, and I believe that I achieved it with CiteWeb. If I were to revisit this project, I'd like to explore creating digital prototypes as well as a mobile version.