Kanishea Jay
UX Writer

PakPak

An app that helps parents donate items for children within a local and secure community

Overview

Project Brief

My team and I wanted to create something that was impactful and incorporated each of our passions, thus Pack Pack was born! PakPak is an app whose aim is to provide a way for parents to donate new and used children's items (clothing, toys, electronics, and school supplies), within a local and secure community. As a starting point, we designed this app for iOS users in the United States.

Goal

To build a functional medium-fidelity prototype that can be tested with users.

Role

UX Researcher

UX Designer

UX Writer

Team

Kanishea Jay

Chris Zogopoulos

Whitney Vorwerk

Linh Protzel

Tools

Miro

Figma

MS Teams

Duration

2 Months: Jan 2021 - Feb 2021

Ideation

The main goal of the ideation phase is to use creativity and innovation to develop, generate, and communicate new solutions. Since we were all virtually meeting for the first time and coming from different locations and time zones, we wanted to bring together each team member's perspectives and strengths to ensure we were bringing forth our very best efforts. Furthermore, my team and I wanted to explore new territories and expand our solution space to go beyond the usual methods of solving the local and safe donation problem.

Methods applied in the ideation phase:

2.1 Brainstorming

2.2 Post-it Voting

2.3 Drawing

2.1 Brainstorming

Brainstorming via Google Meet and Microsoft Teams were the best options for my team and me to listen and engage with one another, leverage the group's collective thinking, and generate ideas. We conducted 2 brainstorming sessions to ensure we got the most out of our time and team members.

The first session (via Google Meet):

  • General introductions of our past and present experiences, and what we hoped to get out of the group project

  • Shared 3 potential projects (all topics were welcomed) we wished to complete and why we thought they were important

  • Took our own notes and encouraged one another to write down any questions for the next session

The second session (via Google Meet)

  • Created a visual board on Miro to record all of our ideas

  • Asked all remaining questions about one another's desired projects

  • Transferred each idea to a virtual post-it note and grouped all relevant projects together to get a better visual of genres and categories

Photo of post-it note voting process

Photo of post-it note voting process

2.2a Post-It Voting

After our brainstorming session, we met again to select our list's best, most practical, and most innovative ideas.

To keep this process creative and innovative, we:

  • Set a timer for 5 minutes

  • Put a star underneath each idea we liked

  • Isolated the ideas that received no stars

  • Chose the top 5 ideas that had the most stars

  • Set a timer for 2 additional minutes

  • Voted on our personal top 3 choices out of the 5

  • Chose the idea with the most stars (there was a tie between "toy hand me down" and "donation app for classroom"

As a team, we created a donation app that included toys, classroom supplies, and clothing that can be shared at home and school to strengthen communities.

Photo of our top 3 solutions.

Photo of our top 3 solutions.

2.2b The best solution

Upon choosing an idea, my team and I continued our session by brainstorming potential solutions.

We narrowed down our 5 solutions to 3. Out of those remaining solutions, we chose what we thought would be the best solution to go with.

As a team, we decided to remain open-minded and anticipated the research phase to determine if our solution would still be needed after interviewing parents and teachers.

2.3 Drawing

After choosing the best solution, we drew out the potential needs of each user type (photo below) to get a better idea of what features the app would need to offer to solve each user's problem.

This process helped us begin to organize the solution and start thinking of the information architecture. It also helped us understand the type of research we needed to do and which methods might give us the most insight.

Research/
Analysis

Research methods we used:

3.1 survey

3.2 competitive analysis

3.3 User Interviews via phone

3.4 User Personas

3.5 Pain points / Goals & Needs

3.6 Affinity Diagram

3.1 Surveys

For our surveys, we met over MS Teams and used their collaborative software to keep our files organized and to discuss what type of questions would be most appropriate. After creating a list of the information we wanted to target with the surveys, I took on the task of creating the questions via Survey Monkey.

Initially, we planned to create one survey and distribute it to friends, family, and colleagues. However, in an attempt to gather as much information as possible, we conducted 2 separate surveys :

  1. To acquire general information and determine the donation methods used by teachers and families.

  2. To get a better picture of how the donation experience and process can go when children are involved.

Distributing the surveys went well since I and two other team members were former educators and had access to teachers who were active in the classroom. We were all either acquainted with enough parents or teachers who had experience with the donation process. This resulted in us receiving a total of 39 responses.

Photo of: Question #1 of the first survey

Photo of: Question #1 of the first survey

Guiding Questions from survey #1:

  • This short survey was a mixture of 8 open-ended and closed-ended questions and estimated about 3 minutes to complete.

  • We obtained 28 responses.

  • Responses helped my team and I understand that there is a need for the donation process to be made easier with a better trade-off and communication system.

  • With these results, we decided to focus more on creating an app that is able to make communication easier for teachers and parents trying to donate items and receive items.

Photo of: Question #7 of second survey .

Photo of: Question #7 of second survey .

Guiding Questions from survey #2:

  • This short survey was a mixture of 8 open-ended and closed-ended questions and estimated about 2 minutes to complete.

  • We obtained 11 responses.

  • There were insightful results that confirmed our assumptions on the need for a donation app that includes children and the community,

  • We noticed that there was a need for the child to be included in the donation experience, which lead us to further brainstorm on possible ways to add fun incentives that would appeal to children.

3.2 Competitive Analysis

There are a handful of active organizations that fulfill the needs of teachers, children, and parents in need of toys, clothing, and school supplies. We decided to each do a google search to find organizations trying to solve the same (or part of ) the problems we were trying to solve.

Since we were dedicated to building a new solution, rather than redesigning an existing solution, our competitive analysis included:

  1. Donation and/or reselling organizations for parents, schools, or children.

  2. Visual indicators and features of the mobile apps and websites of existing companies and organizations that focus on reselling or donating.

Photo example of our visual board created to organize our competitive analysis.

Photo example of our visual board created to organize our competitive analysis.

1. Organizations we researched:

  • Kid to Kid

  • FreeCycle .org

  • Gone for Good

  • Whirli

  • Toy-cycle

  • Young PLanet

From this analysis, we learned that the organizations that were focused on community building did not have mobile apps to make the drop-off, pick-up, and communication easier for giving or receiving donations.

The opposite was also true. The organizations with websites and mobile apps did not focus on connecting people who were giving and receiving donations.

We noticed that there were no organizations that combined the needs of both teachers and parents, which reassured our assumptions.

Photo example of our visual board created to organize our competitive analysis.

Photo example of our visual board created to organize our competitive analysis.

2. Visual Indicator Analysis

In addition to analyzing the solution created by real-life competitors, we decided to research the aesthetic and visual indicators of similar apps and websites.

Doing so gave us design inspiration for PakPak and helped us determine if early functionality and information architecture ideas would be possible.

As mentioned before, most of the competitors we initially chose did not have mobile apps, so we decided to choose a few more companies with similar solutions.

The additional mobile apps and websites we analyzed were:

  • Poshmark

  • Mercari

  • eBay

  • Facebook Marketplace

  • OfferUp

  • Nielson and Norman

This process not only gave us design inspiration but also helped us create a design system for PakPak, which we documented in Figma to help keep us all on the same page while creating our sketches and wireframes.

3.3 Phone Interviews

To get a better understanding of the problem, we once again utilized our connections with both parents and teachers and conducted phone interviews. Each member of our team researched 1 person, bringing the total to 4 interviews. We were most curious about the pain points of both parents and teachers when giving and receiving donations.

We chose this research method because we wanted to gain more insight into the pain points, needs, and goals of teachers and parents. We sought to understand how they could better support and share resources with one another. We also wanted to make sure we weren't going off of assumptions.

The main insights we gained from the interviews were:

  • Teachers wanted a better way to communicate with parents about the need for classroom supplies

  • Parents were concerned that donating and seeking donations would take up to much time, so they would just give to local charities, buy needed items, or go without.

Some of our research questions included:

For teachers:

  • Tell me a bit more about how you get resources for your classroom and what that process is like. Is it easy? Difficult? Does it come from your own pocket? 

  • What types of resources are you typically in need of for your classroom? Do you know a bit more about what other classrooms or age groups often need? 

  • Can you describe your experience with classroom donations in the past? Have you received them? How did you get them or through what program did you receive them? What were some struggles around this? What were some perks around this? 

For parents:

  • How do you and your family feel about the number of unused toys and clothing in your home? Do you donate? Why or why not?

  • Can you tell me more about how you go about that process? How does it make you feel? 

  • What if your child’s classroom had an app where you could offer unused toys (maybe other resources) and your child could also get some in return? Kind of like passing and sharing things contained within your school or classroom? Would you find yourself utilizing this? Do you foresee any issues around this? 

Insights from phone interviews:

  • Teachers usually send a list of needed items home with the children

  • Teachers don't usually receive what is needed for their classes

  • Parents want better ways of getting rid of items while staying sustainable

  • Most parents give directly to friends and family, using word of mouth or dropping off at whatever donation center that is closest to them

  • Parents would feel better knowing their used and unused items are going to someone who actually needs them

  • Parents find using an app would be faster and easier but are concerned about sharing their identity

  • Teachers like the idea of an app, but are worried about adding to their workload

  • Teachers suggest the app would have to add more organization

3.4 Personas

After analyzing surveys and phone interviews we wanted to make sure we stayed on the right path while keeping our specific users in mind going forward. We created 2 user personas (photos below), one for the teacher and one for the parent.

Guiding Questions:

  • The methods we used while developing the personas were all of the previous research we conducted and documented

  • We provided context, problems, motivations, pain points, and goals of each user persona

  • Personas were created as a team via Google Meet, using Miro

  • The user personas convinced us to add a chat feature that allows users to ask questions about the quality and previous use of each product

  • We referred back to our user personas while creating the affinity diagram, information architecture (IA) flow, user flow diagram, and med-fi sketches

Photo of parent user persona.

Photo of parent user persona.

Photo of teacher user persona.

Photo of teacher user persona.

3.5 Pain points, Goals & Needs

After we created user personas, we felt the need to organize all of the information we had gathered on the pain points, goals, and needs of each user type, and even possible stakeholders.

We drew a chart in Miro while on Google Meet to categorize:

  1. The donating goals and needs of each user type.

  2. The content and functionality features that would be needed to meet the goals and needs of each user type.

Photo of affinity diagram used for PakPak.

Photo of affinity diagram used for PakPak.

3.6 Affinity Diagram

Utilizing this powerful UX tool, we followed our previous chart with an affinity diagram that included:

  • Quotes from interviews and surveys

  • Observations from competitive analysis

  • survey responses

  • Insights from user personas

We felt this affinity diagram should've contained much more information but were grateful for having documented and created the charts we had leading up to it.

This diagram was a group effort and was created in Miro.

Design

The overall objective of this design phase was to apply the solutions that were exposed during the research in the form of an interactive prototype.

To do so, we used the following methods:

4.1 Information architecture

4.2 User flow diagram

4.3 Design System

4.4 Med-Fidelity Sketches

4.4 Prototype

4.5 Usability Test

Photo of the information architecture of the parent flow.

Photo of the information architecture of the parent flow.

4.1 Information Architecture: Parent Flow

Since we decided to build a mobile app rather than redesign an existing app, structuring the information was our first priority during the design phase.

In hopes to create a great design that is done so well, that it becomes invisible, we drafted 2 IA flows:

  • one for the parent (shown to the right),

  • one for the teacher.

Our previous research and focus on content functionality really helped to make this process less intimidating.

Photo of user flow diagram for PakPak.

Photo of user flow diagram for PakPak.

4.2 User Flow Diagram

With an idea of where PakPak's information should be placed, we moved to the user flow diagram to display the complete path the user would take when using the product.

Using miro, we each chimed in on creating a user flow that would take the user from the entry point to the final interaction, which would be either completing a donation or successfully claiming an item to be donated.

At this point, we were all very excited to begin seeing PakPak unfold. We were also confident that this flow diagram would allow us to ask better usability questions.

4.3 Design system

Moving our team to Figma, taking what we learned from the competitive analysis, and applying mobile app conventions already in place, we began to create a design system (photos below via rolling deck).

Some of our team members came with extensive UI designing experience (Chris), some had minimal experience, and some were just getting started. Having a documented catalog of components and styles to be used throughout PakPak helped us all stay on the same page.

Most of our design system was put together by Chris, who was more than kind enough to lead and answer any, and all, questions regarding UI design.

At this point, we gave one another the freedom to play around with wireframes and when we met at our scheduled times, we'd choose the one we liked the best. This is how we were able to complete most of our med-fi wireframes.

4.4 Medium-Fidelity Wireframes

With each one of us gaining more practice with Figma, we wanted to go straight into creating med-fi wireframes (example photos below) rather than low-fi wireframes. Our user flows were done with virtual sketching via Miro and we wanted to show our design skills, as well as the skills we learned from one another since beginning the project.

What you see below are med-fi wireframes of the entry and login for parents, and the donation process once an item is claimed.

Some of our main goals were to:

  • Follow style conventions but also remain unique

  • Make the UI as minimal as possible while meeting all of the user's needs

  • Make the design easy to use

Some challenges we ran across included:

  • Time. This process took us longer than expected

  • We noticed that there was redundant wording that overcrowded the screens (this is where we began considering the UX writing discipline)

Interactive Prototype for PakPak.

4.5 Prototype

Using our user flow diagram, and med-fi wireframes, Chris and Whitney took the liberty of making our prototype interactive.

Next, they presented it to the team for feedback, questions, and comments.

Initial concerns were:

  • Adding "choose photos" to the flow

  • Adding "search for item" to the flow

  • Screens 53 and 54 aren't showing properly

Photo of usability test

Photo of usability test

4.6 Usability Test

Before getting started with our usability tests, we crafted a "permission to record document" to have each user sign. After we received the agreements we felt comfortable moving on to practice tests. We did so by pairing off and running usability tests on one another.

We created a test script as a team, making sure to include multiple flows to get as much feedback as possible.

Our tasks included:

  1. Register for the app 

  1. You have a disco Barbie you want to get rid of. Post a donation.  

  1. Your son is very excited about coloring these days. Post a request for colored markers.

  1. Search for a hulk toy and claim it.  

  1. You remembered the Disco Barbie you posted actually has brown hair. Update that post.  

  1. A couple of days have passed. You’re curious if the Hulk toy you claimed has made it to school yet. Find out. 

Additional metrics we recorded:

  1. Task Rate (how many tasks out of the total amount of tasks were they able to complete successfully).

  2. Task time

Challenges discovered during the practice run:

  • Recording task time was a challenge because it required a lot of multitasking.

    Solution - We agreed to use the stopwatch feature on our phones, starting as soon as we read off a task to make it easier not to forget. We were to have a list ready to quickly chart the time, trying not to let the users know they are being timed to avoid making them nervous.

After the practice run, we were ready to run real usability tests. The usability tests were done via zoom with 4 willing users (each of our teammates conducting 1 usability test).

Insights & findings from usability test:

Pain points and Concerns : 

  •   Mentioned the “Welcome” was too long and “a lot to read through to get to the app” (when discussing the last page of the Welcome text)

  • Had trouble editing the post

  • When accidentally pressing a random post, couldn’t click on the “My Account” icon to lead to an option to edit the post

  • Concerned that there is too much responsibility on the teacher

Suggestions :  

  • The phrase “no drama” (on the 3rd page of welcome text) is off-putting and could be changed to something less “worrisome”

  • The “Skip” button on the Welcome page could be bigger or a different color

  • My Accounts icon could be bigger or more dominant on the homepage or footer 

  • The back button should lead to the last page used

Confusing :

  • Did not notice the plus sign, did not know it was meant to add a post

  • Confused by the preview page while uploading photos for the donation post Participant lingered on the page “looking for what to do next”

  • Did not know what the “My Account” icon was

  • Did not expect to be on the “Active post” page after creating a donation post 

  • Thought the arrow on the top left was to go back, asked why It led to the account page 

 Likes :

  • Filling out the form to create a donation post was “fast and easy” 

  • “App looks very simple and clean”, “Very user friendly” 

  • The progress bar on claimed items. 

Due to limited time, we were unable to edit the med-fi wireframes to address all of the user's concerns and confusion.

However, this was a perfect time for me to gain experience with UX writing and tackle the welcome, sign-in, and onboarding screens to make a faster, more intuitive, and more informative process. Read on to view my process.

UX Writing
Overview

Research:

After conducting usability tests for PakPak, we received direct feedback that onboarding screens were:

  • off-putting

  • worrisome

  • too-long

Since the welcome, register, and onboarding screens are the very first introduction to the app, I decided to adjust the copy to make for a better user experience.

Approach/Process:

For this project, I created a style guide and edited the wireframes my team and I created in the design process of PakPak. All of my edits are in pink.

Overall Goal:

To make the welcome/ register screens more helpful, encouraging, and concise.

Role/Tools:

UX Writer

Content Strategist

Figma

Style Guide

Although my team and I created a design system for PakPak, we lacked a project style guide that gave grammatical and structural formatting across the entire app. I decided to focus on our voice and tone to start.

Voice

When we write for PakPak, we want to use a consistent voice. here's how to sound like PakPak:

Voice Characteristics

Our voice is:

  • Concise

  • Helpful & encouraging

  • Genuine

Tone

Error messages: When an error message has been displayed the tone of voice should switch from an informal, funny, and enthusiastic tone of voice to a more serious, respectful tone voice. The tone shift is to show that we respect the busy lives of both teachers and parents and want to remain helpful in solving their problems as fast as possible.

Critical Set-up Reminder Notification: The tone of voice should shift from informal, and enthusiastic to serious, respectful, and formal. This tone switch is to show that we take the urgency of critical reminders seriously and encourage the users to do the same.

Confirmation Messages: When a confirmation message has been displayed, the tone of voice should be informal, enthusiastic, and funny. This is to keep PakPak a fun place for all user types and to offer encouragement when donations are sent, claimed, and posted.

Wireframes

Welcome & Register Screens:

For Parents/Guardians

Before:

After:

Onboarding Screens

Before:

For the welcome screen, I started by adding copy that fully describes what PakPak is all about to reduce confusion.

Next, I edited the field titles to make them more clear and more concise, to help the parent/guardian register quickly and with minimal error. The text fields were edited to contain examples that would lessen cognitive overload and make for a faster experience.

Adding hint text for the password was done to help the user register with confidence. The hint text for the classroom code was added to erase any doubt and save the user time.

The pop-up email confirmation text:

  1. Was created to build trust and let the user know we take their information and safety seriously.

  2. Reassure the user that they are still on the right path.

  3. The "resend email" button was a necessary add-on to allow the user to complete the task.

  4. The icon was used to congratulate the user for successfully filling out the registration form.

After:

My main goal for the onboarding screens was to make them less confusing and wordy.

  • First screen: In the original wireframe, the phrase "share and care with your classroom family" was confusing and didn't explain or describe PakPak's purpose and benefit. Changing the phrase to something more descriptive would help eliminate confusion and get the user excited for all that PakPak has to offer.

  • Second & Third Screen: The original wireframe explained what the user could do with PakPak. While making them two separate screens may seem like more work for the user (having to swipe or press "Next"), it was a better way to get all of the information to the user without crowding the screens with words, causing cognitive overload. Each screen was able to be short, concise, and informative.

  • The Fourth Screen: Creating an "Exchange" screen was necessary to give the user an idea of what happens after something is donated or claimed.

  • The Fifth Screen: Our original list of things not to do with PakPak was too long, overwhelming, worrisome, and only focused on the negative. To make it more encouraging and digestible:

    • I added a few "do's" to the list

    • Added visuals and icons so that users can easily identify what is right and wrong.

    • Added a "Learn More" link to lead to a more extensive list, and give the user control over how much information they can take in during this onboarding process.

Questions & Suggestions:

  • Our team briefly spoke about fixing the "anonymous" feature in PakPak. Since we didn't move past the usability test, I decide to remove it from the onboarding.

  • I suggest we conduct another usability test to determine if the mention of "scroll through the feed to view requests and donations" is necessary, or if there is another opportunity somewhere in the user journey.

Summary

This project was the first project that I've been a part of where I was able to create a mobile app from ideation to user testing. It was also the first project that allowed me to get hands-on experience with UX writing.

Key things to mention:

  • While creating the med-fi wireframes for PakPak, we realized that adding each feature and flow in our ideation and research phases would take longer than expected. To respect one another's time and commitments, we narrowed down our focus during usability testing.

  • We set the intentions to show the parent and teacher flow of donation without incentives and the extra features to see if our solution would still address the needs and goals of the user types.

  • In the future, I'd love to revisit this project as a UX writer and see what we can solve with the new skills we've all acquired in the past year.