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:

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:

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.

Looking at the usage data can show a bottleneck or indicate the places where something goes wrong.

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

1. Inviting users
The product tours are shown automatically to the new users. An intro screen shows what this is about and lets users opt out if they don’t want to see it.

2. Highlighting differences
When a certain instance of the UI element is different from the other ones, we explain why. Users can choose multiple entities as opposed to all other places where they can one choose one.

3. Feedback
Asking if users found the guide helpful and why in order to improve their experience

4. Introducing new Features
Showing new features to both new and experienced users

5. Individual Cases
Certain cases don’t require the full tour. Sometimes it’s handy to use the info icon in the context instead of sending users to the help section.

6. Keep at hand
Important to let users know they can always find the guides through the launcher.

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.