SciVal

Product at Elsevier

Improving existing interactions, designing new features and rebranding of Elsevier’s SciVal

web, visual, ux, interaction × 2014 – 2018
  • 4 years
  • In team with: Simone Nutt, Joris Ketelaar, Anne-Sophie Muller
  • My contribution: New sharing functionality, rebranding, onboarding, sales platform, various improvements of interaction, data visualizations and UI
  • scival.com

SciVal is a tool for analyzing research performance, benchmarking against your peers, finding collaboration partners and looking into the research trends.

As a design team we need to make sure that enormous amount of data is presented in a friendly, clear and understandable way.

However, there is a always a level of complexity related to the domain that no UI can fix.

There's a variety of activities I was involved with during my work on SciVal. I would like to showcase the ones I find the most challenging and impactful.

Other details of my work on SciVal can be presented upon request in person.

Rebranding

When I joined Elsevier in 2014 the company was going through rebranding, which meant that eventually every product needed to comply. Eden Spiekermann agency created the new branding and at that stage was actively working with Elsevier on improvements.

I had ideas about how this new branding can be applied in terms of layout and typography, so I was made responsible for this project.

Challenge

The main challenge was to keep SciVal easy to use and on-brand, without sacrificing usability and accessibility. SciVal was very well designed in terms of information architecture, UI and interactions, and the rebranded version had to stay at least as good.

Another thing was that branding was focused on a text-heavy products, and SciVal is very information dense, hense I needed to figure out how the branding fits and what changes need to be fed back to the branding team.

Process

I was keen on experimenting with designing in browser, which happens to be one of my happy places. So, I jumped right into the IDE and started coding the new SciVal prototype versions.

There was a number of things to figure out:

  • Layout
  • Colors for the layout blocks, typography and data visualizations
  • What's missing in the branding kit: icons, widgets, UI components
  • Level of responsiveness
  • How to implement the changes: flip the switch or gradually

Every iteration was fed back to the branding team to get an idea whether we're going in a right direction.

Result

Here's a number of examples of before and after.

The rebranding from ideation to prototyping to implementation took about 14 months. I managed to:

  • Keep the consistency of the product,
  • Keep the information architecture and hierarchy in place,
  • Use typography and white space to modernize the visual appearance,
  • Break down everything into the stories for the dev team
  • Introduce a number of missing patterns / components for the Elsevier styleguide (such as date/time widgets, additional hierarchy levels, smart email fields)

Onboarding

Onboarding is a term originating from the HR field, and it means helping a new employee to quickly integrate into the new organization. In the digital world it's aboutvquickly getting users up to speed with a product or service.

The goal of any onboarding should be to help users understand what they can do with your product, not what your product does.

Why did we decide to do onboarding 4 years after the launch?

Despite all the praise we got about the quality of Scival, it’s a fairly complex product and only a small number of users were actively using SciVal within an institution. Over the years the user base grew and so did the product. We needed to get users up to speed quickly.

Challenge

  • Figuring out what people do when they need help. Do they try to find a solution themselves? Do they go to the help page? Do they ask around? Do they create manuals? (Spoiler: yes, and those are helpful!)
  • Identifying and addressing the most painful and/or crucial use cases first.
  • Choosing tools and patterns that best suit the need.

Research

In order to determine the optimal onboarding experience, we needed research around the product and best practices. Here are three things that I found crucial:

  1. Feedback analysis. By talking to our support team and users directly, we were able to understand pain points and determine what needed to be improved.
  2. Looking at the usage data can show a bottleneck or indicate the places where something goes wrong.
  3. Talking to trainers. Sales representatives, who give training, interact with the first-time users all the time and can advise where they need help the most. It also helped a to visit some of the training sessions and observe those users.

Results

In the end, we picked the first two patterns: welcome messages and product tours. We chose Pendo because of their ability to easily create and segment guides without involving any development work. There are five key ways we used Pendo guides

Sharing

SciVal allows users to create their own entities for analysis, for instance, a research manager can create groups of researchers representing different faculties to evaluate their performance. If the analysis is done by more than one person, it was handy to share these entities with colleagues.

Challenge

In the early days of SciVal the sharing function was very simple: a user could only share one entity with one person at a time. As the product matured, one of the users' needs was:

Sharing multiple entities with multiple people, and also managing who can view or edit them.
Since each entity could be tagged, we had to handle tag sharing as well.

Result

After several iterations here's a sharing flow that allows:

  • adding emails in bulk (either by typing or copy-pasting) and creating email lists for the frequently used emails;
  • setting up the rights: a user can be either an owner, can edit, or can view a shared entity;
  • adding an optional message to the shared entities;
  • sharing the public tags attached to the entity; while sharing users can check which tags are public and make them private if those shouldn’t be shared;
  • checking the status of the sharing invitation and resend the invitation or unshare the entity with certain users;
  • transferring the ownership of the entity to another user with editing rights.

Apart from handling sharing rights and tags, out team needed to sort out a number of edge (and not-so-edge) cases, such as:

  • What happens to the shared entities if the owner (creator) leaves the institution?
  • What do we do when the entity is deleted? Who is allowed to delete an entity? How will this affect the users who have this entity as a part of their group?
  • If the shared entity is a group, that has, say, 10 other entities nested, should those child entities be shared as well? If so do we message that 1 entity was shared or 11?
  • What emails and in-app messages do we show in each case?

All these cases and the logic behind the solutions were figured out and documented.

Sales platform

Sales platform is the place where our sales representatives can:

  • Check the accounts health by looking at the usage data.
  • Export data.
  • Be up to date with what's planned for the release.
  • Read and react to the customer feedback that's pulled from the NPS survey.
  • Set the contact details of the institution's administrator and their own to be displayed on the homepage.
  • Create events such as trainings, and track who's registered for the event, so that the traing can be adjusted.

The biggest challenge for this project was creating the event flow, since it includes the multiple views for the consultant, admin and user. On top of the the emails, error messages and all the edge cases needed to be handled.

UI details of this project can be presented upon request in person.

UI improvements

There's is a lot of ongoing UI improvement work that add up to quality of the product. All the small changes that eventually make the experience nicer. Here are some of UI changes I added over the years.