Journal of Critical Incidents

UX/UI
Dr. Timothy Brotherton
Spring 2016

A website, with the help of my team (Kaylee Maddox, Hannah Winkler, Audrey Smail, and Blake Royer) to upload and review case incidents (overseen by a professor at my university) was designed, along with a pattern library, that was later passed on to developers that were in a capstone class at Ferris State University in Grand Rapids. My role was that I made the initial site design and helped the rest of the group in building out the design and components to give to the developers.

Journal of Critical Incidents

UX/UI
Dr. Timothy Brotherton
Spring 2016

A website, with the help of my team (Kaylee Maddox, Hannah Winkler, Audrey Smail, and Blake Royer) to upload and review case incidents (overseen by a professor at my university) was designed, along with a pattern library, that was later passed on to developers that were in a capstone class at Ferris State University in Grand Rapids. My role was that I made the initial site design and helped the rest of the group in building out the design and components to give to the developers.

RESEARCH

Previously, the website for the Journal of Critical Incidents wasn't practical; it had only one page, and only listed an email address to send in incidents. Everything was managed via email, which eventually came to be too much. Professors seeking tenure and those doing research in their fields need a functional website in order to submit, review, and access case studies.

CHALLENGES

  1. How will interior functions be managed? I.E. uploading, reviewing, administration, etc.
  2. What will the website have on the pre-login pages?
  3. How will the design be successfully passed off to developers?

SOLUTION TO CHALLENGE 1

A dashboard was developed containing tabs depending on each user's assigned role: editor (only one person had this role, Dr. Brotherton), author, and reviewer. Each tab contained the actions that needed to be carried out in each role. The editor assigns incidents to users, writes announcements, and other admin tasks. Authors submit their papers to the site, so a file upload page was necessary, as well as a log that kept track of all the incidents that were submitted. Reviewers needed a way to view files, keep track of what they'd reviewed so far and what still needed to be reviewed, and have a log of incidents that were reviewed in the past.

SOLUTION TO CHALLENGE 2

The exterior portion of the site contained announcements, information about the site itself and its purpose, and an archive so that people that needed to use the incidents for research could easily find them based on subject, date, or by using the search bar.

SOLUTION TO CHALLENGE 3

A pattern library using atomic design was created so that developers could take pre-coded pieces and arrange them in their product. Atoms were created as the base units: colors, fonts, button radius, etc. Molecules, the next level of atomic design, are atoms combined into small pieces of stand-alone objects, like headlines and paragraph combinations, or form titles and form fields. Organisms, the final level, are components that can stand by themselves, like full forms, dashboard tabs, etc.