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:
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.
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:
Primary persona – a contractor at Litmus.
Marc works very long hours in front of computer. His eyes get very tired by the end of the day. The company is expending and bringing in more clients. He finds it hard to manage occasionally and worries that he might miss something or generate a wrong report.
He would love to have a solution that will help him manage multiple budgets, quickly generate reports and keep track of the deadlines. He admits that a user-friendly and accessible data visualisation dashboard and automated report creation will benefit his work.
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.
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.
For testing I used these following techniques to ensure the design is intuitive and accessible:
Thank you!