I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

Building a Unified Design System

Building a Unified Design System

Building a Unified Design System

Marcura's Brand Alignment

Marcura's Brand Alignment

Marcura's Brand Alignment

Marcura's Brand Alignment

Supercharging consistency and speed across digital platforms

Project Result

377%

377%

377%

User activity over 30 days

12.5%

12.5%

12.5%

Increase in sign-ups

2%

2%

2%

Growth in GMV

Problem Statement

In early 2025, I led a comprehensive rebranding project for Marcura, a global leader in maritime software solutions and services. Over the years, Marcura had grown into a collection of independent products and services, each with its own distinct identity, user experience, and design language. This created a fragmented brand experience that diluted Marcura’s market presence and confused customers who engaged with multiple platforms.

My goal as Head of Design was to bring all Marcura products and services under a single, cohesive brand identity while improving the user experience across platforms. The project involved:
• Developing a unified brand identity, including a new logo and visual language
• Creating a design system to ensure consistency across all platforms
• Reskinning and redesigning all core applications
• Streamlining the user experience (UX) to create a consistent and intuitive flow
• Establishing a scalable framework to support future growth and brand consistency

Wireframing

We analysed the existing UI and watched our users interacted with it. We noticed a considerable amount of tab-switching, U-Turns and unfocussed searching for data.

Typography Tokens

Typography tokens are standardized values that define the properties of text elements, such as font size, weight, line height, and letter spacing.

Define a set of typography styles for different text elements (e.g., headings, body text, captions).Examples of typography tokens might include font-size, font-weight, line-height, and letter-spacing.

  • Font Family: Lato

Typography tokens are standardized values that define the properties of text elements, such as font size, weight, line height, and letter spacing.

Define a set of typography styles for different text elements (e.g., headings, body text, captions).Examples of typography tokens might include font-size, font-weight, line-height, and letter-spacing.

  • Font Family: Lato

Typography tokens are standardized values that define the properties of text elements, such as font size, weight, line height, and letter spacing.

Define a set of typography styles for different text elements (e.g., headings, body text, captions).Examples of typography tokens might include font-size, font-weight, line-height, and letter-spacing.

  • Font Family: Lato

Typography tokens are standardized values that define the properties of text elements, such as font size, weight, line height, and letter spacing.

Define a set of typography styles for different text elements (e.g., headings, body text, captions).Examples of typography tokens might include font-size, font-weight, line-height, and letter-spacing.

  • Font Family: Lato

Multi-Variant Click Analysis

The toolset used was selected with qualitative and quantitative data collection in mind.

Variant 1A

“Data manipulation and exportation is important to us for capturing periods of time and internal circulation”

Variant 1B

“We use data for storytelling. Visualisation is very important to us as it creates a compelling story”

Variant 1C

“We want to understand who our best customers are, and also how that changes over the course of the year”

Variant 2A

“We see a lot of value in being able to compare months, quarters and years to identify trends in our performance.”

Variant 2B

“Speed matters for us and so understanding our responsiveness and benchmarking it against our competitors is important.”

Variant 2C

“The data is more relevant when broken down by quote rate, number of quotes, and number of quotes per buyer.”

Results and Benefits

Post-implementation, Shipserv saw a 30% reduction in design time and a significant improvement in user satisfaction due to consistent UI elements.

Simple

We noticed a demographic which skewed mature. Our solution must be simple, WCAG complaint and reduce cognitive load.

Desktop-first

While we value our mobile users we recognise that 90% of our procurement users are desktop based and so we should prioritise their experience.

Consolidated

We see poor data hierarchy and discernibility as a direct contributing factor to cognitive overload of our users and need to introduce a refined experience.

Check My Other Case Studies

Check My Other Case Studies

Check My Other Case Studies

Check My Other Case Studies

Streamlining Insurance Package Creation for Actuaries

pruworks

Streamlining Insurance Package Creation for Actuaries

pruworks

Streamlining Insurance Package Creation for Actuaries

pruworks

Streamlining Insurance Package Creation for Actuaries

pruworks

Improving UX for Environmental Impact Assessment

riot

Improving UX for Environmental Impact Assessment

riot

Improving UX for Environmental Impact Assessment

riot

Improving UX for Environmental Impact Assessment

riot