Each journal entry includes lots of information to display, from contact info to submission requirements. All of it needed to be organized in a clear manner and easily accessible. The old design used an expandable card format, which felt appropriate, but the data was hard to make sense of quickly because of its organization. Colors, metrics, and other elements felt arbitrarily chosen and unsettled, leading to information overload for users.
Old journal entries and card design
Redesigning the journal entries
Starting from scratch away from the visuals, I listed out all the data types into categories ranked by customer importance. Using this new hierarchy, I used gestalt principles of visual grouping to mockup a new card design. Overview data would be shown on the collapsed view for easy scanning. Contact info, metrics, and publishing processes would be separated into tabs within the expanded detail view.
I also created a table view for the entries for even quicker scanning, but because of issues with piracy in the past and the ease of printing out the entire database, we settled on the larger card format only.
Table and card view concepts
Our in-house metrics and other industry terminology can be hard to understand, so I set out to design some helpful guides. I created onboarding screens for each of the metrics, explaining how they were calculated and how to use them. Tooltips, icons, and other standard help strategies were included throughout the site as well.
Data states and help elements
Cabells Classification Index
The most difficult element to work on was our in-house metric, the Cabells Classification Index—aggregated numbers used to find the top journals within each academic discipline. In the past, we had displayed the number using color-coded medals, radar charts, and list of percentages (all at the same time). It was hard to decipher what the data meant. The reason it was difficult to represent was because of the variation and usage of the data; a journal could have one number or as many as 17, without any indication of whether a number was good or bad relative to another.
After lots of bad options and failed designs, I settled on a coxcomb chart or aster plot, a variation on the pie chart and good choice for presenting information for those who are easily confused by the information. Each section is equally divided, with the radius width changing depending on the value. The slices are arranged around the circle in a spiral in descending order, making it easy to compare differences. Users could then quickly scan to see which discipline was performing best. To supplement the visual cues, a list of specific numbers could also be displayed next to the chart; topics could also be shown within each discipline.
This was my solution for a progressive display of complex information. It is not perfect, but it works well as a catch-all solution. As an extra benefit, I was able to transform the nautilus shape into a product icon to be used in marketing.
CCI chart design and marketing symbol
Color coding journal disciplines
To further help users quickly scan journals, I color coded each of the disciplines. This wasn’t necessary, but it added an extra layer of subconscious pattern identification. Users could start to associate disciplines with specific colors, making it easier to identify their choices. I applied this to the CCI, journal icons, and anywhere else it made sense to do so.
A static list worked fine for us in the past. Our database was not originally setup to show dynamic data because we partially relied on one set of third-party data, which is sent to us in batches throughout the year. Our engineering team had to build a new way to load journals quickly with every type of data accurately shown. I created placeholder cards to display while journals were loading. I also had to design charts to compare stats over time.
Finally, the journals needed to include space for future types of data to be added. Lots of planning went into the designs to make sure they grew in a way that made sense.
Placeholder screens and chart designs