Design

After the paper prototype user testing sessions, we decided to modify the general structure of the site. Although it was hard to identify from the three evaluations, we decided to limit the number of tabs on the menu bar mostly because of how small the screens are on the smartphone to have so many. We also changed up our main ‘recording expenditure’ page to not have a photo upload button. This is because we found that most of the users we interviewed wanted to just jot down the numbers quickly.

We also found that making the list, map, and chart interacting with each confuses the user significantly, and thus we made them separate from each other.

We were originally planning to make each of the bar on the chart be interactive, and make them lead to displaying the expenses for that day as a list. However, we could not find an api that would allow us to do that, and in addition, as stated before, making the charts and list interactive could end up confusing the user, so we removed that functionality altogether.

Implementation

We used Flask which made it very easy to use templates. We also used jQuery Mobile to make the visuals of the page look nice and simple. We utilized Google maps API to display expenses on the map, and attempted to use Google Charts API. However, the Google charts API produced its chart using SVG which does not display properly on the Android OS, so we resorted to using another API even though it was not interactive.

Evaluation

We conducted our user tests at two different places: one at a fraternity, and one at the student center on campus.
We wanted to look for smartphone users with a variety of background. They were quickly briefed with the fact that this website is to keep track of their expenditures. They were not shown any demos. The task is as follows:

Test Process 1

1. Create your account
2. You just ate at a restaurant and paid 18 dollars as cash. You spotted Akira/Haoyi/Nahom 8 dollars. Record your spending.
3. View my spending record as a map.
4. View my spending for the month.
5. Logout.

Here are the results from the testing.

1. “C. B.” - Course VI - Male - Droid user - Sophomore
   1. Took a little bit to find out how to log-in
   2. mostly didn’t read the login screen until few seconds later
      1. found out eventually on his own
   3. Record process good
   4. found map
   5. found chart.
   6. logged out successfully
   7. Comments: Nice interface
2. “B. K.” - Course IX - Male - Droid user - Senior
   1. Create account - login successful
   2. Recording 18 dollars okay
      1. Recording debt fail
         1. used transfer.... got confused, but went with it anyway.
   3. Viewing chart and map successful
   4. logged out
   5. Comments: The debts and transfers was a bit confusing.

Test process 2

1. Create your account
2. You just got coffee from a Starbucks.. Nahom, who was with you, lent you 10 dollars. Record your spending.
3. Transfer $20 form card to cash.
4. View my spending record as a map.
5. View my spending for the month.
6. Logout.

1. “Y. D.” - Course III - Female - Senior
   1. login went well
   2. Record process went well
   3. took a while to figure out the purpose of transfer
      1. Got confused when creating debts and then having to resubmit under records
   4. Viewed chart and map succesfully
   5. Logged out
   6. General Comments:
      1. Very easy to use interface
      2. Really useful on a day-to-day basis
      3. Some features (map tracking) really enable the user to see where the user spent their money.
   7. Suggestions:
      1. Add debits should be it's own tab, the process of recording a spending vs. recording a debt can sometime be confusing to the user.
      2. The transfer option is kind of confusing because you can’t really transfer cash to cash, some type of of lock their would make it a bit simpler for the user.
2. “R. A.” - Course VI - Male - Grad
   1. Login went well
   2. Recording process started slow but went well
   3. Transferred $20 to cash from card
   4. Map and chart view successfully
   5. logged out
   6. General Comments:
      1. Attractive interface allows users to easily learn the features
      2. The multiple visualizations in Analyze allow the user to see their spending in multiple ways which is something that I really like about this app.
      3. I like the fact that the app takes into account and keeps track when you switch from debit/credit t cash.
   7. Suggestions:
      1. Add debits should be it's own tab, it’s really confusing when I have to submit twice in order to keep track of various debts.
      2. I don’t like the fact that the records screen is the first screen that you end up seeing. It gets really confusing as first page you get to seen on this site because it gives no background or info on what your actually supposed to do.

Ways to fix Issues with usability: Mainly reorganizing the “Add Debts” page would clarify some confusion

Reflection

Akira
I had a lot of fun making this website. I had never used jQuery Mobile, which handles things very nicely for the most part. It was also interesting to see the different problems we found when opening our site on the computer and a smartphone: some codes that worked on the computer crashed on the smartphone, or the size of the smartphone screen was much smaller than we had imagined. When having our prototype tested, I thought it was really interesting to see how much people who use the application for the first time get confused with what the makers thought was easy to understand. Ideally, I would want to continue working on this site and make the changes that reflect on the comments we received from our testers.

Nahom
I really enjoyed working on this website, I especially enjoyed working on the front end aspect of the site. The biggest difference was probably working on a mobile site rather than an actual one mainly because you have to consider and prioritize different things such as screen size which play critical roles when you transition from desktops to mobile devices. Overall, I think one of the things I would of tried to understand/work on more would be figuring out what features we can add and implement into the site using Flask. This was my first experience with the Flask framework, so I think given more time it would be one of the things that I would of tried to understand more and add to our application.