MPP
MPP is an online platform that makes the probate process in Scotland quicker and simpler.
My role
Content Designer (freelance)
Client goal
Increase sales
Outcome
Rise in sales
The process
To achieve the goal of increased sales, I wanted to understand the user needs and create content that met those needs. My process had four stages: discovery, preparation, design, and testing.
Discovery
The discovery stage involved:
desk research,
theming the data,
and identifying user needs.
Preparation
The preparation stage involved:
establishing user thinking styles,
writing job stories,
mapping user journeys,
and conducting a content audit.
Design
The design stage involved:
refining existing content,
designing new content,
documenting content patterns,
collaborating with subject matter experts,
prototyping in Figma,
improving accessibility,
and creating a style guide.
Testing
The testing stage involved:
adding on-page feedback forms,
and advocating for usability testing.
On this page
I’m highlighting four areas of work:
Discovery
When I began working on this project, I was told that no user research was available. This meant the team had no clarity about the needs of users. I began by doing desk research and talking to stakeholders.
Desk research
By talking to stakeholders, I discovered that a spreadsheet existed. This spreadsheet contained data on what users wanted to talk about when they booked a free call.
Theming the data
The spreadsheet had hundreds of lines of data. I themed the data by assigning labels. The top 5 themes were:
Find out more about the probate process
What services does MPP offer?
Can someone check my forms for me?
There is no Will
What forms do I need to fill in?
Identifying user needs
The themes revealed user needs.
Collaborative work to establish user thinking styles
Brainstorming touchpoints on the user journey
Grouping motivations that underlie the user needs
The process of defining user thinking styles
The thinking styles defined, with a description, summary, and sliders.
Job stories
Job stories can help clarify what a piece of content should communicate. When the content is ready to be reviewed, stakeholders can refer back to the agreed job stories and the acceptance criteria. This can help make discussions around changes less subjective.
Together with another content designer, we initially wrote 24 job stories. We also wrote 19 key messages, to cover what users don’t know they need to know.
Example job stories
Job story 001
When I find out I need to apply for Confirmation,
But I don't understand what that means,
I want to understand what the probate process actually is,
So I can feel confident that I know what I'm doing
Acceptance criteria:
This story is done when they can find a clear explanation of the probate process and the steps it involves.
Job story 007
When I am the named executor in a Will,
But I don't know where to start,
I want to find out what I need to do,
So I can understand what responsibilities I have
Acceptance criteria:
This story is done when they can find out what responsibilities an executor has.
Design
To meet the business goal of increasing sales, one of the design challenges was to make it easier for users to find what services MPP offer.
In the previous process, users had to use a ‘smart assessment tool’. They answered a series of questions to find out if they:
will get free help from the Sheriff Court,
need to use a solicitor,
can book an MPP probate support package.
To use the smart assessment tool, users had to know:
the value of the deceased person’s estate,
and if the Will is valid in Scotland.
Finding those things can be complicated and take a long time. I wanted to create a simpler way for users to find out what services MPP offer.
Services page: user journey
The new user journey becomes:
Trigger: someone dies
Finding: find out I need to do probate in Scotland
Doing: browse the probate support packages
Getting: book the package I want
Services page: protoype
I created a prototype of the services page in Figma. The page is now live on the MPP site.
Other pages
I refined various pages on the site. These included:
help guides,
contact page,
and the book a free call page.
Using content design principles, each page became clearer and met the user needs. For example, the ‘Contact us’ and ‘Book a free call’ pages previously had exactly the same content on. The changes I made means that each page now has a distinct purpose with the content that the user is looking for.
Style guide
To maintain a consistent look and feel across the site, I created a mini style guide in Figma. Details included:
font sizes,
colours,
example layouts,
new navigation,
simplified footer,
button options,
and spacing.
All design changes are possible within the limitations of the Duda CMS. Not all design changes have yet been implemented (but they are on the roadmap).
The revisions will create clearer and more accessible layouts. For example:
Style guide sections
Navigation
Colour swatches
Recommended buttons, with hover state
Typography and type pairings
Accessibility
To improve accessibility, I suggested changes to:
typefaces,
line width,
contrast,
and the heading structure.
To check the readability of content, I used Hemingway app.
Typefaces
Low-vision users can often have difficulty discerning similar shapes. The brand typefaces are Epilogue and Comfortaa.
In the Comfortaa typeface, the ‘ocadbpqg’ letters all have the same rounded shape. This makes the letters harder to discern, and therefore harder to read.
With the Epilogue typeface, there is less similarity between the shapes of those letters. It’s therefore easier to read than Comfortaa. I recommended using Epilogue as the main typeface.
Line length
A general guide for a readable line length is the alphabet test.
Contrast
A quick check on the WAVE tool showed the original MPP website had 40 contrast errors. The changes suggested in the style guide resolve any contrast issues.
Headings
It’s important to have a consistent heading structure for:
SEO,
screenreaders,
and the scannability of the page.
When I started at My Probate Partner, many of the pages didn’t have a consistent heading structure. Headings would skip from H1 to H3, or use H2 headings for text that wasn’t a heading.
All the pages I worked on now have a clear heading structure.