Litmus - budget tracking web app

UX • UI 

Sector: FinTech

Tools: Sketch, Adobe Photoshop CC, MarvelApp, SAAS, Adobe Color, Jira, Miro

Litmus Partnership is a web app designed to help the client manage budgets across multiple sites. Currently, all reports are made by hand, and every time Litmus acquires a new contractor they need to hire more people to manage their accounts. This solution is designed to solve that problem and make it easy for the contractors and Litmus manage the financial data.

 

Main elements to focus on:

  • Ensure it’s scalable
  • Data visualisation
  • Role management
  • Budget reports (generate and submit)
  • Calendar and notification center
  • Historical data

Research

• Core message
• Target market
• Competition
• End-users

Problem

• Persona
• Problem
• Plan

Idea

• Attention
• Engagement
• Goal

Prototype

• Ideas
• Creation

Testing

• Functionality
• Success
• Team effort

Research

This web app is for the internal employees of Litmus Partnership and their contractors.

Customers need an easy-to-use accessible platform with extensive data visualisation dashboard to submit and track the budgets on contractor’s site.

The app will have 5 main user roles with different permissions.

 

  • The Admin role will be able to edit the users, create user groups, manage permissions, and configure templates.
  • The consultant will view the reports, set deadlines and add calendar meetings.
  • Analyst will review the reports, edit records and have acess to the meetings.
  • Contractor will be submitting the budget data, view report history and have acess to the meetings.
  • Clients get user-friendly reports.

 

 

I looked for inspiration for the UI on Dribble, Pinterest, TikTok, Awwards etc. Those platforms keep me up to date on current design trends.

 

There’s no similar solution out there but I looked at the established platforms with similar partial functionality: 

  • WordPress
  • Power BI
  • Google admin console and Gmail
  • Apple calendar
  • Apexx Global
  • Jira
  • Binance and Revolut

User-Persona

To start working out my plan of action, I need to ask myself how do I cater to such a broad userbase?
For that, I am going to address customer personas.

Marc Jakobs

Primary persona – a contractor at Litmus.

Idea

I started with creating an IA (Information Architecture). Then I made quick sketches of the main pages where I’ve outlined the main functionality and made notes of additional features that might be useful such as filters, tips, and colour-coded user groups.

 

Created a backlog to make sure all little  extra functionality is included for better user experience, like filters, theme changes, search, export and import options, working on graphs, update history, quick copy and email, etc.

Prototype

In Sketch I started creating low-fidelity designs, making sure all is aligned with the brief and signing off with the stakeholders. Then I created high-fidelity interactive prototype and generated a design library with sleek UI design.

 

Created elements for different states (i.e. error, active, filled, inactive, etc); created banners and icon library for future use and extension.

Test

For testing I used these following techniques to ensure the design is intuitive and accessible:   

  • AB testing
  • Card sorting
  • Heat maps
  • Optimal workshop
  • Qualitative research

Thank you!