EZ Scripts

It’s hard to keep track of all the products and services that we subscribe to each month. All we see is money deducted from our accounts for services that we might not even need or want anymore. A company has a product that keeps track of all of your subscription fees on websites, apps, services, etc. over the years.
 
For this second capstone project, the assignment was to create a mobile-friendly platform for a financial subscription tracking application. The company had only previously launched a desktop-only website and now needs to create a mobile version of its product that can be used by a broader audience.

My role: UX Designer
 
Research Synthesis | Scope, Persona, Journey, User Cases, Guerrilla Usability Testing
 
Rapid Prototyping | User flows, wireframes, hi-fi prototypes

Capstone Project #2 - University of South Florida Bootcamp 
 
2 Months - Start to Completion

THE PROBLEM:

THE SOLUTION:

THE MOTIVATION:

This company has only launched a desktop-only website that is not mobile-friendly and now needs to create a mobile version of its product that can be used by a broader audience.

Create a mobile platform for financial tracking resources and create high-fidelity designs to create a great user experience and visually appealing application. 

With more than half of potential users on mobile devices, Having a mobile-friendly application will ultimately result in more users and more business for the company.

My secondary research consisted of the top three applications in the financial tracking application category. I analyzed and compared Rocket Money, Trim, and TrackMySubs. My plan is to incorporate common elements from each application in my designs for the mobile platform. 

01.

WHERE WE STARTED

  1. What features are typically included in similar programs?
  2. What makes for top-rated reviews for applications in this category? 
  3. What elements are common that should be utilized in my designs?
  4. What designs could be utilized to make this concept unique and different? 

02.

SECONDARY RESEARCH

FIRST COMPARISON | TRACK MY SUBS

LIKES:
1. Subscription list provides name
suggestions when you start to type
 
2. All subscription titles show the 
specific branding/logo for each company
 
3. Playful color palette and clever 
mascot of a submarine for the company title
 
4. Easy to follow steps and linked to google
account for added sense of security.
ACTION STEPS:
1. I want to utilize the concept of including
logo/branding images for each company’s
subscription icons.
 
2. I like the choice of green and blues as 
they are trustworthy and calming color choices
for the UI elements.
 
3. Additionally, I will use the Google account
link feature to provide the same sense of security screening. 
DISLIKES:
1. Font choice and overall visual appearance
is a bit underwhelming and doesn’t excite me. 
 
2. The signup page is mostly empty and does not
feel professionally designed.
 
3. The buttons on the home screen use an orange
color while the buttons on further screens use 
a green color, this creates a lack of consistency. 
 
4. The visual UI of this site is lacking something
that makes it feel less secure and reliable to me.

SECOND COMPARISON | ROCKET MONEY

LIKES:
1. All UI elements and color palettes are
used throughout and visually appealing.
 
2. The brand logos all show the correct colors
for each brand but have a consistent round
appearance for a nice clean look. 
 
3. Blue color is tied together for all of the 
elements including on the mobile application.
 
4. Sign up is easy and linked to a trusted
brand of Rocket Money/Mortgage.
DISLIKES:
1. The signup screen changes to red colors
which does not tie in with the blue color on other screens.
 
2. Does not let you explore the features
without signing up first for the application
 
3. Not a fan of dark moody color choices in
regard to secure financial applications. The 
red signals errors/negative emotions to me.
ACTION STEPS:
1. I want to utilize the concept of including
logo/branding images for each company’s
subscription icons.
 
2. I like the choice of green and blues as 
they are trustworthy and calming color choices
for the UI elements.
 
3. Additionally, I will use the Google account
link feature to provide the same sense of security screening. 

THIRD COMPARISON | TRIM

LIKES:
1. All UI elements and color palettes are
used throughout and visually appealing.
 
2. Blues and green colors are used for 
a calming and aesthetically pleasing palette
 
3. Homepage explains all of the features 
and benefits of Trim’s subscription tracker. 
 
4. Sign up is easy and linked to Google
for a sense of security. Also shows what
companies back the overall product.
DISLIKES:
1. The landing page is a bit crowded feeling
with lots of CTA’s and information.
 
2. The main photo feels disjointed from the rest
of the information on the page. It also does not
have rounded corners and feels stiff.
 
3. The Trim logo icon in the top left corner
is blurry and low image quality which feels
unprofessional. 
 
4. The reviews section is boring and bland
UI design which feels uninteresting to read.
ACTION STEPS:
1. I want to utilize the concept of including
logo/branding images for each company’s
subscription icons.
 
2. I like the choice of green and blues as 
they are trustworthy and calming color choices
for the UI elements.
 
3. Additionally, I will use the Google account
link feature to provide the same sense of security screening. 

During my time creating sketches and wireflows, I was still formulating what I wanted the overall look to be for this project. I kept the design more minimal until I created high-fidelity mockups to not stall my creative process. 
 
The primary focus of this design was to create a mobile-friendly version of a financial tracking application. While it already had a website platform, I wanted an easy-to-use mobile app. 

03.

INITIAL SKETCHES
& USERFLOWS

Wireflows of the two main red routes defined the direction of how I would design my hi-fidelity mockups and overall application

04.

STYLE GUIDE

For my color palette, I selected blue and green tones to create a soothing appearance and make for a visually appealing customer UI experience.

Also, I took inspiration from similar apps to see how the design process worked on mobile, to then know how I wanted to design my second capstone project.

While a similar concept to other financial subscription tracking applications, I wanted to incorporate a soothing color scheme and ensure a well-designed functionality to create a good user experience on mobile.
 
For my high-fidelity mockups, the colors and visuals inspired the look and overall appearance I was trying to achieve. Throughout my design flow, I created several versions of the main screens to see what worked best after two rounds of testing. From there I was able to make several tweaks in the style of the usability elements to account for better functionality. 

Please explore the clickable prototype linked below to further to see how the designs work together.

05.

HIGH FIDELITY MOCKUPS

Please explore the clickable prototype linked below to further to see how the whole process came together 

CLICK TO VIEW FIGMA CLICKABLE PROTOTYPE