SciValProduct at Elsevier
Improving existing interactions, designing new features and rebranding of Elsevier’s SciVal
- 3.5 years (ongoing)
- 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 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 undestandable 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.
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.
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.
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:
- 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.
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 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.
- 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.
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.
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.
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.
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.
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.
Trends chart view — before
Trends chart view — after
Adding to panel — before
Adding to panel — after
New UI — toast message
New functionality and UI — settings