PakPak

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.

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

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

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.

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

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.

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

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)

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.

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.

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.

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.