Mendeley.com home page

End-to-end design process

Case Study

The aim of the project was to redesign the home page of Mendeley which would help the users to understand the new value proposition of Mendeley in a clear and simplified way.

The project also aimed at benchmarking some of the metrics like perception of trust, content clarity, etc. The development for the redesign will take place in 2023.

Mendeley home page

My Role

This project gave me an opportunity to work on the end-to-end design process. I worked on the planning, execution and delivery of the project in collaboration with our UX lead, 2 other UX designers and other cross-functional teams.

My responsibilities in the project included:

Design Ideation

Facilitated design sessions to brainstorm ideas to come up with design concepts. Designed and proposed solutions based on feedback from the users, stakeholders and the wider team.

High fidelity designs

Delivered the new home page UI design in collaboration with the tech team. Actively sought feedback from the design team and wider team (product and tech) to ensure the home page UI design conforms to high standards and communicates the value proposition in an engaging way.

User research

Planned and carried out the user research using a hybrid approach (moderated and unmoderated user testing) with the UX researcher to validate new concept designs for the home page.

Stakeholder Management

Helped the stakeholders from Product, Tech, Analytics and Marketing teams to align on the focus areas of the home page with the help of design sessions. This also helped to align on the new value proposition.

Accessibility documentation

Accessibility was at the core of the designs since the beginning of the process. This included work on the colour contrast, screen reader support, keyboard-only navigation, etc.

Unmoderated testing tool experiment

Helped the team to incorporate unmoderated user testing method by introducing a new tool called Ballpark. Overcame the challenges of learning a new research method and a new tool.

Communication with cross-functional teams

Worked closely with the dev team throughout the design process which helped to built trust and reduce uncertainties.

Supported data analytics initiatives which helped to decide the success metrics for mendeley.com.

Home page in action

The Process

Understanding the problem

The project started with discussions with the UX lead to understand the scope and context of the project. We wanted to utilise the opportunity of tech rewrite to redesign the home page. The current home page was outdated and didn't reflect the true value proposition of Mendeley.

The aim of the project to reflect the true value proposition of Mendeley and reinforce trust within our users.

Planning

Before diving deep into the project, I built a plan and discussed further steps with the UX lead. Any change in the information architecture of the website was out of scope for this project.

Alongwith the UX lead, I designed the format of the initial workshop with the stakeholders to gather insights and understand the value proposition.

Workshop initial plan

Gathering Insights

I analysed the existing website and documented the user flows. This highlighted some problem areas. Initially, the project was for all the landing pages on mendeley.com but later we scoped it down to the home page.

I analysed the home pages of some of the competitors such as EndNote, Zotero, Sciwheel, FlowCite, etc. Also analysed home pages of some popular websites, such as, Notion, EndNote, Atlassian, Shopify, Grammarly, Airtable, Dovetail. This helped me to understand how do various companies structure their home page, how do they commnicate their value proposition and how do they enhance the perception of trust.

Existing flows on mendeley.com
Competitors Analysis
Analysing analytics data

I partnered with the data analytics colleague to find out the common user behaviour after the user lands on the home page. This helped us to design our initial design workshop with the stakeholders to define focus areas.

User behaviour on current mendeley.com

Finding the value proposition

I facilitated a design session with the stakeholders from business, product, analytics, design and marketing teams. I also presented the findings of analysis of the existing flows, highlighted the problematic areas and shared the common user behaviour from the data analytics.

The goal of the workshop was to define the focus areas of mendeley.com and what story we want to tell to our users. The sessions also helped as conversation starters for conversion goals for the home page. We got major insights from our colleagues from marketing and analytics team which helped us to define the focus areas of the home page.

A snapshot of Miro board capturing outcomes from the Remote Workshop.

Building Concepts

Design ideation

After the initial discussion with major key stakeholders, I began the design studios with the design team. With the value proposition in mind, we brainstormed ideas and came up with multiple concepts.

Sketches of different ideas captured during design studios
Refining concepts

By incorporating the various ideas from the design ideation workshop and running competitor analysis earlier, I came up with different concepts for the home page.

Presented it to the design team and then to the stakeholders for feedback. The usability and accessibility drove our major decisions throughout the design process. Once the teams were happy with one concept and were onboarded with the designs, I started preparing for usability testing for these concepts.

Evolution of concepts

User research

Planning user research

In Mendeley, the process of moderated user research is very well-versed and robust. We have been doing it since ages and the process is very matured. But for the home page project, I wanted to try an approach that would give us a variety of the user feedback.

So, with a fellow user researcher, we proposed a hybrid approach of qualitative (moderated user sessions) and quantitative (unmoderated testing) user research which can be run in parallel.

At that time, Elsevier was in the process of testing various unmoderated user testing tools to finalise which tool they could buy. This also gave us a chance to contribute to the ongoing trials and we got free trial for an extended period. We used Ballpark to carry out the unmoderated user testing.

Unmoderated User testing

Whilst the moderated user testing sessions were taking place, I created an unmoderated user test using ballpark. The aim was to:

  • Evaluate clarity of the Mendeley value propositions
  • Evaluate the first impressions
  • Validate discoverability and findability
  • Rate perception of usefulness of content and brand trust

The unmoderated test comprised 5-second test, first click test and first impressions test. We got 20 responses from our experiment.

Heatmap for users' first click on where would they expect to download Mendeley Reference manager.
Heatmap for users' first click on where would they expect to register to start using Mendeley.
Moderated Remote User testing

We ran these tests with 6 users. The objectives of the test were:

  • Understand if the value propositions are clearly communicated to the users
  • Evaluate brand and product perception of trust, perceived ease of use, perception of brand, understandability and usefulness of the content
  • Evaluate the content understanding, usability and findability
  • Validate match between call-to-actions and users' mental model

I prepared the scripts and coordinated with the UX researcher to schedule sessions. I partnered with the facilitator, prepared prototypes, signed up for note-taking and observations. We also invited our colleagues from the product and development team to attend these user sessions

Screenshot from the moderated testing report showing highlights.
Screenshot from the combined testing report showing ratings.

High Fidelity designs

We evaluated the results and then prepared a combined report which was shared with the wider team. I refined the designs by including recommendations highlighted from the usability testing. Ease of use and accessibility support were at the core of these designs.

Evolution of hi-fidelity UI designs
Usability testing

Since this was a high impact project, we utilised the upcoming round of usability testing. After running it through our users, we noticed that our visual appeal ratings have improved. Now the content and image clarity is better as compared to the first iteration. We were happy with the results.

Documentation

The final documentation was presented to the tech on Figma consisting of hi-fi designs, micro-interactions, responsive behaviour and accessibility.

Screenshot of Figma file showing documentation on responsive behaviour

Throughout the design process we adopted a collaborative approach and encouraged feedback from cross-functional teams.

Screenshot of our Figma file structure
Screenshot of our Figma file showing comments from product team and business
Screenshot of our Figma file showing comments from other UX members in design reviews

Learnings and Next Steps

The home page project has received huge positive feedback from various cross-functional teams and the testing participants. But there were some learnings too. We learnt that there was a scope to improve the quality of the user feedback from unmoderated tests. Although we got many responses from users but most of them were invalid. So, there were only 11-12 valid responses (which was a very low number than we expected). Also, we could have captured the responses for a longer period of time.

Also, for the moderated testing, we could have specifically targeted non-Mendeley users. But the recruitments were done way before, so we had pool of Mendeley users only. We thought that may have affected the ratings a bit.

For the next steps, we will be collaborating with the development team for the implementation of the home page. There are also conversations regarding capturing data through adobe analytics to set a benchmark for any future improvements and capturing our conversion data.