UX/UI, User Research

Kai: Mobile App Design + Branding

 
 

Overview

The Client

Kai is a food donation non-profit that connects businesses with excess food to DC’s food-insecure residents.

The Challenge

Create a mobile app that will allow businesses to painlessly donate food.

Outcome

A mobile app that seamlessly facilitates the scheduling and management of food donation pick-ups.

Length of Project

2 weeks (Speculative Project)

Role

Lead UX Designer (research, interaction design, visual design)

 
 
 

Research

 

During the research phase, I sought to understand the trends that set the standard in the non-profit sector. I also needed to uncover the needs and frustrations of the target user to better understand how to appeal to them. 

 

Research Goals

  1. Define the standard for donation services.

  2. Learn about popular donation apps on the market.

  3. Understand why businesses and organizations donate and why individuals receive food donations.

  4. Define common behaviors of businesses and organizations when donating food

  5. Define common behaviors of individuals receiving food donations

  6. Determine users’ needs and frustrations when donating and receiving donated food

  7. Understand how donors, food recipients, and intermediary startups interact.

  8. Identify areas of the donation experience that could be improved.

Secondary Research: Market Research

First, I conducted secondary research to familiarize myself with food donation apps that are already on the market. I gathered data on the problem of food waste in America and the use of technology to tackle the issue. 

Secondary Research: Competitive Analysis

A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor food donation start-ups.

 
 

Image: Competitive Analysis Findings

 
 
 

Define &
Ideate

My competitive analysis produced the following insights:

Findings

  • There are not many competitors in this industry, at least not who have a mobile app to coordinate donations. There is an opportunity to use mobile-based technology to improve the efficiency of the donation process. 

  • Many food donation apps have tight restrictions on what types of entities may donate; some only allow restaurants or corporations. 

  • There is very little information about how these food startups go about choosing the recipients of the donated food- more transparency would help users who want to make sure their contributions are reaching people who truly need them.

  • Tax deductions play a major role in incentivizing businesses to donate. Almost every competitor outlined the financial benefits of charitable giving. 

Secondary Research - Provisional Personas

I created provisional personas that reflected the data I had collected through user research. Understanding the target audience helped me think about how the app would appeal to different demographics with varying needs.

Provisional Personas.png

Primary Research - Interviews

To better understand the perspective of the target user, I interviewed 4 people- two people who regularly donate to a food bank and two people who receive food from food banks in the DC area.

Research Assumptions:

  • The donation process needs optimization via technology.

  • Donation recipients have mobile devices on which to access donation services.

  • Users are unsatisfied with the current donation structure in place.

 

After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.

Image: Empathy Map constructed from interview responses

By clustering interview responses, I discovered trends and patterns that revealed insights about the user experience. Through this process I identified several user needs:

  1. Users need convenience throughout the food donation process.

  2. Recipients need to know they will receive high-quality food donations.

  3. Users need efficiency throughout the food donation process.

  4. Donors need to find donating mutually beneficial.

Persona Creation

Next, I used all of the qualitative data i gathered during the research process to create two personas. Since Kai is a two-sided service, meaning it is used by both donors and recipients, I wanted to capture both types of users through my personas. I found that donors and recipients have different needs and motivations.

Image: User Persona

 

Point of View Statements & How Might We Questions

At this point, I realized that I would only have time to focus on one user group, so I decided to move forward with the donor persona. I had identified the needs of donors, so I had to shift gears from intensive research to ideation. I created Point of View statements and How Might We questions to generate a list of solutions to the challenge.

POV & HMW.png


Group Brainstorming

I asked two friends to assist me in generating ideas for this project. For each How Might We question, I asked them to come up with as many solutions as possible in the given time frame.

Group Brainstorm.jpg
 
 

Information
Architecture

 

Business and User Goals

Next, I reflected on the business goals, user goals, and technical considerations for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.

Stakeholder Goals Venn Diagram

 

A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.

Next, I created a site map for Kai that outlined the app’s navigation and information hierarchy.

Sitemap.png
 
 
 

Test

 

Visual Design

 
 

Next Steps

 

Interaction Design

I completed a task flow and user flow to imagine the ways a user might navigate through the app to donate food. These tools helped me ensure that the information was organized in the most intuitive fashion for the user.

Taskflow.png

Wireframes: Low-Fidelity

I began the process of wireframing with sketches of several of the main screens for Kai. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes.

Wireframes: Mid-Fidelity

I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design. Once this was complete, I started creating digital wireframes for the main screens in Sketch.

 

Usability Testing

I asked 4 participants to test out the prototype's usability. The participant pool was comprised of people over the age of 18 who are android users. The participants were given four scenarios, each with a task to complete. 

Tasks:

  1. Use the tracking feature to see how close your driver is.  

  2. Navigate to the donation guide and read the food donation regulations for your state.

  3. Message your driver to give him the access code to the security gate.

  4. View your rank in the office’s donation league.

To view the full Usability Testing Plan, click here.

 

Affinity Mapping

I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which were reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what needed to be changed immediately and what could be saved for later.

Findings:

All participants were able to complete all tasks; however there. The most challenging task for users was the first task, which asked them to use the tracker feature to see how close their driver was. Overall, most issues users had were caused by information hierachy.

 

Recommendations:

  1. Move Track Driver feature to the pick-up details screen.

  2. Simplify the schedule donation button by removing the vector image.

  3. Reorganize the information hierarchy of the donation page.

  4. Increase font size of ETA message on the tracker map.

  5. Change the title “Contact Information” on the pick-up details page to something more descriptive.

 

After updating my wireframes to incorporate the recommendations, I moved on to visual design. Up until this point, my prototype lacked a color scheme, typography, and a brand identity. I looked for inspiration for the mobile app on Pinterest.


Next, I started brainstorming logos. Coming up with brand adjectives helped me narrow my vision. I sketched ideas first, and then created digital versions of my favorites.

The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow. 

Finally, I applied the branding from the style tile to the mid-fidelity wireframes, the result of which was a set of high-fidelity wireframes.

Screen Shot 2018-10-06 at 8.59.20 PM.png

Please view the final prototype below.

 

If time permits, I would like to work more on the Donor League section of the app, which allows friends, co-workers, and community members to compete to donate food. I have been exploring the idea of adding a marketplace feature which would allow users to redeem prizes such as gift cards based on the points they accumulate from donating.