2023

Crust

Client Self study

Duration 2 weeks

Testing Yes

Favourite cheese Cheddar

Brief

A money saving app

Design a money saving app for users who want to save money, quickly, for a particular reason.
Broken into 2 parts, firstly:

Design the branding

Secondly:

Design the app.

The users are not new to technology but do not like working with their
finances. So, they require that the information they receive via the tool is accessible, and clearly tells
them what they can do to better save

Branding

Branding guidelines

The first part of the brief was to generate a branding guidline kit for the app which I named crust as in earning a crust and then linked the letters to

C – clarity

R – reliability

U – usability

S – simplicity

T – trust

You can download the guidelines here and check out some graphic design skills while you are at it

View branding guidelines

Moving on from the branding guidelines I tackled the design tasks and requirement assessments form the users.

Task analysis

There were multiple tasks and user stories to consider so for time constraints I limited myself to a few so now to get lost in creating a full working app

User flow

After taking the user stories and pulling out a few I began to construct some user journey's to determine how the user would be expected to navigate their task

Wire framing

In the most basic form I sketched out screen designs and differnt ideas for data communication

Mid fidelity

From the sketches I turned my designs into the figma wireframes to determine the rough layout of the functions before colour was applied

Testing

With the wireframes I was able to test the design and get feedback on what people thought of my initial direction

High fidelity

Taking the feedback onboard I went ahead and createing high fidelity design with colour so I could run more tests

Preference tests

With the near finsihed design I was able to run some preference testing on some areas of the design that I was unsure about and got useful feedback for imporving the design

Initial designs

Sketches

With such a short project brief there was no time to do much ground research as this was more about a design excercise than a research one. As a result I went quickly into sketching ideas to establish a basis to work from in Figma

Having fabricated the rough design of the app I was able to use those sketches for the basis on the initial Figma design and later carry out testing the app to establish what worked and what didn't

Honsa

Takeaway - Revisit the horizontal slider and try to make it more obvious that is slides

Insights

The app looks good, I as a bit confused at first but got the hang of it. It is easy to follow, but in the first task I couldn’t find the transport category as it took me a while to realise that I could swipe across the different categories. I like the pie feature! Hosna

Britta

Takeaway - Reduce visual complexity of the pages and spread out the information provided

Insights

I like the pie chart, and your design has a lot of info right on the main screen, perhaps too much for my personal liking in fact... but as I said I don't use finance apps so perhaps that quantity of info is standard!I was slightly confused how you add a transaction... I see the little + button in the lower right of the screen, but are you meant to pre-select the category you want to add the transaction to, or do you just tap the + and then your categories appear and you select which you want to add to?

Ruben

Takeaway - Avoid duplicating buttons, look at way to identify categories easier

Insights

Task 2 & 3: No issues. Task 1: Maybe having icons on the spendings graphic would help to locate the categories faster. When editing the date the edit button was duplicated on the screen so it felt a bit confusing, Idk if it's typical of android to have the edit button on the toolbar but I think having it on top should be enough

Data visualisation test

Users were asked to say which design they preferred with the only difference being how the savings goals were presented

Option 1 40%
Option 2 60%

Option 1

Option 2

Outcome

With the preference testing done the design was ready for final UI tweaking and delivery. I used the input given in the test and made some further modifications to increase the contrast and reduce the visual strain of the bright colours