Overview

Length

3 days

Role

Designer

Tools

Figma

Team

Solo

View prototype

Prototype

Case study

Making budgeting simple and easy

This budgeting app was made to be simple, understandable, and usable by everyone. By utilizing many different design principles, this design came together into a stunning prototype.

What did I expect? What was I aiming for?

This budgeting app was given to me as a final project, but I still wanted to creating something I was proud of and could show off. I wanted to create a product that was designed with intent and was based on core foundations of usability. I wanted to create something that would be seamless for all users to interact with, whether it's their 1st interaction or their 100th.

What did I end up with?

The interface was a culmination of design principles, usability principles, and Figma best practices. I am proud of the final product and believe it shows off my skills as a designer.

What did I learn?

Throughout this process, I mastered my Figma prototyping skills. I used all of the knowledge I'd learned from my previous 3 years to develop a product to a professional level. This project honed my skills in and helped me solidify my passion for product design.

Process

Project Motivation

Developing Figma skills

Project Type

UI prototype

Skills Learned/Used

Figma

View prototype

Prototype

Overview

Systematic UI design approach

8-pt grid

While designing this project, I worked on an 8-pt grid. I made sure to adhere to this grid except when dealing with text where I switched to a 4-pt grid to give me more control over the precise spacing needed with certain type. I also used 4 columns in this grid to help space out my design in a visually appealing and usable manner. Designing on this grid is important because when the prototype is sent to a developer, the 8-pt system will translate easily to programming languages.

Component properties

Throughout this project, there are many components with many properties assigned to them. This is important when designing for larger interfaces which reuse assets a lot, as it allows you to customize each asset much more without having to detach it and lose your universal component properties. I used each of the component property types at least once throughout this project.

Usability principles

This project was a culmination of Figma hard-skills as well as an application of many design principles which I have learned over the years. The most important part of an interface is making sure that it's effectively usable, and that the user will want to stay and use it. Utilizing the many usability principles in a design will make sure that this outcome is achieved. This project has many principles incorporated into the design, such as Miller's Law (limiting the amount of information displayed at any given time to limit the amount of mental effort required from the user), Hick's Law (limiting the number and complexity of choices to decrease the amount of time it takes to make a decision), and Jakob's Law (using well known interface components that match with user's mental models to limit confusion). These are only a handful of principles among numerous others used in this design to create an effective, cohesive, and most importantly, usable, design.

Reflection

What could I have done differently?

Looking back on the project, I wish I had more developed more branding for the project. It's just a generic budgeting app with no logo or branding. Given the short time span, I wanted to focus my time on the foundations of usability and design.

Final thoughts

I'm happy with the finished product considering that it was just a UI project and had no UX research put into it. This project has my desired level of polish, which I aim to have in each of my projects, even with the short time frame. I believe this is a proper representation of my design skills with Figma and my understanding and personal adaptation of many different user-centered design principles.

Explore some more

Home

Projects

About