CASE STUDY

Magpie: A Responsive App

UX/UI Design

Magpie is a money-saving tool to help users save money quickly in preparation for a big purchase.

With simplicity at its core, the app is user-friendly and accessible to all, removing the stress from finance management.

My Role

As UX/UI Designer working on this project, I was responsible for the creation of the brand guidelines, wireframes, user interface design for both mobile and desktop versions, and mockups.

Scroll Mockup

The 5 W's

Who?

The tool is for anyone who wants to save money quickly for a specific goal over a finite period.

What?

A responsive mobile app allowing all data on income and expenses to be recorded easily, on the go, and from a variety of devices. At a glance, the user is aware of his/her incomings and outgoings, keeping track of his/her saving progress. The tool includes tips and rewards to encourage the user to save wisely.

When?

The user will use the tool in the period before a planned expense or purchase, set with a finite date. By linking the app to a bank account, the user is always up-to-date with his/her income and expenses and has access to expert advice on how to save better and faster.

Where?

As a responsive mobile app, the tool can be used anywhere and on any device.

Why?

Saving money can be a daunting process, especially when a major expense is looming on the horizon. The tool provides a personalised experience tailored to the user’s financial profile. With expert advice, the user is encouraged to find smart ways to save money. Rewards encourage the user to achieve his/her goals faster and wisely.

The Challenge

The challenge for this project was to create an inclusive platform for any user to benefit from the services it offers without alienating the novice customer.

Finance management is an intimidating undertaking so simplicity must remain at the core of the product, with accessible and useful information, encouraging tips and no complicated jargon.

User Stories

I picked three user stories from the brief that I felt provided a solid foundation for a comprehensive user journey whilst using the product.

User Flow Image

Branding Guidelines

The magpie is often associated with wisdom as it knows how to build a safe, secure and comfortable nest. It’s also known to like collecting shiny objects. These associations fit well with a money-saving tool aimed at users who are keen to prepare for their future and save wisely for a rainy day or a planned purchase.

With this in mind, I built the branding strategy around the three following themes:

Magpie Image

Colour

The magpie's tail is tinged with iridescent blues, purples and sometimes greens. I drew from this inspiration to create an uplifting colour palette that evokes wisdom and professionalism.

Colour Image

Typography & Writing Style

Clean and legible, the typography is welcoming: Playfair Display is used to give headings a classical feel with a bold modern twist, evoking trust and professionalism. Yet, a sense of flow gives the product a friendly appeal. Paired with Source Sans Pro, a clean and functional font to maximise legibility, the two come together well with a sense of warmth and harmony.

Concise and straightforward, the writing style moves away from financial jargon and complex instructions to maximise accessibility.

Typography Image

Imagery

Vibrant and playful illustrations are used to add personality to the user experience. They aim to encourage and guide the user in his/her saving plan incorporating the brand’s accent colours.

Illustration Image

Ideation & Execution

Drawing from my own situation as a person who’s never used such money-saving apps, I approached the ideation stage with a fresh mindset and a natural tendency for simplification.

My initial sketches focused on limiting the number of steps for the user to be able to achieve his/her goals. When time is of the essence for someone who wants to save quickly, the last thing they need is a convoluted set-up before they can even get started.

I limited the sign-up process to three steps, and followed this snappy pattern for the goal-setting configuration too. In just a few taps or clicks, the users can make their first saving contribution, already making progress towards achieving their goal.

With this framework set up, I digitised my wireframes and created a simple prototype that I tested on three users.

Mid Wireframes Image

User Feedback & Iterations

I recruited three participants to test the prototype with the aim to identify any pain points in the flow and overall navigation system. I presented them with a simple task:

“As a new user, you want to create a new goal to save money for a holiday so you can keep track of your progress.”

I received a vast amount of information from this testing session. I synthesised the results and rated each point raised to identify which actions should be taken in priority. I incorporated the most pressing changes, mostly geared towards adjusting some of the wording for clarity and softening some of the designs for a more friendly approach.

With all the elements now in place to guarantee a smooth and intuitive navigation, I proceeded to creating hi-fidelity wireframes by applying the visual components set out in the branding guidelines I created earlier in the process.

HiFi Wireframes Image HiFi Wireframes Image

A Mobile-First Approach

Working with a mobile-first approach allowed me to achieve a clutter-free layout that would work efficiently on smaller screens with the bare minimum.

Responsive Adaptation

When planning for a responsive layout that would be as effective on larger devices, the biggest challenge was in the adaptation of the Dashboard: incorporating a large amount of data in a comprehensive way without overwhelming the user was key.

To best address this, I expanded the information – not by adding to it, but by applying smart design hierarchy principles, thus enhancing the content’s visual impact.

As a result, the user gets an overview of his/her finances at a glance.

Colour-coded pie charts and progress bars can be read on the spot without any prior knowledge of economics language. The accessibility credentials of the product remain intact.

With the introduction of a playful illustration, the user is encouraged to spread the word about the product in exchange for voucher rewards. An option to access expert advice has been strategically placed under the Add New Goal button. These solutions maximise the user’s active engagement with the product.

Dashboard Image Dashboard Image

Insights

This project was challenging as I was not familiar with such apps myself. I could not draw from my own experience of using them. I had to spend a considerable amount of time researching the market for similar apps, testing them out and trying to identify what the user requirements should be.

On the other hand, this novice vantage point gave me the advantage to be able to relate to the newcomer and therefore create a welcoming experience, accessible to all.

I will look back to this challenge when tackling projects that take me out of my comfort zone in the future. I learnt that being less experienced in a particular field can be used as an advantage.

Mockup Image

Thank you for reading