KAI MOBILE app
Kai is a small start-up based in Chicago dedicated to ending world hunger once and for all through the power of community while leveraging the sharing economy. Their long-term plan to eradicate hunger worldwide began in 2013. Since then, the team of four have been heads down engineering the best possible scalable organization to help food donors connect with local shelters, including its own food center that serves families in need and homeless people.
However, they want to scale. And for that, they want to automate their processes. They need an app that allows food donors to easily communicate with them and, eventually, they will also need an app for food drivers to manage their routes.
This is the stage where we attempt to understand our users at a deeply human level. This means we go beyond logic and rational behavior. To gain empathy, we need to understand the emotional, social and irrational drivers that affect the way our users behave. To gain a better understanding of the nonprofit world, I completed in person interviews, online surveys, and competitive analysis. These methodologies help highlight the current trends and any gaps in the designs.
Contact info with organization
Ability to have multiple employees of same business log in and track their donations, and contact each other
Input type of food and scan to approximate weight, volume, size to avoid miscommunication
Calendar to choose a date and time when food needs to be picked up
Donate money option
Interactive map to give drivers an automated route and have donors updated
Messaging between donors and drivers
Donating the right type of food that food banks need
Scheduling a good time to drop off donations
Miscommunications about the food donation and delivery logistics
Food donor businesses having too many people involved
In the US. and in Canada, 30-40% of the food supply is wasted, equaling more than 20 pounds of food waste per person per month, yet millions go hungry night after night.
About one-third of all food produced worldwide—worth around one trillion dollars—gets lost or wasted in food production and consumption systems! When this figure is converted to calories, this means that about 1 in 4 calories intended for consumption is never actually eaten
Organic waste is the second highest component of landfills, which is the largest source of methane emissions.
After conducting my user interviews, I started with an empathy map to synthesize my findings. I used different colored sticky notes for each participant and sorted key insights that stood out to me into five categories: doing, seeing, hearing, pains & gains, thinking & feeling. This really helped identify user needs, pains, and wants. I then went on to create provisional personas and a user persona based on a common Kai app user
This method will give us insight into food donating and food waste and apps that are similar. Market research will help find the trends in the market that have already been discovered.
Seeing what competitive apps in the same field are doing, what works for them and what doesn’t, will give us a guide on how to set up a good base for creating a new app from scratch.
Help gain empathy on the users/members and understand their personal motivations and frustrations for using an app with similar features: map, scan, log in, track.
- Food pantries have turned from temporary help to household’s long term strategies to supplement monthly shortfalls
- Clients need to visit more than once a month, which is more than food pantries intended. 47% say they went to more than one a month
- Distance is a top factor clients most overcome to access food. Some will choose based on location or need to travel even a mile or more with left with no other option
- Users value friendly staff the most, second factor was distance, and then quality and freshness of food
- Clients are mainly positive about their experiences but view distributions as unequal based on other characteristics, such as first come first serve, larger families, etc.
- For the food banks, there is a strong need for outreach since word of mouth is their top referral method
02 iNFORMATION ARCHITECTURE
Information Architecture (IA) uses the metaphor of architecture because it's meant to help us better organize "places made of information." The work of information architecture requires identifying all types of content within a product, sorting them, and then mapping them out in a way that feels familiar to the user.
In order to understand the user's needs even further, I created a storyboard. I focused on a situation that would occur for the user to need the app, thus solving multiple frustrations
KAI MOBILE APP SITEMAP
Based on my research findings, I covered the user needs as well as the business needs and formed a sitemap for the app. I included all necessary functions, including features for the "driver's app" that would be separate from the "donor app".
03 iNteraction design
Interaction design is a major component of the user experience. It incorporates information architecture and usability to define how a product will behave. Good interaction design considers a user’s goals, context and understanding of the world in order to present an interface the user easily understands.
The task flow shows how the user might navigate through the site to accomplish two different tasks.
The user flow shows how the user might navigate through the site to accomplish the task of scheduling a new donation pick up.
After completing the previous process phases I sketched out low-fidelity wireframes for a few pages, considering what tasks a user would need to accomplish. I thought about the best way to incorporate all the user and business needs in a cohesive manner. Since this app is pretty intuitive, I need the design and the flow to be very simple and easy to understand.
04 USER INTERFACE design
With the UI kit, I focused on building upon the brand identity with interactive UI elements. I I researched trending UI features such as gradients, opacities, shadows, even sign-buttons and incorporated the most I could appropriate. I used this lighter, fresher shade of green to give over the feel of security as well as playing on the "fresh food" aspect. I designed the icons based on currents trends as well, all while tying in the look and feel of the brand and app.
LOGO OPTIONS EXPLORED
The right color palette completes the branding of any company. I've covered the brand color with the fresh green and I added softer supporting colors to give the green the right attention. Call-to-action buttons should stand out with a complimenting highlighting color as well. After a few attempts, I ended with this dark coral shade. Complimenting a bright green can be tricky since it needs to work well but also highlight and stand out without feeling too competing.
Since a trending UI theme is to use gradients and bright colors, I used both the green and red shades as a a starting point for my gradients and went brighter.
Keeping the theme of the logo and entire brand, my challenge was to design icons for the app. Icons are expected at this point in design, it's an efficient and appealing way to replace text.
I worked with flat designs, staying with gradients and some shadows to keep up with current trends and the look of the app. I used the highlight color when it was needed, like in the package details, so the icons would stand apart from the green and avoid getting lost. I did have some contrast issues with the light gray against white, so I added a darker boarder without compromising the design.
POP UP & FORM
ACTIVE | DISABLED | SELECTED
In one of the final stages is the UI design. I designed most of the app, completing a few tasks. I wanted to transfer the fresh, clean, modern look of the logo into the app. Since Kai would have multiple users from wide age spectrums I needed the design to stay simple while looking "up-to-date". For first time users I wanted to focus on on-boarding. I explained who Kai is and what they do in three screens with icons in the app that represent the highlighted features.
APP PROTOTYPE AND LINK
LOG IN/SIGN UP
LOG IN COMPLETE
SIGN UP QUESTIONS
SIGN UP FORM- TYPING
SIGN UP FORM
SIGN UP COMPLETE
The purpose of the app is to help making donating food a seamless easy process. I wanted the app to feel a little familiar so users wouldn't have much of a learning curve. With the home screen opening up to the user's location and the immediate call-to-action button stating "schedule new pick up", the users can see that donating food is as easy as calling an Uber.
Forms and questions can be very lengthy and boring for users too. I worked on a few versions to make the package detail form be simple, fun, and as clear as possible. I added the "take a picture" feature to avoid any miscommunications between the donor and the driver, or Kai directly. Through my interviews and research, this was as common problem area.
When the user submits a new pick up, Kai would essentially review the food details to make sure the food is safe and nothing stands out as dangerous. To help the user understand the process, I created a tracking page that's easy to follow and the user can understand which stage number they are at and what comes next.
NEW PICK UP ENTER FOOD DETAILS (1/3)
NEW PICK UP TAKE A PICTURE OF PACKAGE (2/3)
CONFIRM PICK UP
NEW PICK UP PICK A TIME A DATE (3/3)
HOME MENU- OPEN
USER'S PACKAGE REQUEST TRACKING
MESSAGES- OPEN MESSAGE
KAI DRIVER APP
In order to have the app run smoothly and achieve our user and business goals, we need a driver version of the app. I designed Kai's "driver app" to help the donation process even more. Both apps are designed very similar and feedback is coordinated with each other.
When the driver is assigned a new pick up they are able to view the package details, which helps in deciding which vehicle or if extra help is needed for larger weighted donations. Unclear package sizes and weights was another frustration food pantry's had with donation pick ups.
Similarly to "My Donations", the driver can log in and view "My Pickups" as well as upcoming and past ones. Once a pickup is selected, the driver can view the details the donor put in on their end. The driver can see the food details and contents and any special instruction given.
Communication is always key, especially with transportation. Within the driver's app the driver can contact the donor directly or cancel their pickup. The app also has in-app mapping which allows the driver to begin route to the donation immediately. And then automatically sending the coordinating donor an alert.
TAP PICK UP NOTIFICATION
SELECTED PICK UP
PICKUP CONFIRM BEFORE BEGIN ROUTE
05 Iteration & Implementation
The testing phase is our greatest opportunity to improve our products by studying how people respond and interact with our ideas. Using the feedback we get from our users, we then create the next iteration of our work and repeat the design process again as necessary.
• Test overall look and attraction of the features
• Good flow, if steps easy to follow
• Test users understanding of where to navigate
• Identify inconsistencies in the app
CONCLUSION & NEXT STEPS
In this project I conducted my usability testing before I started my high fidelity wireframes so my participants could focus on the hierarchy of different elements and the flow of the app. Learning where the users failed and had frustrations really gave me new ideas on how the organization should be from what I originally thought.
For example, when the user enters their "food donation details" I originally opened with having the user "scan" their package. This was confusing for all my participants since they didn't understand why they needed to and it felt like it should be a later step.
Given a true organization with more time and budget, I would continue further with more usability tests on the high fidelity wireframes. I would log the pains and gains of the participants to better improve the app. I would also take some of the participant comments and design different page ideas during testing to to see which ones work better for the user.
Self explanatory instructions are a big key in keeping a smooth flow of an app. Condensing forms and questions would also increase more traffic, adding to more donations for Kai. Users also like options, so in the same way continuing to give the users more options, more detailed donations, options for delivery, etc.
Why stop here? View my other case studies!