App Design
LUNCH MONEY BUDDY
Parents and guardians of school age children were in need of an app that would allow for the easy management and viewing of school lunch money balances and upcoming menu options. Rather than waiting for the school to send a paper home that their lunch account was low or empty, or the inevitable wrath of a child returning home after not being able to purchase their favorite lunch, there was a desire for a way to quickly and easily manage children’s lunch accounts from anywhere.
The Design Process
The design process consisted of four main steps:
-
Analyzing the user research provided at the beginning of the project to create four user journeys
-
Diagram the app content and navigational structure through the creation of a site map based on the needs of the user
-
Create mid fidelity wireframes representing the desired content, needs of the users, and identified navigational structure
-
Design a fully functioning interactive prototype that is ready for user testing
User Journeys
Utilizing the previously identified personas and app functionality for the Lunch Money Buddy app, four user journeys were created in an effort to provide information to inform the content organization, navigation, and interaction of the app throughout the creation process. This process began with the creation of story boards based on the needs of the users. These storyboards were then utilized to guide the development of associated user journeys.
Sitemap
Once the personas were analyzed, user goals were established, and user journeys were created, this information was used to inform the creation of the site map and navigational structure.
Wireframes
An initial round of annotated wireframes was created utilizing the identified sitemap structure. The fidelity of these wireframes increased through multiple iterations. The initial focus was to show the screen structure and navigation of a few key user tasks such as account set up, child profile viewing, adding funds, and menu view. These wireframes were then submitted for group feedback. Utilizing the suggestions of the group, the wireframes were modified, refined, and additional functionality was added.
Sample Wireframes
Interactive Prototype
The prototyping software Proto.io was utilized to bring the static wireframes to life. Color, graphics, interactions, and additional screens were added to create a full functioning app experience for the user. Throughout the prototype creation, group feedback was sought and utilized to make improvements to the design to allow for a more fluent and efficient experience for users.
Sample Prototype Screens
Lessons Learned
A number of lessons were learned over the seven week period it took to complete this project.
-
Working in an organized manner is of the utmost importance to keep the project on track. There were a lot of screens, interactions, and small details involved with this project. In order to meet the specified deadline, work needed to continue at a steady pace with clearly defined deadlines.
-
Peer feedback can prove invaluable. It’s easy to get in the zone and design things in a way that make sense to you, but may not be as clear or easy to use for others. Having feedback throughout the design process to guide the design allows for small changes to be made throughout the process saving both time and money down the line.
-
Sometimes it’s better to keep things simple. It’s easy to look at the needs of the user and the desired functionality and add more and more to a design in an effort to meet everyone’s needs, but sometimes more isn’t better. Sometimes simple functionality and layout are what would be more effective and easier for the user.
-
Your design, although good, may not be the best solution. When you have a design in mind that both meets a need and is visually appealing, it’s easy to get hung up on its use when it is recommended to change it. Ultimately it doesn’t matter how much I like a design, if it won’t fit the needs of a potential user, no matter how small that user group may be, it needs to be changed.