At this point, the app might be closer to the final line, but before then, we will have to do further testing and iteration based on new feedback. As we add visual components to the app, interrelations might become more complex. As a consequence, the situation might - or might not - translate into new issues to solve and hidden challenges that could reveal only at more advanced faces of the process.
Next Steps
A great idea does not define a successful application. Excellent usability does together with a deep understanding of the user, including his or her habits and mental models. It is going beyond a working product to reach intuitive and satisfy experiences for the user.
A successful application relies on constant iteration and validation. It relies on designers' ability to go back to the product over and over again, always with fresh eyes. With this concept in mind, the first versions should be minimal and very sketched. This kind of presentation is very inviting to feedback. It is less susceptible to changes and essential to keep the design process rolling.
Course-redirection. Designers should be ready and comfortable with course-redirection. Furthermore, designers should help clients and peers to be familiar with a design process that is organic and welcomes error. This practice might be as challenging as the design activity itself but highly necessary.
Final Thoughts
Image
First Version Basic Hi-Fi  Prototype
Image
Image
Image
Image
Hi-Fi  Sketch Prototype’s Artboards
Image
Visual Design
LMB App’s Style Guide Version I

The application is nowhere near ready. However, at this point the test result shows no sustancial issues. Then, I cautiosly moved to the visual design face of the project allowing simultaneous testing by creating a limited version of what the final product would be.


What is Next?
Image Image Image Image
Image
Attitudinal Observations
Unrigorous Interview
Task Success
Behavioral Observations
A Few Observations
Usability Test Plan Dashboard
Image
Exploring Content Structure
Once defined, an alternative design for the content organization, it was time to create a complete content wireframe for the app. To demonstrate content placement and user flow, I designed a Comprehensive Wireframe and documented it. It is important to note that this would not be the final diagram of the user interface, but a means to exercise and explore content organization, hierarchy, and user flow.  
Image
Comprehensive Wireframe Slide Example.
Once the user saves the account information, he or she will be taken a screen where to add the luch beneficiarie/s or users of the lunch service.
Image
Creating Lunch Beneficiaries
Several patterns and standards influenced my design. I pushed myself to think critically about the UI scheme, giving priority to aspects of the app that I considered relevant. Usability and learnability played a central role over fancy features and esthetics. To learn more in detail about what models influenced my prototype and why I considered the design choices I made, please check my LMB Process Document.
Defining the Interaction
Process Document
Image
Open in a new window
Image Image Image Image Image Image Image Image
Quick unrigorous qualitative testing methods aim to improve the product as we move forward through the process of designing. We loosely pic a few users, give them some tasks to perform and learn through observation. The use of frequent testing provides us with enough problems to resolve as we keep moving and no more than we can afford to attend. In addition to that, early testing guarantees we walk on solid ground and don't miss serious issues.
Quick Unrigorous Frequent Testing
Medium fidelity prototype
Scheduling
Low-fi Prototypes Using Balsamiq
Adding some essential interaction - in this case, using Balsamiq - helped to determine if I was on the right track.
Paper prototypes offer quick usability feedback at a little cost. We can detect significant issues and make immediate changes before investing more time and further resources. For this purpose, it is crucial at this stage to work using rough sketching techniques. They offer the advantage of working fast but clearly and efficiently enough to request peer feedback.
Image
Image
Image
Image
Image
Image
Some of the used low-fi wireframes.
Paper Prototypes
Image
Sitemap
Image
Workflow
After I defined how my users might interact with the device, I proceeded to diagram the most appropriate content structure for the app. After ideating some alternative structures through sketching, I crafted a flow chart and a sitemap.
Content Structure
Henry Schedules a Menu and Adds Funds
One of the four illustrated user journeys.
Image
Defining the Interaction
Image
To create an efficient interface is necessary to understand what the main interactions would be. I arrived at each of the four user journeys by responding to the persona’s needs and motivations. The objective was to illustrate the different ways in which the app might offer them solutions that would be pleasurable and comfortable. I also started to define the app’s functionality, which later I will describe in more detail through a sitemap.
Personas
Image Image
Why Storyboards?
I used storyboards to describe the journeys because I believe this could serve me in several critical ways. First, because storyboards bring a vision to life in a particular way, people relate to the virtual events described by them and grasp their essence. Second, as a strategy to better sell my solution.  Storyboards generate those "Aha!" moments we expect team members an clients to experience. Other reasons are:

• Ideal for communicating context: place, actions, and props.
• Competent to express transitions from step to step, or progression.
• Illustrate whatever functionality is needed to outline.
• Excellent tool to represent emotions.
• Great to draw attention to specific elements.
• Attractive way to demonstrate ideas to executives.
Interactive Design Project
Design  Challenge
LMB is an app designed to allow parents and guardians of school-age children to manage various aspects of their kids' in-school cafeteria lunch accounts.
My Role
Interactive designer based on the user model offered by the client.
Image
Project Requirements
• Sign up for an account using an email and password.
• Fund the account to avoid children from bringing cash to the school.
• View account, and school menu by child.
• Favorite a lunch (and be alerted a night before about it.)
• Close the account at any time.
Image Image Image
The Plan
To inform content organization, navigation, and interaction, I created two user journeys for each of the two personas based on the user model offered by the client. I illustrated a range of possible situations and tasks.
Image Image
Image
Adding Funds
UX/UI/Projects > Lunch Money Buddy
Image
A great idea does not define a successful application. Excellent usability does together with a deep understanding of the user, including his or her habits and mental models. It is going beyond a working product to reach intuitive and satisfy experiences for the user.
A successful application relies on constant iteration and validation. It relies on designers' ability to go back to the product over and over again, always with fresh eyes. With this concept in mind, the first versions should be minimal and very sketched. This kind of presentation is very inviting to feedback. It is less susceptible to changes and essential to keep the design process rolling.
Course-redirection. Designers should be ready and comfortable with course-redirection. Furthermore, designers should help clients and peers to be familiar with a design process that is organic and welcomes error. This practice might be as challenging as the design activity itself but highly necessary.
Final Thoughts
At this point, the app might be closer to the final line, but before then, we will have to do further testing and iteration based on new feedback. As we add visual components to the app, interrelations might become more complex. As a consequence, the situation might - or might not - translate into new issues to solve and hidden challenges that could reveal only at more advanced faces of the process.
Next Steps
Image
Why Storyboards?
I used storyboards to describe the journeys because I believe this could serve me in several critical ways. First, because storyboards bring a vision to life in a particular way, people relate to the virtual events described by them and grasp their essence. Second, as a strategy to better sell my solution.  Storyboards generate those "Aha!" moments we expect team members an clients to experience. Other reasons are:

• Ideal for communicating context: place, actions, and props.
• Competent to express transitions from step to step, or progression.
• Illustrate whatever functionality is needed to outline.
• Excellent tool to represent emotions.
• Great to draw attention to specific elements.
• Attractive way to demonstrate ideas to executives.
Image
Henry Schedules a Menu and Adds Funds
One of the four illustrated user journeys.
Image
Personas
Image Image
The Plan
To inform content organization, navigation, and interaction, I created two user journeys for each of the two personas based on the user model offered by the client. I illustrated a range of possible situations and tasks.
Interactive Design Project
Sector
Education.
Image
Project Requirements
• Sign up for an account using an email and password.
• Fund the account to avoid children from bringing cash to the school.
• View account, and school menu by child.
• Favorite a lunch (and be alerted a night before about it.)
• Close the account at any time.
Image
My Role
Interactive designer based on the user model offered by the client.
Image
Design
Challenge
LMB is an app designed to allow parents and guardians of school-age children to manage various aspects of their kids' in-school cafeteria lunch accounts.
Image Image
Image Image
Image
Quick unrigorous qualitative testing methods aim to improve the product as we move forward through the process of designing. We loosely pic a few users, give them some tasks to perform and learn through observation. The use of frequent testing provides us with enough problems to resolve as we keep moving and no more than we can afford to attend. In addition to that, early testing guarantees we walk on solid ground and don't miss serious issues.
Quick Unrigorous Frequent Testing
Scheduling
Adding Funds
Low-fi Prototypes Using Balsamiq
Adding some essential interaction - in this case, using Balsamiq - helped to determine if I was on the right track.

The application is nowhere near ready. However, at this point the test result shows no sustancial issues. Then, I cautiosly moved to the visual design face of the project allowing simultaneous testing by creating a limited version of what the final product would be.


What is Next?
Image
Sitemap
Image
Workflow
After I defined how my users might interact with the device, I proceeded to diagram the most appropriate content structure for the app. After ideating some alternative structures through sketching, I crafted a flow chart and a sitemap.
Content Structure
Once defined, an alternative design for the content organization, it was time to create a complete content wireframe for the app. To demonstrate content placement and user flow, I designed a Comprehensive Wireframe and documented it. It is important to note that this would not be the final diagram of the user interface, but a means to exercise and explore content organization, hierarchy, and user flow.  
Exploring Content Structure
Image
Comprehensive Wireframe Slide Example.
Image
Once the user saves the account information, he or she will be taken a screen where to add the luch beneficiarie/s or users of the lunch service.
Creating Lunch Beneficiaries
Paper prototypes offer quick usability feedback at a little cost. We can detect significant issues and make immediate changes before investing more time and further resources. For this purpose, it is crucial at this stage to work using rough sketching techniques. They offer the advantage of working fast but clearly and efficiently enough to request peer feedback.
Paper Prototypes
Image
Image
Image
Image
Image
Image
Some of the used low-fi wireframes.
Medium fidelity prototype
Several patterns and standards influenced my design. I pushed myself to think critically about the UI scheme, giving priority to aspects of the app that I considered relevant. Usability and learnability played a central role over fancy features and esthetics. To learn more in detail about what models influenced my prototype and why I considered the design choices I made, please check my LMB Process Document.
Defining the Interaction
Usability Test Plan Dashboard
Image
Image Image Image Image Image Image Image Image
Image
Visual Design
LMB App’s Style Guide Version I
Image
Image
Image
Image
Hi-Fi  Sketch Prototype’s Artboards
Image
First Version Basic Hi-Fi  Prototype
UX/UI/Projects > Lunch Money Buddy
Image
A great idea does not define a successful application. Excellent usability does together with a deep understanding of the user, including his or her habits and mental models. It is going beyond a working product to reach intuitive and satisfy experiences for the user.
A successful application relies on constant iteration and validation. It relies on designers' ability to go back to the product over and over again, always with fresh eyes. With this concept in mind, the first versions should be minimal and very sketched. This kind of presentation is very inviting to feedback. It is less susceptible to changes and essential to keep the design process rolling.
Course-redirection. Designers should be ready and comfortable with course-redirection. Furthermore, designers should help clients and peers to be familiar with a design process that is organic and welcomes error. This practice might be as challenging as the design activity itself but highly necessary.
Final Thoughts
At this point, the app might be closer to the final line, but before then, we will have to do further testing and iteration based on new feedback. As we add visual components to the app, interrelations might become more complex. As a consequence, the situation might - or might not - translate into new issues to solve and hidden challenges that could reveal only at more advanced faces of the process.
Next Steps
Image
First Version Basic Hi-Fi  Prototype
Image
Image
Image
Image
Hi-Fi  Sketch Prototype’s Artboards
Image
Visual Design
LMB App’s Style Guide Version I
Image Image Image Image
Attitudinal Observations
Unrigorous Interview
Image
Behavioral Observations
Task Success
A Few Observations
Usability Test Plan Dashboard
Image
Medium fidelity prototype
Quick unrigorous qualitative testing methods aim to improve the product as we move forward through the process of designing. We loosely pic a few users, give them some tasks to perform and learn through observation. The use of frequent testing provides us with enough problems to resolve as we keep moving and no more than we can afford to attend. In addition to that, early testing guarantees we walk on solid ground and don't miss serious issues.
Quick Unrigorous Frequent Testing
Image Image Image Image Image Image Image Image
Several patterns and standards influenced my design. I pushed myself to think critically about the UI scheme, giving priority to aspects of the app that I considered relevant. Usability and learnability played a central role over fancy features and esthetics. To learn more in detail about what models influenced my prototype and why I considered the design choices I made, please check my LMB Process Document.
Defining the Interaction
Once defined, an alternative design for the content organization, it was time to create a complete content wireframe for the app. To demonstrate content placement and user flow, I designed a Comprehensive Wireframe and documented it. It is important to note that this would not be the final diagram of the user interface, but a means to exercise and explore content organization, hierarchy, and user flow.  
Exploring Content Structure
Image
Image
Once the user saves the account information, he or she will be taken a screen where to add the luch beneficiarie/s or users of the lunch service.
Creating Lunch Beneficiaries
Comprehensive Wireframe Slide Example.
Scheduling
Adding Funds
Low-fi Prototypes Using Balsamiq
Adding some essential interaction - in this case, using Balsamiq - helped to determine if I was on the right track.
Paper prototypes offer quick usability feedback at a little cost. We can detect significant issues and make immediate changes before investing more time and further resources. For this purpose, it is crucial at this stage to work using rough sketching techniques. They offer the advantage of working fast but clearly and efficiently enough to request peer feedback.
Paper Prototypes
Image
Image
Image
Image
Image
Image
Some of the used low-fi wireframes.
Image
Sitemap
Image
Workflow
After I defined how my users might interact with the device, I proceeded to diagram the most appropriate content structure for the app. After ideating some alternative structures through sketching, I crafted a flow chart and a sitemap.
Content Structure
Henry Schedules a Menu and Adds Funds
One of the four illustrated user journeys.
Image
Image
Why Storyboards?
I used storyboards to describe the journeys because I believe this could serve me in several critical ways. First, because storyboards bring a vision to life in a particular way, people relate to the virtual events described by them and grasp their essence. Second, as a strategy to better sell my solution.  Storyboards generate those "Aha!" moments we expect team members an clients to experience. Other reasons are:

• Ideal for communicating context: place, actions, and props.
• Competent to express transitions from step to step, or progression.
• Illustrate whatever functionality is needed to outline.
• Excellent tool to represent emotions.
• Great to draw attention to specific elements.
• Attractive way to demonstrate ideas to executives.
Personas
Image Image
The Plan
To inform content organization, navigation, and interaction, I created two user journeys for each of the two personas based on the user model offered by the client. I illustrated a range of possible situations and tasks.
Interactive Design Project
Sector
Education.
Image
Project Requirements
• Sign up for an account using an email and password.
• Fund the account to avoid children from bringing cash to the school.
• View account, and school menu by child.
• Favorite a lunch (and be alerted a night before about it.)
• Close the account at any time.
Image
My Role
Interactive designer based on the user model offered by the client.
Image
Design
Challenge
LMB is an app designed to allow parents and guardians of school-age children to manage various aspects of their kids' in-school cafeteria lunch accounts.
Image Image
Image Image
UX/UI/Projects > Lunch Money Buddy
Image
Image
About Me