ChangEd App

A roundup based app that helps you effortlessly pay down student loans

A roundup based app that helps you effortlessly pay down student loans

Client: ChangEd

Skills: UX/UI design, user research, branding, wireframing, prototyping, animation, usability testing 

About the project

With over 10,000 active users and $3.5 million sent in loan payments the ChangEd app aims to wipe out student debt by helping users make small payments on their loan. I was tasked with improving the user experience, designing a new goals center and laying the groundwork for a visual design system. 

Client: ChangEd

Skills: UX/UI design, user research, branding, wireframing, prototyping, animation, usability testing 

About the project

With over 10,000 active users and $3.5 million sent in loan payments the ChangEd app aims to wipe out student debt by helping users make small payments on their loan. I was tasked with improving the user experience, designing a new goals center and laying the groundwork for a visual design system. 

Client: ChangEd

Skills: UX/UI design, user research, branding, wireframing, prototyping, animation, usability testing 

About the project

With over 10,000 active users and $3.5 million sent in loan payments the ChangEd app aims to wipe out student debt by helping users make small payments on their loan. I was tasked with improving the user experience, designing a new goals center and laying the groundwork for a visual design system. 

Client: ChangEd

Skills: UX/UI design, user research, branding, wireframing, prototyping, animation, usability testing 

About the project

With over 10,000 active users and $3.5 million sent in loan payments the ChangEd app aims to wipe out student debt by helping users make small payments on their loan. I was tasked with improving the user experience, designing a new goals center and laying the groundwork for a visual design system. 

Client: ChangEd

Skills: UX/UI design, user research, branding, wireframing, prototyping, animation, usability testing 

About the project

With over 10,000 active users and $3.5 million sent in loan payments the ChangEd app aims to wipe out student debt by helping users make small payments on their loan. I was tasked with improving the user experience, designing a new goals center and laying the groundwork for a visual design system. 

My Role

As a UX/UI designer, my tasks included design research, concepting wireframing, interactive prototyping, animations and user testing.

During this project I worked with a team of designers through a series of sprints to collaborate on stakeholder meetings, research, user testing and synthesis. We each developed our own design solutions and presented them to ChangEd. 

My Role

As a UX/UI designer, my tasks included design research, concepting wireframing, interactive prototyping, animations and user testing.

During this project I worked with a team of designers through a series of sprints to collaborate on stakeholder meetings, research, user testing and synthesis. We each developed our own design solutions and presented them to ChangEd. 

My Role

As a UX/UI designer, my tasks included design research, concepting wireframing, interactive prototyping, animations and user testing.

During this project I worked with a team of designers through a series of sprints to collaborate on stakeholder meetings, research, user testing and synthesis. We each developed our own design solutions and presented them to ChangEd. 

My Role

As a UX/UI designer, my tasks included design research, concepting wireframing, interactive prototyping, animations and user testing.

During this project I worked with a team of designers through a series of sprints to collaborate on stakeholder meetings, research, user testing and synthesis. We each developed our own design solutions and presented them to ChangEd. 

My Role

As a UX/UI designer, my tasks included design research, concepting wireframing, interactive prototyping, animations and user testing.

During this project I worked with a team of designers through a series of sprints to collaborate on stakeholder meetings, research, user testing and synthesis. We each developed our own design solutions and presented them to ChangEd. 

changed_hi-fi_mockups

The challenge

The users of the ChangEd app are recent college graduates in their 20’s and 30’s with varying levels of understanding of how student loans work. Therefore providing easy to understand information about their loans coupled with encouraging data visuals optimized for quick viewing was the primary challenge

The secondary challenge included promoting financial education by introducing a goals center feature to give users the ability to pay down loans faster and more easily. 

An accompanying design system would help lay the visual building blocks of reusabile components on which the growing company could continue to the solve problems given their constraints and abilities. 

 

The challenge

The users of the ChangEd app are recent college graduates in their 20’s and 30’s with varying levels of understanding of how student loans work. Therefore providing easy to understand information about their loans coupled with encouraging data visuals optimized for quick viewing was the primary challenge

The secondary challenge included promoting financial education by introducing a goals center feature to give users the ability to pay down loans faster and more easily. 

An accompanying design system would help lay the visual building blocks of reusabile components on which the growing company could continue to the solve problems given their constraints and abilities. 

 

The challenge

The users of the ChangEd app are recent college graduates in their 20’s and 30’s with varying levels of understanding of how student loans work. Therefore providing easy to understand information about their loans coupled with encouraging data visuals optimized for quick viewing was the primary challenge

The secondary challenge included promoting financial education by introducing a goals center feature to give users the ability to pay down loans faster and more easily. 

An accompanying design system would help lay the visual building blocks of reusabile components on which the growing company could continue to the solve problems given their constraints and abilities. 

 

The challenge

The users of the ChangEd app are recent college graduates in their 20’s and 30’s with varying levels of understanding of how student loans work. Therefore providing easy to understand information about their loans coupled with encouraging data visuals optimized for quick viewing was the primary challenge

The secondary challenge included promoting financial education by introducing a goals center feature to give users the ability to pay down loans faster and more easily. 

An accompanying design system would help lay the visual building blocks of reusabile components on which the growing company could continue to the solve problems given their constraints and abilities. 

 

The challenge

The users of the ChangEd app are recent college graduates in their 20’s and 30’s with varying levels of understanding of how student loans work. Therefore providing easy to understand information about their loans coupled with encouraging data visuals optimized for quick viewing was the primary challenge

The secondary challenge included promoting financial education by introducing a goals center feature to give users the ability to pay down loans faster and more easily. 

An accompanying design system would help lay the visual building blocks of reusabile components on which the growing company could continue to the solve problems given their constraints and abilities. 

 

Deliverables 

Competitive Analysis

Mockups

Prototypes

Microinteractions

UI Kit

Style Guide

Deliverables 

Competitive Analysis

Mockups

Prototypes

Microinteractions

UI Kit

Style Guide

Deliverables 

Competitive Analysis

Mockups

Prototypes

Microinteractions

UI Kit

Style Guide

Deliverables 

Competitive Analysis

Mockups

Prototypes

Microinteractions

UI Kit

Style Guide

Deliverables 

Competitive Analysis

Mockups

Prototypes

Microinteractions

UI Kit

Style Guide

UI Kit@2x

UI kit & style guide

UI kit & style guide

UI kit & style guide

UI kit & style guide

UI kit & style guide

A closer look at the process

Below I will describe each step in the process as well as why certain design decisions were made. I will also take a further look into some of the constraints, solutions and results. 

In this project I continued to practice user centered design to deliver solutions that were tested with users and iterated upon. I became more comfortable with agile development and the methodology and environment that I was working in continued to inspire me to practice design and hone my skills. A highlight of this project was my ability to communicate with stakeholders effectively by becoming aligned on the goals and objectives early and often.  

Please feel free to reach out with any questions or for more details. 

 

A closer look at the process

Below I will describe each step in the process as well as why certain design decisions were made. I will also take a further look into some of the constraints, solutions and results. 

In this project I continued to practice user centered design to deliver solutions that were tested with users and iterated upon. I became more comfortable with agile development and the methodology and environment that I was working in continued to inspire me to practice design and hone my skills. A highlight of this project was my ability to communicate with stakeholders effectively by becoming aligned on the goals and objectives early and often.  

Please feel free to reach out with any questions or for more details. 

 

A closer look at the process

Below I will describe each step in the process as well as why certain design decisions were made. I will also take a further look into some of the constraints, solutions and results. 

In this project I continued to practice user centered design to deliver solutions that were tested with users and iterated upon. I became more comfortable with agile development and the methodology and environment that I was working in continued to inspire me to practice design and hone my skills. A highlight of this project was my ability to communicate with stakeholders effectively by becoming aligned on the goals and objectives early and often.  

Please feel free to reach out with any questions or for more details. 

 

A closer look at the process

Below I will describe each step in the process as well as why certain design decisions were made. I will also take a further look into some of the constraints, solutions and results. 

In this project I continued to practice user centered design to deliver solutions that were tested with users and iterated upon. I became more comfortable with agile development and the methodology and environment that I was working in continued to inspire me to practice design and hone my skills. A highlight of this project was my ability to communicate with stakeholders effectively by becoming aligned on the goals and objectives early and often.  

Please feel free to reach out with any questions or for more details. 

 

Research

By interviewing users and speaking with stakeholders we discovered that most users are college graduates in their 20’s and 30’s although a handful of older relatives use the app based on the ‘contributer feature’.

Through these conversations we narrowed in on two groups of users, the financially educated millennial and the financial newbie. These personas would help us empathize with users and understand how we could develop a tool that would help them pay down loans more easily. 

 

 

   

Research

By interviewing users and speaking with stakeholders we discovered that most users are college graduates in their 20’s and 30’s although a handful of older relatives use the app based on the ‘contributer feature’.

Through these conversations we narrowed in on two groups of users, the financially educated millennial and the financial newbie. These personas would help us empathize with users and understand how we could develop a tool that would help them pay down loans more easily. 

 

 

   

Research

By interviewing users and speaking with stakeholders we discovered that most users are college graduates in their 20’s and 30’s although a handful of older relatives use the app based on the ‘contributer feature’.

Through these conversations we narrowed in on two groups of users, the financially educated millennial and the financial newbie. These personas would help us empathize with users and understand how we could develop a tool that would help them pay down loans more easily. 

 

 

   

Research

By interviewing users and speaking with stakeholders we discovered that most users are college graduates in their 20’s and 30’s although a handful of older relatives use the app based on the ‘contributer feature’.

Through these conversations we narrowed in on two groups of users, the financially educated millennial and the financial newbie. These personas would help us empathize with users and understand how we could develop a tool that would help them pay down loans more easily. 

 

 

   

Research

By interviewing users and speaking with stakeholders we discovered that most users are college graduates in their 20’s and 30’s although a handful of older relatives use the app based on the ‘contributer feature’.

Through these conversations we narrowed in on two groups of users, the financially educated millennial and the financial newbie. These personas would help us empathize with users and understand how we could develop a tool that would help them pay down loans more easily. 

 

 

   

Group 2@2x
Group@2x

We believe that graduates want control over their student loan repayments. So if we provide a tool with which they can become financially educated and secure then we will help them pay off their student loans more quickly and save interest.


We believe that graduates want control over their student loan repayments. So if we provide a tool with which they can become financially educated and secure then we will help them pay off their student loans more quickly and save interest.


We believe that graduates want control over their student loan repayments. So if we provide a tool with which they can become financially educated and secure then we will help them pay off their student loans more quickly and save interest.

 

We gathered baseline data by speaking with users and in addition to discussing the state of the app with stakeholders, we pieced together how users were interacting with the app and  identified some of the pain points. The current app functions well with users who set it and forget it and only check the app one time per month. But to more frequent users the app suffers from hiding options and allowing users to personalize their experience as well as gain insights and knowledge about their finances. 

We gathered baseline data by speaking with users and in addition to discussing the state of the app with stakeholders, we pieced together how users were interacting with the app and  identified some of the pain points. The current app functions well with users who set it and forget it and only check the app one time per month. But to more frequent users the app suffers from hiding options and allowing users to personalize their experience as well as gain insights and knowledge about their finances. 

Understanding the user journey

We gathered baseline data by speaking with users and in addition to discussing the state of the app with stakeholders, we pieced together how users were interacting with the app and  identified some of the pain points. The current app functions well with users who set it and forget it and only check the app one time per month. But to more frequent users the app suffers from hiding options and allowing users to personalize their experience as well as gain insights and knowledge about their finances. 

Understanding the user journey

We gathered baseline data by speaking with users and in addition to discussing the state of the app with stakeholders, we pieced together how users were interacting with the app and  identified some of the pain points. The current app functions well with users who set it and forget it and only check the app one time per month. But to more frequent users the app suffers from hiding options and allowing users to personalize their experience as well as gain insights and knowledge about their finances. 

_User Journey@2x

User Journey Map

Creating a UI kit 

Competitive Analysis

Competitive Analysis

Competitive Analysis

Competitive Analysis

As a team we took an inventory of apps focused on student loan repayment tools as well as apps in the broader financial tech marketplace, we noted visual characterisitcs and interaction patterns.

As a team we took an inventory of apps focused on student loan repayment tools as well as apps in the broader financial tech marketplace, we noted visual characterisitcs and interaction patterns.

As a team we took an inventory of apps focused on student loan repayment tools as well as apps in the broader financial tech marketplace, we noted visual characterisitcs and interaction patterns.

As a team we took an inventory of apps focused on student loan repayment tools as well as apps in the broader financial tech marketplace, we noted visual characterisitcs and interaction patterns.

As a team we took an inventory of apps focused on student loan repayment tools as well as apps in the broader financial tech marketplace, we noted visual characterisitcs and interaction patterns.

App Logos@2x

Why did we do this?

We not only wanted to know what our competitors were leveraging and what was successful in their designs, we wanted to know why. For example why does Pillar display savings with text and not a graph? Or how does Acorns encourage users to see the potential of their investments?

 

Why did we do this?

We not only wanted to know what our competitors were leveraging and what was successful in their designs, we wanted to know why. For example why does Pillar display savings with text and not a graph? Or how does Acorns encourage users to see the potential of their investments?

 

Why did we do this?

We not only wanted to know what our competitors were leveraging and what was successful in their designs, we wanted to know why. For example why does Pillar display savings with text and not a graph? Or how does Acorns encourage users to see the potential of their investments?

 

Why did we do this? 

We not only wanted to know what our competitors were leveraging and what was successful in their designs, we wanted to know why. For example why does Pillar display savings with text and not a graph? Or how does Acorns encourage users to see the potential of their investments?

 

Insights I learned

Insights I learned

The direct competitors of ChangEd lacked the level of professionalism, trust and finish that the wider financial tech apps displayed. I set out to design a dynamic and personalized app through strong iconography, personal tone, interactive engaging data visuals, and a cohesive visual language. Through these insights I was able to strategically differentiate ChangEd from its competitors.

The direct competitors of ChangEd lacked the level of professionalism, trust and finish that the wider financial tech apps displayed. I set out to design a dynamic and personalized app through strong iconography, personal tone, interactive engaging data visuals, and a cohesive visual language. Through these insights I was able to strategically differentiate ChangEd from its competitors.

Design Principles

We distilled our research, personas and competitive analysis into design principles that would serve as the pillars for our designs. 

 

designprinicples

Concepts

After speaking with users and gathering baseline data on the current app, many flaws in the functionality and misunderstanding of information were identified. The goal of the new concept was to simplify the amount of information and data being displayed to the user. Through breaking information into chunks by utilizing a card based approach, savings and progress could be displayed at various different levels. 

Concepts

After speaking with users and gathering baseline data on the current app, many flaws in the functionality and misunderstanding of information were identified. The goal of the new concept was to simplify the amount of information and data being displayed to the user. Through breaking information into chunks by utilizing a card based approach, savings and progress could be displayed at various different levels. 

Concepts

After speaking with users and gathering baseline data on the current app, many flaws in the functionality and misunderstanding of information were identified. The goal of the new concept was to simplify the amount of information and data being displayed to the user. Through breaking information into chunks by utilizing a card based approach, savings and progress could be displayed at various different levels. 

Concepts

After speaking with users and gathering baseline data on the current app, many flaws in the functionality and misunderstanding of information were identified. The goal of the new concept was to simplify the amount of information and data being displayed to the user. Through breaking information into chunks by utilizing a card based approach, savings and progress could be displayed at various different levels. 

Concepts

After speaking with users and gathering baseline data on the current app, many flaws in the functionality and misunderstanding of information were identified. The goal of the new concept was to simplify the amount of information and data being displayed to the user. Through breaking information into chunks by utilizing a card based approach, savings and progress could be displayed at various different levels. 

Concepts@2x (1)

Through our baseline testing of the app we noticed that users were struggling to fully understand the data visualizations. I sketched new ideas that displayed payment progress and portrayed the users journey towards becoming debt free. I wanted the information to be easy to understand and to encourage users to feel in control of their finances so I worked to communicate progress in more than one way to make it clear to users what the positive benefits of the app were.   

Through our baseline testing of the app we noticed that users were struggling to fully understand the data visualizations. I sketched new ideas that displayed payment progress and portrayed the users journey towards becoming debt free. I wanted the information to be easy to understand and to encourage users to feel in control of their finances so I worked to communicate progress in more than one way to make it clear to users what the positive benefits of the app were.   

Through our baseline testing of the app we noticed that users were struggling to fully understand the data visualizations. I sketched new ideas that displayed payment progress and portrayed the users journey towards becoming debt free. I wanted the information to be easy to understand and to encourage users to feel in control of their finances so I worked to communicate progress in more than one way to make it clear to users what the positive benefits of the app were.   

Through our baseline testing of the app we noticed that users were struggling to fully understand the data visualizations. I sketched new ideas that displayed payment progress and portrayed the users journey towards becoming debt free. I wanted the information to be easy to understand and to encourage users to feel in control of their finances so I worked to communicate progress in more than one way to make it clear to users what the positive benefits of the app were.   

Through our baseline testing of the app we noticed that users were struggling to fully understand the data visualizations. I sketched new ideas that displayed payment progress and portrayed the users journey towards becoming debt free. I wanted the information to be easy to understand and to encourage users to feel in control of their finances so I worked to communicate progress in more than one way to make it clear to users what the positive benefits of the app were.   

visual sketches 1

Dual visualization of progress towards next payment 

Dual visualization of progress towards next payment 

Dual visualization of progress towards next payment 

Dual visualization of progress towards next payment 

Dual visualization of progress towards next payment 

graph sketches

Projections of savings by using the app

Projections of savings by using the app

Projections of savings by using the app

Projections of savings by using the app

Projections of savings by using the app

Flow chart

changed_flow

Low fidelity screens 

The one-time payment option (boost) needed to be clarified to enable users to more easily add more money to their Changed account.  

 

boost wireframes

To improve transparency accross the app it was important to give users the ability to view savings across all accounts, show a breakdown of roundups and display the interest saved per transaction.  

savings wireframes

Evaluating Current App

 And improving the user experience

Evaluating Current App

And improving the user experience

Group 8@2x
Group 7@2x

Home Dashboard

1. Current users expressed confusion over the squirrel filling up so I incorporated two layers of visualization.

2. Moving the settings out of the bottom navigation makes room for the new goals center tab.

3. Changed name of tab to more accurately reflect content on the payments page.

4. The stakeholders described that one of the ways they make profit is through users transferring extra money to their account so I wanted to make the boost button hold greater hierarchy on the page.

5. Added a progress bar to clarify when roundups are transferred into your account.

Group 01@2x
Group 02@2x

Accounts

1. I condensed recent transactions into a horizontal swimlane and tagged the vendor and the amount deposited into your account.

2. Making the monthly round up total the first thing users notice is helpful as it is what is the most important information on this page.

3. I collapsed the view of all the transactions but still gave users the ability to see them all if they wanted.

 

Group 03@2x
Group 04@2x

Payments

1. The stakeholders had mentioned wanting to give users ability to personalize their experience so I surfaced some settings onto this page.

2. Condensing lists of similar info into a card menu gives more room for roundup settings and improves the clarity of the page.    

3. I focused on the savings impact of each payment and related it directlly to the graphs to give better context. 

 

05
Group 06@2x

Goals Center

1. Adding helpful messaging educates the user and provides a welcoming tone. 

2. I removed this floating action button because it is not consistant with the rest of the interaction patterns in the app.

3. In the future ChangEd would like to be able to add multiple loans to accounts but due to system constraints at the moment they could only manage one loan so I removed the horizontal swimlane.

4. I minimized the amount of information on the loan details card and gave users the option to learn more by clicking into the card.

 

Style Exploration

Student loans are a dreary subject and the stakeholders expressed that the design must exhibit uplifting, playful and encouraging feelings. I created visual artifacts that catered to the millennial personas and I began to explore how to display savings positively so that users could quickly understand the value of using the app. These style tiles would help define the visual guidelines for my screen designs moving forward.

 

Testing Desirability

I conducted desirability tests with current users of the ChangEd app and I was able to check their emotional response to the style tiles I had created. I gathered 15-second first impressions to measure visual appeal and asked users to select descriptive adjectives using a product reaction card test to measure alignment with our design principles and the brand attributes. Finally each user selected their favorite design from the set of three to determine which direction to move in.

 

WHAT worked@2x
Opportunities@2x

From the desirability testing it was clear that the users were drawn to style 1 and I was confident that this would lend itself to a cohesive visual design with flexibility. I made sure to get buy in from the stakeholders before I began studying the current app map and user flows.

Designing, Testing, Iterating

I spent two weeks focussing on designing four main areas of the app, and putting these designs in front of users to gain valuable feedback. Using qualitative and quantitative methods to test designs with current users I was able to establish a baseline with which to compare the new designs to. I tested different formats for data visuals by assessing users ability to understand graphs and charts to see which methods were most effective. I made sure to keep in mind our personas goals of making educated decisions about their finances, to design accurate and understandable data visuals. 

 

I also wanted to understand what information on the screen was most important to users so I utilized a ranking method to pinpoint specific areas. Finally to assess alignment with the ChangEd brand attributes as well as design principles I used likert scale ratings and open ended questions followed up with question probing to gather insights.

After testing I synthesized results into actionable feedback to be implemented on further iterations of the screens. Here is some of the main feedback I received:

 

The amount of information I learned from the first round of user testing regarding what data was most helpful to users guided my iterations for V2. Showing how much a user had saved on interest given their investment was greatly valued by users and so I worked with color and hierachy to prioritize that information.

Solutions

I integrated the feedback I received from users and stakeholders into the final designs.

 

A new boost 

Quick, and easy to select buttons make adding

more savings fun and easy. 

A new boost 

Quick, and easy to select buttons make adding more savings fun and easy. 

Dynamic and informative  

 The current users appreciated how more colors had been incorporated into the new design, making it look and feel more dynamic

I added small text under the next transfer progress bar which helped clarify to new and existing users what exactly it did

Displaying numbers in teal blue was interpretted as friendly and encouraging.   

home:v3

Compare your roundups 

I leveraged bar charts to give users the ability to compare months, years and all of their roundups. I wanted to fulfill one of Henry's goals, (our persona) which was to pay as little interest as possible, so I thought visualizing savings would be a positive experience. 

Remembering my second design principle

I utilized illustrated iconography to uplift users and give them more context for their transactions 

I wanted information to be discoverable from the top down, so I chunked information into levels and only displayed what was necessary

I gave the roundup amount and interest saved the highest priorty on the page by using color and size

Accounts V2 Copy@2x
Account Name V2.3 Copy@2x@2x
Payments V2.2.1A Copy@2x@2x

Adapting my first design principle

Displaying savings and projections with text was by far the most understandable to users. This went against my first design principle which was to use visuals instead of text. When testing my original payments screen, users were generally confused with the graphs so I chose to display the information with text. I learned that my design principles can be adapted and sometimes changed to best serve the goals of the users and the project. 

The payments screen made the biggest impression on users experience as it shows what you’re currently doing and what you will benefit from in the future.

Two areas didn't test well

Users were confused with the Multiplier and Auto Boosts settings because they could not understand what the function would do strictly by reading the text. I suggest the copy gets changed and retested. 

 

Iterations from stakeholder feedback

To not discourage the user I made sure not to put the balance of the loan at the top of the page and instead found a simple way to display the info

Users liked how they could imagine themselves quickly setting goals for themselves

Encouraging action through helpful educational tips was received positively

Goals Center V2 Copy@2x@2x

The Visual Design System

Throughout the design process I worked to create a visual design system that would lay out the key elements of the app and work to address the problems the company was facing, while remaining aware of constraints. The app was in its begining stages, so I created components that could be reused throughout the app that had an uplifting and simple to understand quality. 

 

UI Kit@2x

UI Kit

The engineering team was small with limited resources and therefore I was constrained by the complexity of the components and what additions I was suggesting, otherwise they wouldn't be able to be implemented. 

To help the engineers and future designers implement the visual aesthetic and ensure consistency I clearly defined the grid system, color palette, sizing, typography and UI elements.   

Style Guide@2x

Style Guide

Next Steps

 

General recommendations include further testing of the bar graphs for displaying data and determining how effective a card based layout is for the ChangEd app. Considering the current financial tech app market as well how I understood the ChangEd users behavior I opted for a card based layout that optimized for digestible information at the surface while giving users the ability to dive deeper and learn more about their loans and financial situation.

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI