Monimie
Web App, Landing page UI
Monimie is a finance web app that helps users track their spending, allocate savings, and manage their subscriptions efficiently.
Duration: September 2021
Role: UI Designer
Responsibilities: Sketching, Wireframing, UI, Mockups, Web App design, Landing Page design.
Tools: Figma, Adobe Photoshop, Illustrator
PROJECT BRIEF
On a daily basis, it’s challenging to keep track of all our spending and revenue. Our personal financial tool called Monimie assists users in managing subscriptions, tracking spending, allocating savings, and investing. We want you to create a user-friendly interface for our web application while keeping in mind our brand identity, objectives, and the specified persona.
PERSONA
STYLE GUIDE
PROCESS
Firstly, I did some research to understand dashboard design trends and best practices, and to consolidate my deductions from the brief. Then I brainstormed about what relevant details should be on the dashboard, and how they should be placed.
SKETCHING
I then proceeded to sketch as many ideas that came to mind. Emphasis was on the design layout and what information would be most ideal.
DIGITAL WIREFRAME
The key summaries need to be at the top of the page. The user may become overwhelmed by too many graphs on a screen. Therefore, I decided to consolidate pertinent data into a single graph or table while still allowing the user to choose between different display kinds and settings. I largely followed this technique for the other pages.
HIGH FIDELITY MOCKUPS
DASHBOARD
It is important that the user can view at a glance their finances, including income, expenses, savings, bills, and subscriptions. For a better approximation of past data and trends, I designed a graph. This serves as a focal point on this screen.
WALLET
With the app, the user can manage the synchronization of their card/accounts with the app and can choose between other forms of data entry.
TRANSACTIONS
This screen gives more in-depth information about the user’s expenses. During the research, several participants complained that there was no way to monitor their subscriptions. A section in this screen was made for this purpose, so users can see what services they subscribed to and when payment was due. When the PLUS button is clicked, it brings up a modal that allows users to input transaction details themselves.
SAVINGS
This screen gives more in-depth information about the user’s savings plans and goals. Users need to be able to budget for future expenses.
SETTINGS
Here, the user can access and edit their personal information, and manage saved cards. Users should also be able to make personalized adjustments for accessibility like text size. More sections like this will be designed for this screen.
DARK MODE
I also explored a dark mode. Dark modes have become a norm in digital product design. Asides from the fact that it is visually appealing, it has a few other advantages. Considering that the users of this app will be staring at the large screens trying to process data, designing a Dark mode was essential as it helps to reduce eye strain. It also adapts to changes in lighting conditions and is easy to use in dark environments or at night.
LANDING PAGE
The secret to business success is getting the right messages to the right audiences. The landing page was a powerful marketing tool for the Monimie company in this regard.
TAKEAWAYS AND NEXT STEPS
An Investment section that allows users to manage their investments – fiat and crypto is surely a potential addition to the app. Even though the cost of building such a feature is a foreseeable challenge, it will definitely be explored.