Defining the Problem

An everyday problem needed to be identified in order to complete the project. After brainstorming a list of everyday problems that I had in my life, the most recent one at the time was finding a way to manage all the accumulated receipts I had collected over time. I knew from my friends and family that I was not the only one with this problem. Often times, I did not know when I needed a receipt in a future setting again or how to truly manage receipts of all forms from different places.

I then moved on to defining the problem statement:

How might we help people organize and keep track of all their receipts?

The 5 whys technique allows me to delve deep into the problem and allow me to identify the root cause which then I can act upon. I asked myself 5 times the question of “Why I have a hard time organizing/managing receipts?”. Here are my 5 Whys answered:

1. Because I just stuff all the receipts in my bag.

2. Because I can’t keep track of all the things I’ve bought.

3. Because I misplace receipts I’m later needing (returns/exchanges).

4. Because some receipts are important to keep.

5. Because receipts take up space/are useless after a short while.

User Interviews

User interviews were conducted as a way to emphasize and better understand the potential users of my mobile application. I conducted 3 user interviews to get an understanding of what were the behaviors and needs that needed to be addressed through my mobile app. I highlighted the quotes that stood out the most to me.

See interview script here:

Interview Script

Here are my findings:

User Persona

I created a user persona of someone who might use my mobile application. This persona demonstrates the key users goals and frustrations that appeared in my findings through user interviews. This will help me focus on tackling the most important problems in order to address the major needs of the most important user goals. It is both fictional and realistic.

Here is my user persona:

User Journey

A user journey map helps me visualize an individual’s relationship with a product or problem over time while taking in account the feelings that are evoked. It allows me to understand the product from a user’s point of view which in turn fosters a more user centric approach to designing the end product.

Here is my user journey:

Ideation

During the ideation phase, it is important to generate as many ideas as possible. It is better to focus on quantity rather than quality of ideas so that I can have many angles of thinking towards shaping the solution for my design. Some of the ideas generated have the potential to go on and be part of the solution of my design in the end. Due to the time constraint and scale of this project, only one ideation technique was sufficient.

The ideation method used was Crazy 8s. Crazy 8s is a fast sketching ideation method that challenges people to sketch eight possible ideas in eight minutes. The goal is to build beyond your first idea in order to come up with a variety of solutions to your problem.

Here is my crazy 8s ideation method:

Wireframes

I created the low fidelity wireframes which helped me focus on the visual consistency and hierarchy before applying styles. Creating low fidelity wireframes helped me visualize my ideas as well as give me the basic structure for how users would use the app.

Here is a screenshot of the wireframe for the mobile app:

After I finished designing low fidelity wireframe screens, I conducted usability testings with 3 participants which as a result will be useful for detecting issues in information architecture and flows before implementing further design details and styles.

Here is the wireframe testing tasks given to the participants:

Context: You downloaded this app on your phone to help you manage your receipts all into one place all while keeping track of your expenses. You’ve already successfully uploaded a picture of a few recent receipts. 

Task # 1: Click on receipt # 1 and categorize it into the corresponding category.

Task # 2: Find how you can further look at insights of this particular receipt.

Task # 3: Go back to home and search for the overview of monthly receipts for the month of March. 

Wireframe Usability Testing Evaluations:

Participant # 1: 

She really liked that the most recent receipts were the first things that you see. She stated that this feature would help her save time from scrolling to find the most recent activity. When asked to put receipt # 1 into a category, she said she would put this into a category that was not listed. She stated that categories should be more specific and not so general such as food. She really liked the idea of having everything compiled into months because as she states this would come in handy in times of need such as filling out taxes. She would love to have an option where she can input some sort of monthly budget to keep track of whether she is going over or not.  

Participant # 2: 

She got stuck on the reasoning behind why the receipts were labeled by number in the recent scans. She stated that she would like it to be by store name or by date. She stated that she often likes to track her expenses based on how much she spent a particular store so she would like to see the home screen have scrollable categories such as scans by stores, scans by date, etc. When she came across the screen of all receipts for the month of March, she would like to see an option where she can view the receipts in a different view instead of scrolling endlessly to find the receipt you’re looking for. 

Participant # 3: 

She stated that it would be helpful to have some sort of profile button. She got stuck in the part where she can add a category, she stated that it was simply too much work to only be able to access the categories screen after having clicked on a receipt. It would be helpful to have the categories more easily accessible. She stated that she would like to see an option where she can input a monthly budget so that she can keep track of all her expenses. She stated that the numbers for receipts were not indicative of anything and would rather see the store name or even date. She stated that sometimes she makes purchases at stores that have items that would go in separate categories. She suggested that in the insights page, there could be an option where you can break the receipt into further categories.

Visual Design

Once I gathered all the necessary information needed from the wireframe usability testings and all the previous steps, it was time to implement a visual design to the app all while taking into account the feedback and changes that needed to be done as a result of the previous testings. I wanted my visual design to have a relationship to finance and what users were already familiar with.

Here is my color palette inspiration:

Here is my mobile app with the visual design implemented:

Initial Prototype

Now that I had a clear idea of my visual design and how it has been implemented, I gathered all insights from the user interviews and previous findings to come up with the initial prototype of my mobile application.

Here is my initial prototype:

After I finished designing the initial prototype, I conducted usability testings with 3 participants which as a result will be useful for detecting issues in flows before designing the final prototype.

Here is the initial prototype testing tasks given to the participants:

Context: You downloaded this app on your phone to help you manage your receipts all into one place all while keeping track of your expenses. You’ve already successfully uploaded a picture of a few recent receipts. 

Task # 1: Click on the Stop & Shop receipt and categorize it into the corresponding category.

Task # 2: Find how you can further look at insights of this particular receipt.

Task # 3: Go back to home and search for the overview of monthly receipts for the month of March. 

Task # 4: Go to the categories tab and click on the Groceries category.

Task # 5: Click on the budget tab and go through the daily, weekly, monthly, and yearly tabs then find where to input a customizable budget for any timeframe.

Initial Prototype Usability Testing Evaluations:

Participant # 1: 

She really liked the visual representation of how much was spent as an overview. She also really liked that the recent scans was one of the first things that were available to the user. The one thing that she came across that could be of conflict later on when for instance a user has shopped in a lot of stores is that the scans by stores were not in alphabetical order. When asked to click on the budget tab on the bottom navigation, she didn’t immediately know which one to click on and kind of inferred that it was the icon with the money sign. 

Participant # 2: 

She really liked how specific the home page was in regards to how scans of receipts were ordered in different categories. She did see that in case she ever wanted to go back for tax purposes, she would like to see her scans sorted by year. When asked to go to the budget tab, similar to the previous user, she did not immediately know what tab was for what. In this case, due to the fact that she was not the only user who had issues figuring out the bottom tab, it is necessary to add labels to the icons. 

Participant # 3: 

One of the things in the wireframe testing that she really emphasized was the input of the budget because for her, if she was to have this app, it was one the most important features. She also found the bottom navigation very useful since when she uses apps, she doesn't immediately click that back button often but rather does her navigation through the bottom navigation buttons. One thing she did say she would like to see implemented is some sort of button for linking her email to the app. She explained that there are more and more stores that have options where you can get emailed receipts and it would be beneficial to have all those receipts automatically added to the app.

Final Prototype

Now that I have addressed all of the issues that resulted from the usability testing, I moved on to designing the final prototype of my app.

Here is the final prototype: