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

12
weeks

Role

Senior product
designer

Team size

5
people

The problem

Morressier wanted to refresh their website content to communicate their new product offerings. Their existing website was powered by WordPress, which supported the addition and modification of content but required agency intervention to modify the page templates. The new website and blog would include a new design, fresh content, and built on an entirely new framework that provided a simple way for internal teams to add new content and edit pages.

Key design challenges

  • The project timelines were tight (0 to live in 12 weeks).
  • I had to rapidly execute a full design process without skipping any phases.
  • The developer resources were extremely limited for the project. The CTO wanted a ‘no code’ solution.
  • I had to learn a new technology (Webflow) whilst designing and managing the project in parallel.

Project goal

The goal was to rapidly design and build a new company website that communicated Morressier’s latest product offerings and captured more sales leads.

The content also had to be quick and easy to modify without developer intervention.

Success criteria

  • Did the website launch on time?
  • Could ‘non-tech’ team members update the content?
  • Did the new website positively impact the number of monthly sales leads?
  • Did the new website warm existing leads?

My role

I was the Senior UX Designer and my responsibilities included:
  • Managing the project
  • Stakeholder engagement
  • Designing and building the website
  • Co-ordinating the team

Design process

I followed an iterative, user-centric design process for this project. My goal was to complete as many micro iterations within the twelve weeks as possible. The tight timeline led me to use a ‘proxy’ approach for gathering user insights.

Our user proxies were internal team members who interacted directly with new and existing customers daily (sales and customer support). They would also provide valuable feedback on the content and design before the first version launched.
See other methods I've used

1. Research

The research phase focused on developing an understanding of both the needs of the target users and the business’ requirements. It consisted of stakeholder workshops and interviews with members of the sales and customer support teams who interacted with the target users (new and existing customers) regularly.

Methods and tools

Workshops
Interviews
Personas
Whimsical
All the workshop and interview data was captured on sticky notes, digitized and added to the Whimsical collaborative workspace.
We identified four key personas: Professional Conference Organizers (PCO), Associations, Librarians, and Researchers. Their needs and pain points shaped the user journeys.
I translated the raw data into a series of user insights via a synthesis process. These insights fed directly into the concept phase.

Design challenge

How did I avoid skipping any phases despite the tight 12 week timeline?
As the only designer on the project, I knew that I would be responsible for designing and building the entire website, which meant that I had to manage my time very carefully. I estimated that creating the content and building the website would use up more than 50% of the time, so I needed a way of accelerating certain phases of the process.

The first way I did this was by focussing the first two weeks on rapid internal design iterations consisting of workshops, interviews, prototyping, and feedback sessions. I also opted for interviews and feedback from team members who interacted with the target users daily rather than attempting to set up sessions with the users myself. The sales agents had already conducted hundreds of demos with potential customers, and I felt that if I could identify patterns and themes within the interview data, I would get a good sense for a customer's information needs.

I further accelerated the 'Concept' and 'Build' phases by adding Cherrie, a remote copywriter and Jens, a Webflow technical consultant, to the project from week 3 and 4. Cherrie used the insights from the user research to generate draft content for the wireframes and Jens built a series of rapid Webflow prototypes to de-risk the technical integrations (e.g. SalesForce, Segment, Intercom) and the responsive navigation control. This careful project management allowed me to execute a design process that maintained its user-centric integrity whilst leaving sufficient time to build the final website.

2. Explore concepts

I used the concept phase to diverge and explore ideas relating to the layout, content and visual design of the various website pages. The research insights served as the input for the ideation activities which I captured on the Whimsical collaborative workspace. From there, the ideas led to a sitemap, user journey map, rough wireframes, and art direction research.
Exploring homepage alternatives using wireframes
Review sessions were then held with key stakeholders and team members to rapidly gather feedback, which ranged from the tone of the copy to the layout of the pages. As an example, the Head of Sales felt that “Maximize the potential of your academic meetings and conferences” text gave the impression that we were competing against PCOs, which would alienate those customers. Her feedback led to me using “Let your conference content flow seamlessly” instead, which spoke to a problem affecting all customers and the value of an end-to-end workflow.

Methods and tools

Whimsical
InVision
Review workshops

3. The solution

I simplified the minimally viable version of the Morressier website down to the 13 key pages. Each page type consisted of a template that I had to design, build, and populate with content (text and multimedia) within the Webflow environment. Some user journeys, such as poster submission by a researcher, did not require a custom page as they started on a page hosted by Webflow and then seamlessly linked through to a page on Morressier’s core web app.
Basic site map for the Morressier website

Methods and tools

Sketch
Webflow
Principle
Colour and typography
Morressier’s brand identity embraces a clean, cool aesthetic built around white (#FFFFFF), charcoal (#424D5D), and medium turquoise (#59D3CE). I used Baskerville at the primary heading font (Serif) and Open Sans (San Serif) for sub-heading and body text.
lllustrations and icons
The illustration and icon style focused on clean, high contrast line work with soft curves and minimal use of a primary accent colour. My goal was to create a web experience that felt light and spacious, yet focused and placed emphasis on the content.  

Visual concept: Andrew Maunder
Character design: Constanza Rosenfelt
Illustrations: Andrew Maunder, Constanza Rosenfelt
Icons: Andrew Maunder
Animations: Andrew Maunder
Custom, responsive multi-media containers
In certain instances, I used a custom, tabbed media viewer to show annotated images. Its purpose was to group related content and save vertical space, which would otherwise lead to a very long page.

4. Test the solution

My strategy combined data from three sources, both qualitative and qualitative:
My goal was to understand how users experienced the products and to determine if they found value in the website's content. I would do this by looking at their behaviour (what they did) and their interpretation of the experience (what they said).
Usability testing
The usability testing would follow Nielsen's iterative, five person approach with moderated sessions and a task-based script. The participants would be recruited via the sales team.
Interviews
The interviews would be semi-structured and consist mostly of open-ended questions. This format encourages participants to express their perspective of a topic, in this case, we would delve into their understanding of the product suite and try to determine if the website content answered any of their questions and if it motivated them to book a demo.
Analytics
I would use the Amplitude analytics data to determine if the new website content had a positive impacted on the 'Schedule a demo' conversion rate. To do this, I would analyse the users' behaviour to see if their overall engagement with the website and content was higher than before.

Project outcome

The team considered the first phase of the project to be a success as I was able to design and build a website that the stakeholders were happy with and launch it on time. The second phase, involving monitoring and testing of the site, would be handled by the Morressier team moving forward (my freelance contract only ran up to the go-live date). From a personal perspective, I learnt a lot about Webflow and how to use it to build production websites that can integrate with 3rd party services, such as Intercom, SalesForce, and Segment.