Style & Functionality: a redesign of Tricount
Sharing expenses nowadays is easier than ever. We have gotten used to manage everything digitally, with a phone and just a few clicks. Our current lifestyle requires us to make so many decisions every single day and for that we need to have an easy tool that is easy, accesible, usable and visually nice and appealing.
The mobile app Tricount is the app that I've chosen to redesign. It is an example of efficiency and simplicity and it's a necessary app that correspond to a real problem that as users we have nowadays. It was one question what made me choose this app: if the free version of an app is supposed to be attractive, why isn't already nicer and more usable?
Doing some secondary research online, it had good reviews overall, and looking specifically at the Apple Store app, it said that it was the second best rated in a split-expenses app, with a rating of 4.8/% stars. The user's comments were overall positive, which stroked me quite a lot because that didn't match at all with the feedback that I had just received from the users that I interviewed and tested with an usability test:
🔹 It's an excel turned into an app
🔹 It shows simplicity in a negative way
🔹 If this is the app that is supposed to persuade me to go premium, then it's not worth paying the money
🔹 It has a clear purpose of making money, not to help the user
Here both groups of users are real, but they differ very much in their opinions. In order to develop a new improved version, I asked again the same question with a little twist: "if this app is focused on making revenue from a final user, then why not redesign it to make it more usable, clear and quicker to use for the user?
The current app versus my proposal
How did I go from A to B?
🔷 Let's do some analysis:
A great tool to work on a redesign is the heuristic principles, because they allow you to check what's to be improved and what's working. At first glance, I realised that there were features that I wanted to keep, such as the simplicity, the short but effective user flow and the visual rounded elements that offer an interactive and more appealing style.
To appreciate these more, we worked on an interesting exercise, copying the screens already existing in Figma, which allows you to see details that are not very obvious. After a thorough review, I summarized the principles to apply so as to improve the design:
Here are the results:
🔷 Let's do some testing!
This is for me one of the most interesting parts of this project. In this case I chose to do three types of testing and research - user interviews, usability testing and competitors analysis - so I could have qualitative data from users, understand their behavior and check what were the conventions used in this sort of mobile applications. The users that I interviewed in this case were us users that were already using the app, users that used similar apps and users who had never used this kind of app. These helped me to shape my target: a user persona interested in controlling their expenses.
Analyzing the results was quite interesting, because the three methods used gave similar insights:
🔹 User Interview:
⏺︎ Two types of users: those who used the app daily and those use it for traveling purposes
⏺︎ Both types of users didn't think the app was clear enough
⏺︎ Both user's conclusion was: it's not worth paying the money to update to premium
🔹 Usability testing:
⏺︎ The users were unsure about the function of bigger button (plus and card)
⏺︎ They had trouble finding the profile page and balance expenses
⏺︎ The average time to add an expense was 3 minutes, to find other features more
⏺︎ The users wanted to do the task of adding expenses quick, and they got frustrated
🔹 Competitors analysis (direct and indirect):
⏺︎ Tricount highlighted over others on usability, but visually was less attractive
⏺︎ Splitwise was design wise nicer, but its usability was more complex
⏺︎ Other bank apps were using similar colours but leaving more white space than tricount.
And here is the plan:
🔷 Let's ideate!
Working on the first sketches was key to input all the main points that I got from the research, and for that I needed to define some aspects: the visual inspiration with a mood board, a global view of possible user flows with a sitemap and a guide to use all the elements with a style tyle.
🔹 Mood board: visual idea of practicality, usability and comfortability
🔹 Site map: Actual structure versus proposal to simplify
🔹 Style tyle: Elements and main components of my design
🔷 Let's design!
🔵 Mid fidelity wireframes:
To start working the design, I decided to go straight into mid fidelity wireframes, as I had already made some decisions. Whilst working on it, I realised there were more decisions to be made. These are the most important ones:
⏺︎ Re-using the already existing elements: the app had already a library of many elements, styles and colours. I chose to re-use them because they were already aligned with tricount essence.
⏺︎ Non scrollable screen in most of the features: I prioritised simplicity and keeping the focus on the important information, which resulted in no need for any scrolling in most pages.
⏺︎ Menu with all features: the first 10 seconds are the most important ones when you present a visual product to engage with a user. That's why the homepage shows all the functions the app can do without having to do a second click on a menu, avoiding the frustration or disinterest of the user.
⏺︎ Follow conventions: change the menu icon to make it more noticeable by following a convention. This will allow the user to recognise it easier and quicker.
⏺︎ Element sizes: Keep the same sizes for repeatable information in all screens, such as the header with the logo & menu to achieve consistency
⏺︎ Nice to have: add some extra functionalities that the app didn't have: pay, mark as pay and send reminder, to complete the user's experience
🔵 High fidelity wireframes:
From the mid fidelity wireframe, I had the basics elements that I wanted to include. However, it wasn't until the high fidelity wireframe when I narrowed it down, maintaining the goal of keeping it simple. During this stage, which was the most complicated for me, I made the following decisions:
⏺︎ Colours: it's one of the most important decisions, as it affects the whole consistency and design. I first chose blue and grey, following the existing app colours. I was not convinced, so I tried a colour that could contrast the blue tones, but in the end I made my choice of making it all blue, exploring all possibilities.
⏺︎ Buttons & interactivity: from the beginning I had in my mind that only the primary and secondary buttons would change colour to show visibility status. Nonetheless, finding a unique style for the remaining buttons & icons was a challenge, so I needed to see it all together and restructure everything.
⏺︎ Style tyle evolution: as I applied the elements, I realised I had too many, so I did an exercise of removing the less important and trying out again usability testing. This was crucial to keep the consistency simple, with enough white space and to make sure that the users can achieve learnability quickly.
⏺︎ Usability test with a different type of user: By doing this test, I wanted to measure that the main information & functions were communicated clearly. It gave me clear insights on improvements, and I ended up making the important text information as simple as possible, as the remaining elements (buttons, banners, colours,etc) were already showing the style.
⏺︎ Components & styles: working with components & styles has helped me a lot, making the design faster and easier. Whilst iterating, it might not be as useful, however while setting up the final structure components were key.
🔷 Let's make it interactive!
A quick recap: at this point, I have developed a high fidelity profile based on the insights of primary and secondary research. I also applied a style and a user flow that makes my proposal of tricount mobile app more usable, visually consistent and allowing quick learnability by the users.
I specifically created two flows for the prototype:
⏺︎ From homepage to review my settings
⏺︎ From homepage to manage my expenses already existing
🔷 Summary and improvements
As a summary, I was able to check with the last usability testing that many of the design decisions that I made have been positive towards the usability and accessibility of the app, especially the following points:
⏺︎ The homepage was clearer
⏺︎ The profile page was more functional and editable
⏺︎ The information hierarchy was easy to understand
⏺︎ The aesthetics & visual style had clearly improved.
🔷 Conclusions and learnings
⏺︎ Always have a folder where I can keep all the apps and design that I like
⏺︎ Be aware of the use of white space between elements. Less is more.
⏺︎ The only solution when you are stuck in your design is test your product and iterate
⏺︎ Be open to feedback and other perspectives
⏺︎ All apps have been created based on a goal and some needs, analyse it before thinking of making changes on it.
⏺︎ Review the details design details with time and slowly, because all the details are important.
⏺︎ Be patient, frustration comes and goes 💪
