Matthew Mandravelis
Case study

Fintech APP

A digital bank that helps users control their spendings and get out of debt faster while saving on interest.
Services Provided
  • Design Strategy
  • Research
  • Re-branding
  • UX UI Design
Services Provided
  • Design Strategy
  • Research
  • Re-branding
  • UX UI Design
Overview

A well-known brand already in the marketplace with thousands of users, a severe UX issue, and an ambitious aim to attract new investors. Their current solutions were outdated, way too complicated, and far from user-friendly. They were looking for a way to increase engagement and conversion rates.

My approach was to reimagine the logic of the product completely to come up with a solution to make the new one light and simple. To do so, I had to dive deeply into the business and understand its users.

To strategize my approach, I mapped out the design thinking process and UX methodologies throughout each design process phase. Defining requirements, exploring business models, and creating user personas based on existing and prospective users following user interviews, card sorting, tree testing, wireframing, usability testing, rebranding, and high fidelity prototyping.

Process
  • 01. Discovery with the client
  • 02. Competitive and comparative research
  • 03. User flows and user story mapping
  • 04. Interactive wireframing
  • 05. Testing on users and feedback implementation
Personas

Following the industry's best practices to create an improved user-centered product, it was essential to understand who the end-users are. Understanding what the users need, any behavioral habit, and pain points, we could be better positioned to creatively solve problems and suggest alternatives that will increase the likelihood of success and create the perfect product for them.

I created six personas: three for each existing and prospective user representing a specific type of end-user. Existing data and their demographics, along with new field research and polls, have defined the personas. The next step was to create an empathy map, and we continued with user interviews to understand what difficulties users have and why they use or don't use specific features.

Wireframes

Before getting to the design stage, and after a lengthy interview session, I crafted the first wireframes, keeping in mind all stakeholders' suggestions and needs. At the same time, a list of core functions was formed to help optimize the development process and prepare a new sales strategy.

I created interactive mid-fidelity wireframes based on initial low-fidelity sketches. They allowed both the client and the users to understand how the product will work. Of course, Interactive wireframes were a perfect way to run user testing without expensive full-fledged development.

High-fidelity prototyping

With approved and validated wireframes, scaling up into a high fidelity mockup using a series of design, animation, and prototyping technologies, including but not limited to Sketch, Adobe Premier, and Invision, was necessary to ratify the overall experience that was based on a new and fresh style.

Design systems

Large systems have a hard time scaling and evolving without a design system. Developing such a system for a digital bank that helps users control their spendings ensured that the developing team and we would stay in perfect sync.

I followed the principles of Atomic Design, as I always do when building design systems. Specifically, because such an approach performs well on the front-end as well.

Everything was part of the design systems, from documentation covering the basics such as naming rules, writing principles, animations and layouts to grid, spacing colors, typography, buttons, controls, illustrations, tables, fields, tabs, navigation, and lists. And of course, mini illustrated icons that will be used throughout the system to add a recognizable character to the whole product.

Highlights

Timeline & Tools
  • Project completed within 160 hours
  • 1 Long Scrolling Page (24 Sections)
  • Editable 3D Icons + Illustrations (In Figma)
Features.
  • Parallax + Micro-Interactions
  • Figma Files Included
  • Documentation + Support
Say hello 👋

Let’s Work
Together.

Feel free to reach out with a small brief on your business needs, budget, and estimated length.

I’d love to meet up with you to discuss your venture and potential collaboration.

Let’s connect