Mobile App and Website Design

Elevate

Elevate is a financial management tool available as both an app and a responsive website. It helps users save and budget their funds through interactive tools and educational resources. The design ensures accessibility across devices with an intuitive interface, making it easy for users to manage their finances and track their progress.

| Solo Project

| My Role

User Experience Designer - User Research, Visual Design

| Timeline

July 2024 - August 2024

| Tools

Figma

Context

As part of Google’s UX Design Certificate program, I undertook a solo project.

Problem

Many individuals struggle with effectively managing their personal finances, including tracking expenses, setting savings goals, and creating realistic budgets.


Solution

To address this problem by offering a user-friendly app and responsive website that provide tools and resources for budgeting and saving, helping users gain control over their finances and improve their financial health.


Understanding the User

Research

The User Research for this app focused on understanding common financial management challenges and preferences. By comparing popular websites and apps that offer similar benefits, I looked into what they lack on and what this app could potentially benefit from. This would include key pain points such as difficulties with budgeting, tracking expenses, and setting  savings goals. The use feedback was also beneficial as it allowed for an intuitive, cross platform tool that offers clear guidance and interactive features. 


User Pain Points

  • Complexity and usability. Users often find budgeting tools complicated or overwhelming, with unclear navigation and too many features that make it hard to understand how to use them effectively


  • Generic advice and templates that don’t account for individual financial situations or goals can make it challenging for users ot create budgets that are truly relevant to their needs.


  • Poor mobile and web responsiveness or inadequate accessibility features can hinder usability for users on different devices or those with disabilities


  • Some budgeting apps may have expensive subscription fees or hidden charges, which can deter users from fully utilizing the app or lead to dissatisfaction


Personas

Sarah Lopez

Age: 35

Education: Bachelor’s Degree in Business Administration

Hometown: Chicago, Illinois

Family: Upper Middle Class

Occupation: Marketing Manager at a Medium-Sized tech company

“Balancing our family's needs with our financial goals requires careful planning and smart budgeting”



Goals

Sarah aims to effectively manage her family’s finances, including saving for her children’s education and planning for retirement. She also wants to use a financial management app to simplify budgeting and track expenses efficiently

Frustrations

Difficulty in finding time to manage finances amidst a busy work and family schedule. She also have challenges in sticking to a budget due to unexpected expenses and varying monthly income

Problem Statement

Sarah Lopez, encapsulates the challenges and aspirations of a middle-aged professional balancing career, family, and financial responsibilities.


Javier Tan

Age: 24

Education: Currently Pursuing a Bachelor’s Degree in Engineering

Hometown: Miami, Florida

Family: Lower Class

Occupation: Part-time retail associate and freelance web designer

“I want to learn how to manage my money better so i can save up for travel and eventually start investing”



Goals

Javier aims to improve his budgeting skills and establish savings habits despite his variable income. He also wants to use a financial app to track expenses, set achievable savings goals and gain financial independence

Frustrations

He struggles with sticking to a budget due to irregular income from freelance work and fluctuating expenses. As well as limited knowledge of financial planning and investing, unsure where to start

Problem Statement

Javier Martinez, reflects the challenges and aspirations of a young adult navigating through education, part-time work, and freelance gigs while striving to achieve financial stability and pursue long-term financial goals.


Emma Thompson

Age: 42

Education: Associate’s Degree in Nursing

Hometown: Austin, Texas

Family: Middle Class

Occupation: Registered Nurse at a local hospital

“As a single parent, managing finances and preparing for unexpected expenses are my top priorities”



Goals

Emma wants to effectively manage her household finances, including budgeting for her children’s education and saving for emergencies. She also seeks a financial app that simplifies budget tracking and helps her make informed financial decisions.

Frustrations

Balancing work shifts with parenting responsibilities leaves little time for detailed financial planning. Concerns about not having enough savings for her children’s future needs and unexpected expenses.

Problem Statement

Emma Thompson, represents the challenges and priorities of a single parent balancing a demanding career in healthcare with the financial responsibilities of raising teenagers.


William Johnson

Age: 68

Education: High School Diploma

Hometown: Denver, Colorado

Family: Lower Middle Class

Occupation: Stay at home parent

“I want to make sure my retirement savings last and manage my expenses without the hassle of complicated technology”



Goals

He aims to effectively manage his retirement savings and living expenses on a fixed income. He seeks a financial app that is easy to use, helps him track spending and ensures he can live comfortably within his means

Frustrations

Difficulty in understanding and using complex technology, preferes simplicity in financial tools. As well and his concerns about managing healthcare costs and unexpected home repairs on a limited budget

Problem Statement

William Johnson, highlights the challenges and preferences of an older adult who values simplicity and ease of use in financial tools.

Starting the Design

This feature allows users to keep track of their financial progress, providing them with a detailed view of their achievements and advancements over time.

Wireframes

By integrating the most compelling elements from the 8 different designs I developed, I crafted a detailed sketch of the home screen. This refined sketch represents the culmination of my design process and will serve as the final version for the home screen.

Crazy 8

This exercise allowed me to sketch 8 distinct ideas in just 8 minutes. By using this method, I was able to generate 8 unique home screens, from which I can choose elements to incorporate into my final design.


Digital Wireframes

Given the need for user-friendliness and the provision of tools and resources, each design element was carefully considered to ensure a comprehensive and intuitive experience for all users.



In addition to the mobile design, I also developed a digital wireframe for the website. This wireframe seamlessly incorporates the elements of the mobile app into the website, ensuring a cohesive user experience across platforms.

This feature provides users with a detailed overview of their income alongside their anticipated take-home pay, offering a more personalized perspective on their financial situation.



Low-Fidelity Prototype

This prototype was utilized in my usability study, which enabled me to gather findings that could be applied to make revisions later in the design process.


Findings

  • Unclear on how to navigate the home page at first

  • Most users figure out how to get started within a few seconds

  • Enjoyed how each feature is organized into its own section

  • Instinctively tapped the plus icon when ensure when unsure of the next steps

Usability Study

Refining the Design

Revamping the Solutions After User Feedback

Before the usability study

After usability study

The usability study highlighted that the prominently centered big button might have caused some confusion. By positioning it away from the main notch, users have the flexibility to use the button for adding items, allowing for quick access to primary actions, significantly improving user engagement and interaction


Hi-Fidelity Prototypes

Mobile


Website

Going Forward

Impact

The project emphasizes the need for a financial management app that improves usability and user satisfaction through accessible, user-friendly design. This enhances confidence and control, leading to better budgeting and financial decisions.

Takeaways

What I Learned

Designing for accessibility ensures the app is usable by all, including those with visual impairments or limited tech skills. Customizable features improve user experience by allowing personalization for financial goals. Clear instructions, accessible help resources, and responsive support are essential for effective user guidance and issue resolution.