Journal of Critical Incidents

The Journal of Critical Incidents is an online archive that contains scholarly articles written by university professors and other experts in their field. Dr. Brotherton, a professor at Ferris State University, runs the Journal of Case Incidents website. Outdated, and not user friendly by any means, Dr. Brotherton came to us to design a more attractive, and more importantly, more usable website.

The Problem

The main problem the site had was that it didn't have much content. With only one page, the only content the JCI site had was basic site information, and contact info to submit and review case studies. Without a way to properly upload, review, and keep track of who was reviewing what and when, the JCI website was very difficult to use for its intended purpose. Along with this, we were also passing our eventual designs to the seniors in the development program at the Grand Rapids Ferris campus. How do we create a usable, functional website, and how do we pass on our designs to be successfully built out by developers?

Research

We interviewed Dr. Brotherton about who uses the website, and why. We concluded that it was him, the site administrator, and those in the academic field that write scholarly articles for different reasons: professors writing case studies to secure their tenure or experts writing about their academic research, and graduate students reading case studies to use in their own research.

User Interviews

The Solution

A website with two sides: the initial website contains information about case studies and conference information, as well as an archive, while the logged-in version of the website provides more to the user. Once logged in, the user can use a dashboard to track notifications, upload articles, review other articles, and as an administrator, assign tasks to other users.

User Testing

Findings

Design

The design is interesting, yet professional, and uses the colors of the JCI logo. Once the designs were completed, each member of my team took part in building a front-end style guide. This guide was made using the philosophy of Atomic Design: Code the smallest bits and pieces of design, and build on them so that they can create their own separate modules. We used this to send to the developers so that all they have to do is put the pieces together to accurately build the website. While in the end a few of the most important parts of the design were lost in translation (like the font family used), overall the website looked similar to what we the designers had initially built.