Kai Mobile App

CASE STUDY

BACKGROUND

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.

MY PROCESS

RESEARCH, INFORMATION ARCHITECTURE, INTERACTION DESIGN,
USER INTERFACE DESIGN, ITERATION & IMPLEMENTATION

TOOLS USED: SKETCH, PHOTOSHOP, INDESIGN, ILLUSTRATOR, INVISION, PRINCIPLE

TIME FRAME: 80 HOURS

01 RESEARCH

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.

USER NEEDS

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

PAIN POINTS

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.

EMPATHY MAP- STICKY NOTE PROCESS

USER PERSONA

USER PERSONA -EMPATHY MAP

PROVISIONAL PERSONAS

The Driver

Age 29

Goals

- Helping homeless receive meals they need

- Easy platform to connect food to the people in need

- Communication between other drivers

- Organized scheduling

Pains

- Miscommunication/ delayed communication between other drivers and receivers

- Confusing scheduling

- Outgrowing their limited, out-dated platform

PROVISIONAL PERSONAS

THE RECEIVER

Age 64

Goals

- Access to fresh, nutritious meals

- Easily locate meals and centers

- Notified of events and news

Pains

- Living on pension and can barely afford bills

- Cheap food is very unhealthy and harmful

- Hard to keep up with food banks, doesn’t drive or have a smartphone

- Technology is confusing and he feels limited

PROVISIONAL PERSONAS

THE DONOR

Age 45

Goals

- Connect food wasted to homeless and people in need

- Strong and clear communication with food bank staff

- Tax deduction

Pains

- Food shipment details are confusing and cause trouble, weight and volume

- Pays for food donation pick up services

Research

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

RESEARCH METHODOLOGIES

MARKET

RESEARCH

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.

COMPETITIVE

ANALYSIS

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.

PERSONAL

INTERVIEWS

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.

Research Findings:

- 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

Information Architecture

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.

STORYBOARD

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".

Interaction Design

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.

TASK FLOW

The task flow shows how the user might navigate through the site to accomplish two different tasks.

USER FLOW

The user flow shows how the user might navigate through the site to accomplish the task of scheduling a new donation pick up.

WIREFRAMES

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.

User Interface Design

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.

KAI LOGO

LOGO OPTIONS EXPLORED

COLOR PALETTE

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.

#54B948

#D8ECD4

#EC5944

#313230

#A5A69E

ICONS

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.

BUTTONS

BOTTOM BAR

POP UP & FORM

SELECT TIME

ACTIVE | DISABLED | SELECTED

PROGRESS

ACTIVE

SELECTED

DISABLED

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.

HI-FIDELITY WIREFRAMES

APP PROTOTYPE AND LINK

LOADING SCREEN

ONBOARDING 1

ONBOARDING 2

ONBOARDING 3

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.

HOMEPAGE

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)

CONFIRMATION/
FINAL PAGE

HOME MENU- OPEN

USER'S PACKAGE REQUEST TRACKING

MESSAGES

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.

HOME PAGE

TAP PICK UP NOTIFICATION

SELECTED PICK UP

PICKUP CONFIRM BEFORE BEGIN ROUTE

PICKUP DETAILS

IN-APP ROUTE

Iteration & Implementaton

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 Objectives:

• 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!