Creating a content management system for Moneris

KONRAD GROUP / FALL '21

Context

Moneris is Canada's oldest and largest payment processor, serving 350,000+ large and small-scale merchants. Their marketing site is their main touchpoint for selling products.

I audited and redesigned the structure of Moneris’ industries pages. I also created hero, product display, and value proposition components while balancing client presentations.

Team

2 Client (Directors of Marketing)

1 Consultant

1 Design Lead

2 Designers

Timeline

2 Months

Constraints

No user research or testing data available

Weekly client syncs

Ambiguous scope

Project Impact

7 million+ annual visitors to encounter changes

40+ desktop & mobile components redesigned

Comprehensive template and component library

Problems & Goals

Moneris’ CMS components were outdated – falling behind newer, UX-driven competitors like Square. The CMS used to build their marketing site was out of line with their new brand identity.

Their old marketing site, leveraging out of date visual design trends with inconsistent components.

Our goals for this project were therefore to:

Introduce the new brand identity
Deliver a new component library for their CMS
Identify UX gaps & opportunities relative to competition

Design Principles

With so many possible directions for a component system, and no user research available, I wanted to ground our decision-making with a couple of pillars.

🪨

Robustness

Components need to support multiple use cases and withstand localization between English and French.

⚪️

Simplicity

Fewer components decreases the probability of misuse and speeds up decision-making.

🎨

Expression

Make the new brand apparent in the components used to build the marketing site.

🗣

Presentation

Prioritize refining details and making design work digestible and actionable for clients.

Design Challenge #1

How might we differentiate our hero banner from competitors?

Design Challenge #1

How might we encourage donors to donate items that are needed and meet requirements?

Identifying the key elements of their new brand identity

Moneris’ new brand values were centered around being positive, personal, approachable, and a life-long partner you can’t outgrow.

3 elements of their new identity calling out these values were:

Real Merchants

Great for developing personal connection and sense of long-term trust.

Vibrant Colours

Yellows, light blues and reds help radiate energy and positivity. Midnight blue is a grounding colour embodying stability.

Rounded Shapes

Soft edges creates a playfulness that feels more approachable.

Gathering inspiration – understanding trends

👨‍👩‍👦

People-imagery is very popular right now, especially in the small-business space

📈

Make the new brand apparent in the components used to build the marketing site

🌈

Colour can shine through typography, decorative lines, and outlines

Exploring a range of themes – from photographic to illustrative

After some exploration, I realized illustrative concepts took away from Moneris’ secret sauce – their brand as a trusted, long-standing partner for both giants and small businesses.

Photographic

Illustrative

✅

Brand - Expansive imagery is welcoming and authentic

✅

Brand - Recycles layering motif in product carousel components

❌

Brand - Missing the rounded, geometric elements of brand

✅

Creative carousel indicator

✅

Brand - Uniquely uses rounded edges

❌

Robustness - Challenging to find well fitted content for available space

❌

Robustness - Images will likely not scale well in mobile without custom tweaking

✅

Brand - Coloured text adds modern pop

✅

Brand - Portrait imagery leans into being people-focused

❌

Brand - Missing the rounded, geometric elements of brand

✅

Robustness - Easy to select imagery

❌

Simplicity - Line brings in brand but adds complexity to CMS and development

❌

Robustness - Decorative elements don’t reposition well for mobile

❌

Brand - Shapes are too playful, doesn’t create sense of “life-long” trustworthiness

Preparing for the presentation – identifying our goals & concepts

After touching up two concepts we were going to show to our client, we wanted to test 2 final directions our design could take.

Immersive photography or clean and spacious?
Spotlight or community?

Developing a presentation checklist

Demonstrate the whole story. Paint a picture for how this component can be used and fits into the entire template.

Cover edge cases and transitions. Clients can then focus on the general direction rather than worrying about little details.

Ensure content is relevant to keep conversation on track. All copy is related to the page itself, etc.

Design Challenge #2

How might we communicate the value Moneris delivers to a specific industry?

Initial UX Audit

Given a clear KPI for increased conversions, I focused my audit on the experience of exploring, deciding and purchasing a solution.

❌

Lots of additional friction due to redirecting links

❌

Featured products/value propositions aren’t unique to the industry

❌

Incoherent narrative - context does not flow from one section to another

Playing detective to identify our target user, "The Newcomer"

Without user research, I assessed the different user journeys to identify different merchant personas. Upon landing on the website, merchants have the choice to navigate between the solutions section or the industries section.

Merchants who had a strong idea of their needs are likely experienced and would’ve gone straight to the solutions page. Therefore, those who land on the industries page are likely starting out, and are smaller scale merchants.

Understanding the value of an industries page

Given Jakob’s Law, I synthesized the following takeaways from analysing other industries pages:

Takeaways

A quick E2E overview of how our business can help you
Product recommendations based on Jobs-To-Be-Done for the industry
Highlight industry-specific successes & testimonials
Deliver valuable insights on their industry to build trust

Deciding on a narrative structure for the Products & Features section

For the general high-level structure of the narrative, I stuck to the conventions apparent on most industries pages. With smaller, newer merchants in mind though, I saw two main approaches for presenting our products & features.

Categories

✅

Organized by familiar categories (a product is clearly digital or physical)

✅

Pattern can be consistently applied across all industries

❌

Some industries may only have one main medium

❌

Products in a category serve very different purposes (e.g. website vs security)

❌

Less customization

By Jobs-to-be-Done

✅

Flexible format tailorable to each industry

✅

Value propositions are easily skimmable

✅

Clear relationship between products and problem solved by them

✅

Encourages merchants to evaluate best solution for needs regardless of medium

❌

Requires stronger understanding of the industry to leverage

I decided on the Jobs-to-be-Done approach, because it maximizes the value of an industries page – a high-level overview with clear value propositions for the industry.

Presenting products – prioritizing efficiency and scalability over a one-hit-wonder

Explore

Good for “wow visuals” and diving into the nitty gritty details of each product

✅

Expression - bringing in photographic and layered motifs

❌

Not robust -- difficult to translate to mobile in responsive way, requires significant space for each product

❌

Complex - marketers will have both left and right-leaning components to select from

Compare

Good for driving decisions and accommodating a different numbers of products

✅

Drives Action - provides direct comparison enabling user to commit to a product sooner

✅

Scalable - denser format allows more products to be presented

✅

Simple - only one way in which a product can be presented

❌

Requires pause - denser format requires focused reading

Final Products & Features Design – the finishing touches

Bigger Imagery

Larger product imagery brings out the more photographic, realistic element of Moneris’ new brand. It also makes products feel more captivating and provides a more detailed look.

Rounded Tags

Rounded tags bring in the circular element and playful energy of Moneris’ new brand. They also allow us to introduce the new brand colours.

Highlighting Price

For small merchants, cost is an important consideration. We introduced a place to add cost and leveraged bold typography to streamline decision-making.

Behold, the library of redesigned components

Before

After

Reflections

🔨

Navigate ambiguity by balancing both understanding and doing

When starting out, I often spun my wheels trying to ask more questions or understand the landscape deeply before I felt like I could contribute. What I learnt was the fastest way to get information is to create and get feedback.

✨

“Perfect” doesn’t mean resilient, scalable... etc

A design that looks picture perfect with a certain sentence or photo on a certain device isn’t made to last. The most impactful designs for a CMS will be the ones that never break

🔍

Explore an avenue, even if you’re skeptical

At first I was averse to sinking time into concepts that I didn’t think would work. However, time and time again those ideas sparked new approaches or at the very least built confidence in our current direction.

🗣

Presentation is half the job

As my manager told me, half of the job of a designer is doing good work. The other half, is convincing others you did good work. Complex options, small inconsistencies or missing edge cases can derail a client conversation.

thanks for stopping by :)

have questions, ideas, or think we'd get along? Reach out anytime ☀️