Principles: What are they good for? — How we created TotallyMoney product design principles
Growth can be an exciting time for any product design team; more members of your team to work with, learn from and be inspired by. It also means that you work for a company that understands the value that product design can bring.
Our team here at TotallyMoney has been on accelerated growth over the last two years. When I joined amid the COVID pandemic, I was hire number four. Fast forward to today, where our team has grown to ten, including expanding the UI function and creating a user research function.
As we grew, we learned how much harder it is to keep ten people aligned with the same vision and direction than when it was just the four of us. That alignment as a team is essential to its success and maturity, it starts with having great people in your team and that needs to be backed up by some strong pillars;
- A set of principles that sets the tone for what we want to be as a team and a product
- Great processes that allow us to execute these principles in the best way possible
- A design system that provides a beautiful, accessible and intuitive experience for our customers
There is much more to come in this channel about our evolving processes and design system but I’d like to take you inside how we created the product design principles for TotallyMoney and why we need them.
I like this description of what design principles are from this Invision article.
Design principles are a set of values that act as a compass for your product. They’re an agreed upon truth: the guideposts that keep your entire team on the same path as you move through the design process.
Julie Zhou, Former VP, Product Design, Facebook puts it nicely here;
Instead of relying on gatekeepers to keep a high quality bar, better instead that everyone gets to agreement on a smaller set of guiding values, so that the best decisions get made in a consistent manner, scaling across many decisions, and even many designers.
If you don’t have principles you risk inconsistencies in process, thinking, values and execution and that is not good for the customer or the product.
Planning
Collaboration is a big part of what and who TotallyMoney is. Whatever our principles would be, we wanted to make sure we had full alignment of what they should be and a sense of ownership within the team by creating them together.
At the time, we had a Product Design away day already in the diary and decided that would be the perfect opportunity to get the whole team involved.
To make sure people were included further, we all had a part to play in facilitating the away day. A small subset of us set about creating a workshop to identify the agenda, and what outputs we wanted from the day.
We started by aligning on a set of statements on what we thought a design principle is or could enable:
- Should be used to aid decision making
- Created by the team
- Alignment within the design team
- Sets the standard for design at TotallyMoney
- Aligns with the values and direction of TotallyMoney
- Educates what product design at TotallyMoney is
- Easier onboarding of new members of the team
It was also really important that we talked about and shared our principles both within the company and outside (Hello 👋).
When thinking about the activities we took inspiration from this article by Sebastian Meuller and the team at MingLabs and based our session around the themes of Understand and Create.
Understand
With our activities planned the team headed off to our away day, well at least some of us did. That pesky COVID had laid low a third of the team, but undaunted we carried on.
For the first task, we wanted to understand what we thought was a great experience. We thought about the best product or service that we used and noted down 4 words to describe why we thought that was such a great experience. Being the basic fintech people we are, there was a lot of love for Monzo but also a wide variety of other experiences from Headspace to a bike.
Those descriptive words were grouped into themes and we chose one word from each group that we felt best described where we wanted to be as a product. Through a dot voting exercise (of course 🤓) we chose 5 themes to take forward into the create stage.
We also wanted to understand where we were in relation to those aspirational descriptive words, so we took the opposite of each word and looked at how far we were away from being that thing and the work we need to do to become that. Where do we sit between Personalised and Generic?
Create
It was now time to figure out what did these words mean for TotallyMoney and the product design team? We looked at creating mind maps of ‘should’ phrases that best described the keyword from a user and a design point of view. What does ‘Personalised’ mean to our customers and for our product?
”As a user I should…”
“Our designs should…”
We now had a keyword and a set of descriptions we felt should form part of our principles, it was time to create the first draft of our principles.
Insert dot voting here… 🤓
Using the keyword as a title we then crafted one or two sentences that gave the principle more details. With that done we arrived at our first draft of the TotallyMoney product design principles…
Personalised Only show information that is relevant and useful to the user’s situation.
Intuitive Our users should know how to use our product without second guessing. We can achieve this by using common patterns and a well thought out information hierarchy.
Informative The financial world is complex. We use simple every day language to break down financial information and what it means for you.
Trustworthy We know what we’re doing, so you can trust your data is safe with us and we’ll be transparent with you.
Motivating We actively provide encouragement and support to our customers, no matter what their goals may be.
Spoiler alert, these aren’t the final principles. It’s great to look back, and see what we achieved on the day and how far they have developed since then.
Reflect and iterate
Coming out of the away day we wanted to take some time to reflect on what we had come up with and being the designers we are, wanted to make sure we critiqued and iterated on those first drafts.
Throughout 4 subsequent sessions, we did just that. Challenging what we had come up with, removing and swapping principles as well as working on the content of each one. Reviewing each session and iteration as well as trying out different structures of titles and body copy.
As well as iterating on each principle we wanted to consider how they can be used in our day-to-day work and become more than something made into a nice poster or sticker. How would they make our users feel and how would they shape the way we work, the decisions we make and the overall experience of the product?
Introducing the TotallyMoney Product Design Principles
It’s been quite a journey to finalise our principles but the work that has gone into these principles we feel is reflected in the output.
Personalisation with purpose
We tailor our product to our customers to help them achieve their unique goals.
Our users feel: They feel seen and understood and can see content that is most relevant to their circumstances.
How this shapes how we work: We selectively use individual customers’ data to create bespoke product experiences. We think systematically about how we display content and how it might scale.
Transparency first
We never hide information that could help a customer make the right decision for them. We share as much as is necessary to empower them.
Our users feel: Safe with us. They trust we won’t take advantage of them.
How this shapes how we work: We work collaboratively to seek the right advice and expertise. We ensure that we embed relevant information in all journeys and don’t just rely on the small print.
Knowledgable and insightful
We turn complex data into easy-to-understand insights to reassure our customers that they are making the right financial decisions for them.
Our users feel: They are in control and able to make informed decisions on the right thing to do to help them gain financial momentum.
How this shapes how we work: We identify the right data to analyse and provide meaningful insight for our customers in the most digestible, actionable and timely way.
Instinctive with a TM twist
We create a recognisable experience using common patterns while keeping our visual design distinctive and consistent.
Our users feel: Included, in a friendly place. They can use our product with ease and comfort, and every so often are surprised by a moment of delight.
How this shapes how we work: We appreciate that every design decision we take contributes to the wider TM ecosystem. Every detail is important and every interaction is considered as these are the things that make us TM.
Encourage to empower
We create experiences that celebrate the customer on good days and support them on bad days
Our users feel: They are in control of their situation, even if it’s tricky.
How this shapes how we work: We strike the right balance between positive and neutral messaging. Our tone of voice comes from a place of empathy and understanding that all customer situations are unique.
Bringing our principles to life
Words written in a Notion document or on a Miro board mean nothing if they just stay there, we needed to bring these principles to life to be able to share them with the rest of the company and in really great Medium articles.
Our junior UI designer, Kem has created a branding that is both unique to these principles and is also related to the wider TotallyMoney brand and the proposition of creating financial momentum for our customers.
Each principle has its unique illustration based on the brand’s ‘Squiggle’ identity mark that works on its own or when displayed with the other principles creates a connection and a flow through each symbolising the collaborative creation of these principles and the connective thread that aligns our team and the products we build.
Thanks for reading, please leave any comments and it would be great to hear your stories of creating design principles for your teams.
