Stack App

Objective

The Stack App is a mobile application conceptualized to handle personal finances. Although a concept project, a full analysis of UX research went into the visualization of this app. The project includes wireframes, user personas, design elements, and a prototype.

 

Challenge

Organizing content for an app like this is tricky. It requires full attention and focuses to get the steps of interaction right and also to function in a meaningful manner. Changing your thinking patterns from a designer to a user’s point of view and combining both of them is also challenging. Overall the process of creating this project was fun and educational.

Goal

The main goal of this project was to make the tracking of finances for our target audience as easy and pleasant as possible.

Year of completion: 2017

Strategy


Functionality Requirements:

  • Keep track of spending habits
  • Give personal advice on financial improvements through articles
  • Links directly to financial institution(s)
  • Charts showcasing spending categories for each month/week
  • Saving goals

Users


Target Users

Age: Millennials 19 – 30
Occupation: College students or recent graduates
Income: $15 000 – 80 000 / Year
Gender: Male/Female
Ethnicity: All ethnicities
Geographic Region: North America
Religion: Diverse
Lifestyle:

Students or recent graduates who are very busy, they don’t have time to budget or they don’t know how but they are considering saving money for now and for the future.
Education: College or higher

User Needs

  • Users need an easy way to control their finances
  • Personalized spending categories as each individual’s needs vary.
  • Notifications for upcoming monthly payments
  • Advice on keeping bad spending habits to a minimal

Persona


User Persona

Full Name: Kenneth Mckanster
Age: 25
Occupation: Electrical Engineer
Income: $75,000 / Year
Location: Toronto
Internet use: 8 – 12 hrs/day
Marital Status:
Single

Persona generated image

Skills

  • Tech savvy
  • Fast learner
  • Can adapt to new technologies
  • Determination

Characteristics

  • Active on social media
  • Up-to-date with new technologies
  • Uses online banking for paying bills
  • Considers investing as an option for financial freedom
  • Uses credit cards for basic daily necessities such as food & utilities

Pain Points

  • Expenses exceed revenue most times
  • Spends based on emotion
  • Bad habitual spending
  • Has unrealistic expectations for the future
  • Heavily influenced by the actions of others
  • Thousands of dollars in student loans

Goals & Motivation

  • To pay off student loan
  • Save for a car/house
  • To own his own business
  • To be able to pay off his bills each month on time
  • Looking for work that enriches not only himself but the world around him

Functionality

The app consists of six main sections which can be accessed by tapping on the menu icon on the top navigation.

— Grid layout
It follows a consistent grid that was carefully laid out to attract and assist the user is moving through content with ease in a meaningful manner.

— Eye flow
The consistent color scheme and visual hierarchy help the user identify important information. The user would most likely use the F Pattern to scan information (from left to right) or the Z Pattern (diagonally).

— Content
The content is organized with charts and filters which hold information such as transactions, goals etc. This makes it easy to view and customize as well.

User Understanding

The design and layout are straightforward, the user can understand the content and also the navigation system without assistance as they are very basic, and some of the features in the application such as icons, for example, are used in many other apps and have the same universal meaning.

Platform Elements

The style guide used to set up the application was created with iOS users in mind. This is evident especially when looking at color and typography. These features make the app fit well with this platform.

Navigation Types


— Global Navigation
The global navigation is accessed through the icon on the header which is consistent throughout the whole application

— Local Navigation
Access to nearby content in the architecture is available to the user and put together in an intuitive manner, in order for them to move smoothly through pages. In the budget page for example the user can move on to goals or set up their budget categories easily and quickly with the submenu just below the header

— Contextual Navigation
On the Advice page [id 6] the user can access articles from a wide range of third party websites to get educate themselves on the subjects of investing and efficient saving methods

Interface Design Elements


User Experience


User Experience Concepts

— Useful
The app is useful to those who are looking to organize their finances easily. Users can keep track of spending, set financial goals for the future, and find useful information through 3rd party websites that will assist them in gaining more knowledge on investing and saving.

— Usable
The layout is easy to follow, featuring a fixed navigation bar at the top which is consistent throughout the app making it easier to navigate through all pages and accessing sections at any time. Visual hierarchy along with negative space give the interface a relaxing viewing experience.

— Desirable
The app is desirable to young individuals who want to take control of their finances the quick and easy way, without spending too much time on budgets and avoiding the counseling of a professional. The user can customize specific spending categories to satisfy their personal needs. This saves them time and money.

— Findable
Available for both iOS and Android. Navigating through content is intuitive and submenus are set based on the current page. Any lost information can be retrieved through email safely.

— Accessible
The app is designed with accessibility for all users in mind. Information is organized in such a way that users can use it and understand it correctly. The key features of the app are the charts that hold the most important information.

— Credible
The users can trust the app and not worry about personal privacy issues. All information about the app is outlined in the terms of use and privacy policy. The efficiency and functionality are what the users will heavily rely on.

Information Architecture


Approach

At the beginning of laying out the architecture for the app, the most important pages were added first, starting from the login and registration process. The basic features and important pages/categories were kept in mind. Moving forward the home page was the main page where all the other pages could be accessed. After examining each page individually and viewing where there needed to be improvements other pages were added or removed from the

Logic

The logic behind the app was that young individuals have limited time in the busy lives they live. They want to save more money, they consider investing for leading the road to financial freedom and they have financial goals which are difficult for them to follow and stay on top of. With these specifications in mind, the app was set up to satisfy all these needs in a well-organized way. It assists the user in creating budgets in less than a minute and sets goals that can be followed accurately. Furthermore, the users would have the ability to do their research on better spending and investing options on the go.

Content Inventory
Information Architecture
Wireframe

Interface Design