Mobile App Interaction Design
Lunch Money Buddy is a fictitious mobile app that allows parents and guardians of school age children to manage various aspects of their kids’ in-school cafeteria lunch accounts. For this project, we were to create interaction designs for the app, after being provided with app specifications and user personas.
My completed Lunch Money Buddy prototype is available on Axshare (the Axure cloud sharing service), and the steps I took to get there are described below.
Problem
The app must meet the needs of two different personas:
- Samantha & Jorge, a married couple who are online savvy but often too busy to check their email. “They fear a situation where they are unable to pack a lunch and their children do not have funds or are stuck with a meal they hate.” They want quick access to refilling their lunch accounts, and alerts to warn of low balances.
- Henry, a retiree who is the legal guardian of his grandson; he’s not tech savvy and is slow to adopt new technologies. “He finds that the use of unclear icons and small text make the applications hard for him to learn, and at times completely lost when touch gestures are the main vehicle for navigation, many of which are not intuitive to him.”
The app must provide the following functions:
- Download and sign up with a school-supplied access code.
- Fund the account (set up payment methods).
- View subsidy status. (Various government programs provide school lunch subsidies.)
- View account balance.
- View school lunch menu by child.
- Mark a school lunch as a child’s favorite, so that the app alerts the parent or guardian the night before that lunch is being served.
- Close the account.
Actions
My first action was to create user journeys for both of the personas, to explore the ways in which the personas would accomplish their tasks.
I then created a site map to guide my decisions for the app’s architecture and navigation scheme.
Next, I sketched the app’s wireframe. This sketch was discussed with fellow students in the class, and based on their feedback, I created several iterations of the low-fidelity wireframe.
Finally, I created an interactive prototype using the Axure software. Again, these prototypes were discussed with fellow students, and I modified the prototype based on feedback.
Results
User Journeys
Henry’s User Journeys
Download, Sign-In, and Funding
Because Henry is the less tech-savvy of the two user personas, I chose to illustrate the beginning of the Lunch Money Buddy journey using him. Of necessity, there will be a substantial non-electronic component to the introduction to, search for, and instructions for installation of the app.
The existence of a nontechnical persona means the app needs a drastically simplified funding setup process. I reduced the funding choices to the two most obvious: credit cards and checking accounts.
Close Account
The Henry persona seems likely to be concerned with getting his money back after closing an account, so I chose to illustrate that journey. Once again, there will be the necessity for some non-electronic components to this journey (specifically, a check to be mailed out).
Samantha & Jorge’s User Journeys
View School Lunch Menu
I choose to use the Samantha & Jorge persona to illustrate the lunch menu journey because they have two children, which makes for a slightly more complex (and thus more interesting) use case. This user journey could easily bleed into the next one, but I chose to illustrate them separately because it seems like Samantha & Jorge are sufficiently busy that they probably wouldn’t complete a longer journey in one sitting.
Favorite a Lunch
Samantha & Jorge are the obvious persona choice for this user journey because they are the ones who normally pack lunches for their children. Thus, a reminder when they do not need to pack a lunch is a more compelling use case for them than for the Henry persona.
There are numerous possible reminders that could be used, and ideally the app will accommodate all of them. For simplicity of illustration, I only showed what I believe to be the four more likely and effective reminders (email, text, banner, and phone call).
Site Map
Background
Both of the user personas for the Lunch Money Buddy app require a simple navigation system: the Henry persona so that he is neither intimidated nor confused by the app’s layout, and the Samantha & Jorge persona because they are often distracted. For this reason, my initial sketches attempted a flat site map with numerous sub-sections.
However, some guerrilla card sorting (with friends and family) suggested grouping the finance-related tasks into a single navigation area. Once I made this conceptual breakthrough, I decided to revisit the hub-and-spoke model.
My original hub sketch had only three options: Your Info, Payments, and Lunch Menus. However, based on this week’s readings, I decided to add a Settings menu (thereby freeing up Your Info to be focused on the user, and Settings to be focused on the app itself) and a Search function.
Looking back at the user tasks from the application specifications, I then decided to add a Help screen, a/k/a “How do I…?” – with a list of each of the user tasks possible in the app. This way, even if someone cannot figure out the navigation, he or she can still see a list of options.
Hub-and-Spoke Meets Dashboard
While we have not yet moved to user interface design, my vision for the app is that the Home screen, which is the hub of the hub-and-spoke model, is also a dashboard in that navigation model. Both user personas have top-level tasks that can be answered at a glance: “quick access to lunch calendar and menu” (Samantha & Jorge), “alerts to warn of low balance” (Samantha & Jorge), and “ability to check funds” (Henry).
Thanks to the extremely high resolutions we now have available, even on a mobile phone screen a small calendar with highlighted dates for favorite meals should be possible as part of the Lunch Menus top-level navigation icon. In addition, the Payments icon should also be able to contain a small but readable numerical display of the current funding level, plus any low balance alerts.
Wireframe
My hand-drawn wireframes are consolidated in a PDF: Hand-drawn draft wireframes.
Interactive Prototype
This is my interactive prototype in Axshare (the Axure cloud sharing service).
Lessons Learned
This project taught me the value of user journeys to illuminate the ways in which personas are likely to interact with a product or service. Putting myself into the mindset of the different personas, and consider their contexts of user, led to realizations around what part of the app would be hard or easy for them to use.
Site mapping was also a valuable step along the way. While part of me was champing at the bit to start sketching wireframes, if I had done so prior to sorting out the app’s navigation, I would have proceeded down several dead-ends.
Peer feedback was invaluable for the refinement of both my wireframes and the interactive prototype. Until you have to explain something to others, you don’t fully understand it yourself. Being forced to justify my decisions made for a better design.
Finally, I learned to use Axure, one of the top prototyping applications.