Journal Info Cards

Journal Info Cards

UI/UX • DATA VISUALIZATION • INFORMATION ARCHITECTURE

Search results were unorganized and looked like a data dump. The new journal cards needed a visual information hierarchy that was clean, logical, and dynamic.

  • reorganize the information architecture to match our data entry process.
  • redesign the visual layout for descriptions, stats, review and submission details, links, contacts, and journal history.
  • improve scanning and usability by fitting data into one expandable, screen-sized card.
  • reduce clutter by incorporating progressive disclosure.

Old designs

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.

New card designs

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.

Color-coded disciplines

Dynamic data

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

Related Projects

2019-05-21T14:27:14-07:00