Overview

Morressier provides digital solutions for the academic conference and congress industry. Their solution suite covers that entire research submission workflow, including submissions, peer review, on-site presentation, research discovery, and document hosting.

Company

Morressier
Berlin

Duration

10
months

Role

Senior product
designer

Team size

8
people

The problem

Academic conferences are an integral part of the scientific community and a forum where new research is shared and discussed. The trouble with the current format is that the 'new' research presented at academic conferences could already be several years old. Conference organizers address this issue, in part, by adding a breaking research track to the proceedings and encouraging researchers to submit their preliminary results in the form of a poster.

That said, there is still a period of a few months before the conference where the accepted posters lie dormant on a server. Morressier believed that this delay was unnecessary and that the impact of the research could be realized sooner by giving attendees early access to the posters.

Key design challenges

  • I had to understand a researcher's perspective of early-stage research and determine how conference posters would fit into their daily workflow.
  • I had to design a UI for the minimal viable product (MVP) that the team could build fast to support the user research and customer development activities.
  • The company was continuously learning about its target customers and market, so I had to be extremely agile and build a malleable solution framework.

Project goal

The goal was to rapidly design and build a suite of research tools that enabled conference attendees (and paying users) to discover and access digital research posters before, during, and after the event. Morressier also wanted to explore the data needs of industrial and academic research teams, particularly data insights related to global research trends.

Success criteria

  • Did the new products generate sales interest from new and existing customers?
  • Do researchers find the tools useful and are they able to integrate them into their workflow?
  • Are conference customers excited and happy with the new tools?

Project role

I was the Senior Product Designer and my responsibilities included:
  • Stakeholder engagement.
  • Creating user journeys and wireframes.
  • Creating UI mockups and building prototypes.
  • Planning user interviews and user testing.

Design process

I followed an iterative, user-centric design process for this project. It is worth noting that I joined the Research Discovery project between phase two and three of the first iteration, which delayed my user research activities.

It was, therefore, critical that the developers built the MVP quickly so that I could switch from implementation to research and start learning about the needs of researchers, institutions, and commercial research teams.
View my general process

1. Research

The opening research phase focused on developing an understanding of both the needs of the target users and the business’ requirements. The Morressier founders had been working closely with individual researchers, commercial research teams, and research institutions to understand if and how they wanted access to early-stage research. They believed that:
  • Researchers wanted to alerted of new discoveries and developments in their areas of interest.
  • Research teams were sending representatives to conferences to stay on top of new research trends.
  • Research teams are interested following leading researchers in their field and identifying possible collaborative opportunities.

Methods and tools

Workshops
Interviews
Whimsical

2. Explore concepts

I used the concept phase to understand and develop the user journeys, flow, layout, and content ideas proposed by the Head of Product. I captured the initial concept work on the Whimsical workspace where the team could collaboratively make changes and document feedback.

Methods and tools

Whimsical (wireframes)
Axure (prototype)
Review workshops
Collaborative wireframing
The team used collaborative wireframing to share content, layout, logic, and flow information. These were discussed during one-on-one and workshops sessions to gather feedback and make changes if required.

I used Whimsical for the rapid, low-fidelity wireframing, InVision or Axure for situations when a 'clickable' wireframe was needed, and Sketch for creating higher fidelity UI mockups.
Image: V.2 Home page concept

The solution concepts

Insight widgets

Insight widgets would provide users with insights about the result set. The initial collection covered basic stats, submission trends, content engagement, and trending researchers.

Faceted search

A faceted search would provide users with a set of filters to quickly refine their search results down to only the most relevant posters, institutions, conferences, and researchers.

Email alerts

Email alerts would notify researchers when researchers added new posters to the platform that related to their topic of interest. The email would link the user to through to the resultant poster set.

3. Building the solution

The solution consisted of two discovery interfaces that connected to Morressier's platform: a responsive web app and an iPad app. The web app provided users with a way to discover, view, and save research posters before and after the conference, whilst the iPad app focused on the conference discovery experience.

Methods and tools

Sketch
InVision
Axure
Principle

The web application

The web app utilized three primary mechanisms to facilitate research discovery:
  • Search with suggestions: The home page provided a 'Google' style search experience.
  • Engagement trends: Popular posters and researchers were featured on the insight widgets.
  • Related research: Related research was presented next to the poster on the article detail page
Designing with flexibility in mind
The team designed the insight widget set to be easily extended and updated via a custom, back-office tool. As a result, I was able to rapidly test data visualizations and compose insight dashboards for researchers and conference organizers. 

Examples: The conference widgets form part of the organizer's live dashboard. The insights are typically used before, during, and after the conferences for management and communication purposes.

UI patterns

Navigation patterns
The web app design followed a standard faceted search pattern that is common to most e-commerce and marketplace platforms, namely 'search, filter and provide details on demand'.
Search patterns
The search filters helped users refine and explore the result set by providing facets that included related keywords, institutions, researchers, conferences, funding status, and funder. The latter being an example of a discovery-related need that was expressed by industrial research teams.
Bookmark pattern
The ability to save (or bookmark) a document is a common feature found on many academic platforms. The web app provided researchers with the ability to save posters and pin insights so that they can be accessed later. We found that saving posters, in particular, had a positive impact on user retention rates.

The iPad application

The iPad app powered the on-site experience and facilitated research discovery in two ways:
  • Exploration stations: Conference attendees can walk up to an iPad station and browse the research posters.
  • Presentation sessions: Conference attendees gather around iPad stations to watch authors present their research on a second screen (large display).
Collaborating with stakeholders
I worked closely with the key account manager to understand the pain points and new business requirements that motivated the iPad app update:
  • Poster titles: The text on the poster thumbnails was very small and caused users to lean towards the iPad to try and read it (observation). The new app would have a text label on every poster thumbnail.
  • Session information: There was no information relating to the poster presentation sessions nor was there a way to only see the posters that would be presented on the current day.
  • Exploration and coaching: The new app should include search suggestions and quick filters to help users browse the poster set. Coach messages should be provided to teach new users how to use the app.
  • Supplementary content: The new pp should present the supplementary content (e.g. abstract and videos) to the user.
  • Accessibility: The new app should move away from narrow fonts (iOS 7) and rather utilize fonts with more weight and contrast. The default theme should be set to 'dark'.
Viewing posters
A conference attendee can view a poster at any iPad station by tapping on the relevant thumbnail card. It is shown immediately on the iPad screen and mirrored on the big screen just above it.

A handy coach message then teaches the user about the 'Pinch to zoom' gesture, which zooms the poster on both the iPad and big screen.
Exploring posters
The main screen has six filter buttons: Popular posters, Presenting today, Topics, Institutions, Keywords, and Researchers. Tapping on a filter button presents the user with a set of available filter terms.
A button saying "Show X posters" appears when a filter term is selected. Tapping the button takes the user back to a filtered version of the main screen showing the posters.
Navigating and viewing additional content
An attendee can easily swipe left or right to navigate between posters in the topic track. Doing so changes the poster on both the iPad and the big screen.
Access to additional content is presented on a bottom sheet. Our user research revealed that attendees wanted to be able to access the abstract for a poster.

The design system

Component library
One of my responsibilities at Morressier was to transition the design team from a basic set of reusable symbols to a full design system with shared UI components between products. I used Sketch (shared UI design library), Abstract (version control), and Storybook (React UI component hosting) for this purpose.
Illustrations, icons and copy
The illustration style focused on clean, cool colours with high contrast, fine line work, and careful use of a primary accent colour. The tone of the copy is informal and accessible, yet professional.

Illustrations: Constanza Rosenfelt, Andrew Maunder
Custom icons: Andrew Maunder
Animations: Andrew Maunder
UX copywriter: Cherrie Kishazy, Andrew Maunder

4. Test the solution

Overview
My strategy combined data from three sources, both qualitative and qualitative:
  • Moderated usability tests
  • Interviews
  • Cohort experiments
My goal was to understand how users experienced the products and to determine if they found value in it. I did this by looking at their behaviour (what they did) and their interpretation of the experience (what they said).
Usability testing
The usability testing followed Nielsen's iterative, five-person approach with moderated sessions and a task-based script. Participating researchers were recruited via social networks and able to book a session slot that suited them, either in-person or remote.
The sessions started with a pre test interview and a card sorting activity (for in-person sessions) to help me understand the participant's research domain, their research workflow and how conference posters fit into it. My goal was to understand their needs and, hopefulundefinedly, match them to an existing persona. The learnings helped me tailor the scenario and tasks to make them more immersive and relevant to their daily work.

The sessions ended with a post test interview to understand the participants experience. Lookback was used to record the sessions and log time stamped and coded notes. For example, a usability blocker found during the second task would say, "(12:55) T2 - X : The user didn't see the back link after they scrolled down".
More infoLess info
Interviews
The interviews were semi-structured and consisted mostly of open-ended questions. This format encouraged participants to express their perspective of a topic, in this case, their research workflow, information needs and experience of the apps. I identified three key points in a participant's journey where interviews should be conducted: immediately before and after the usability test and after a month of trial use.
Cohort experiments
The cohort experiments aimed to onboard groups of users onto the web app who shared similar characteristics. The experiments would consist of two targeted online campaigns with corresponding landing pages. The campaign ads would direct respondents to the relevant landing pages which aim to capture a user's email address. An invite email is then sent to respondents offering them one month trial. I would monitor the conversion funnels, user behaviour, and retention rates with Amplitude (analytics tool) and compare the results to the historic baseline values.
The first, a social media campaign, would target researchers at universities whose interests matched the content on Morressier's platform. The core message of the campaign being, "Get early access to new research from conferences around the world." The second, a Google adwords campaign, would target people who are searching for upcoming or current conferences that are on Morressier's platform. The core message of the campaign being, "Get early access to new {topic} research from {conference name}." The latter being limited to participating conferences only.
More infoLess info

5. Learn from the users

The usability test and interview data highlighted some issues, both positive and negative, and inspired some new ideas relating to the web app. The most important are listed below:
Note: The data from the longitudinal usage study and online cohort experiments were not available in time for my analysis.

Project outcomes

It was too early to determine the impact of the new products on the market, but several indicators of success emerged: