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.
For that, I am going to address customer personas.
Menu
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
• Target market
• Competition
• End-users
Problem
• Persona
• Problem
• Plan
• Problem
• Plan
Idea
• Attention
• Engagement
• Goal
• Engagement
• Goal
Prototype
• Ideas
• Creation
• Creation
Testing
• Functionality
• Success
• Team effort
• 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
Marc Jakobs
Primary persona – a contractor at Litmus.
Info
Problem
Info
- Age: 44
- Occupation: Accountant
- Family: husband, two children – 6 and 9 years old
- Location: Kent, United Kingdom
- Character:
- Motivated
- Introverted
- Professional
- Goals include:
- Quick and simple budget input
- The absolute minimum of unnecessary bureaucracy and complications
- Clear data visualisation to monitor budgets for several clients
- Minimal conflict
Problem
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.
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!