UX/UI Design

Since I know what the problem is, I want to solve and also for whom, the time has come to find out how to solve the problem. Creating User Journey for my personas I comprehend at a high level of detail what journey different users take in their real lives to complete a specific task. This leads to possible solutions.

Scenario

In the past, Martina used to take the receipts with her after each purchase to record them at home in an Excel spreadsheet, because this was the only way she had an exact overview. But at some point, it was too time-consuming for her. She is looking for a way to record these expenses more easily.

Goals & Expectations

• Preferably automatic or at least simplified recording of expenditures
• Automatic assignment of each output to a relevant category
  
• Current overview of income & expenditure status
  

1. Journey Phase

Grocery shopping

1. Possible Solutions

• Payment by phone=> Easy saving of a digital bill
  
• Scanning items in the store, this data will be transmitted to the store's cash register system
  

2. Journey Phase

Feeding the output into the Excel File

2. Possible Solutions

• Payment by phone=> Digital invoice can be automatically captured & automatic assignment to the categories
• Scanning paper invoices & automatic assignment to the categories
  

3. Journey Phase

View of the current money flow status

3. Possible Solutions

• Payment by phone=> Easy saving of a digital bill
• Scanning items in the store, this data will be transmitted to the store's cash register system
  

Task Analysis helps me to get more specific to think through key pathways, the User Flow, of my persona as she navigates through the app while trying to reach their goal. In this way I've gained detailed picture about pages to offer and activities to be conducted.

Task Analysis

Martina doesn’t want to spend a lot of time for recording of her expenses. But she would like to have an overview of her expenses. Therefor she needs a way to capture her outputs automatically.

Entry Point: Dashboard

Auccess Criteria: Saved Bill

Goal

• Paying for purchases at the supermarket checkout
  
• Receiving the invoice
  
• Open the App
  
• Choose “Necessities”on Dashboard
  

Based on the insights of the personas user flows I‘ve created an initial sitemap. Using Card Sorting Method I let the users decide how organizing the content make the most sense to them. This resulted in a leaner and better organized revised sitemap.

Before

After

Now I have enough information and ideas to put it into a physical format for the first time. I've started with drawing paper sketches of the functionalities to get a general idea of which information will be presented and how these information is going to be structured. To get more deeper regarding the level of detail I've next created digital mid-fidelity wireframes. This is necessary so that all stakeholders can better visualize the product in terms of basic placement of UI elements. ​

Following flow is showing the mobile scanning function:

Now the time has come to test the whole thing on real users. I've conducted moderated remote tests with 6 users asking them to accomplish several tasks and to answer a few questions regarding the usefulness, simplicity and overall satisfaction with the App. Every session took approx. 20 Minutes and was completed using Zoom and Adobe XD Prototype. 

Goals

• To see if user understand the purpose of the App
• To understand if tested features help to accomplish the set goals
  
• To understand how useful the features are
  
• To observe how easy user can accomplish the activity
  
• To get information about general satisfaction about the App & the features
  

The information gathered will be used to enhance the App in terms of its design, features, usefulness, and ease of use. Through usability testing, five significant issues were identified, and these will be addressed in the next iteration of the prototype. Two of these issues will be discussed in detail.

Issue 1 - Reminder filling aid

• Context: The user has to fill out information while setting up a reminder for an alert in case the user exceeds set expenses limit. In the first version of my prototype the user has to select between " Per Category" and "In Total" before filling out further information.
• Evidence: 5/6 testers didn’t understand to select “In Total” before filling in the reminder.
• Possible Solutions: Include the step of choosing a spending category into the filling list on the first position.

Before

After

Issue 2 - Scrolling down to submit

• Context: Once the user scanned a bill the App processes the bill and spits it out as a digitalized version. In the first version of my prototype the user has to scroll down to the and of the bill to be able to click on submit/ save the bill.
• Evidence: 2/6 testers didn’t understand what to do seeing the list. The most people confirmed(I’ve asked after testing) not to want to check every position of the bill and certainly not when I advertise that the scan function learns over time and automatically assigns items to the correct categories. That make sense!
• Possible Solutions: Place “Submit”-Button on top of the list.

Before

After