Photo of post-it note voting process
An app that helps parents donate items for children within a local and secure community
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.
To build a functional medium-fidelity prototype that can be tested with users.
2 Months: Jan 2021 - Feb 2021
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.2 Post-it Voting
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.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.
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.
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.2 competitive analysis
3.3 User Interviews via phone
3.4 User Personas
3.5 Pain points / Goals & Needs
3.6 Affinity Diagram
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 :
To acquire general information and determine the donation methods used by teachers and families.
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.
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.
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:
Donation and/or reselling organizations for parents, schools, or children.
Visual indicators and features of the mobile apps and websites of existing companies and organizations that focus on reselling or donating.
1. Organizations we researched:
Kid to Kid
Gone for Good
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.
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:
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:
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?
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
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.
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:
The donating goals and needs of each user type.
The content and functionality features that would be needed to meet the goals and needs of each user type.
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
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.
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.5 Usability Test
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.
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)
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
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:
Register for the app
You have a disco Barbie you want to get rid of. Post a donation.
Your son is very excited about coloring these days. Post a request for colored markers.
Search for a hulk toy and claim it.
You remembered the Disco Barbie you posted actually has brown hair. Update that post.
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:
Task Rate (how many tasks out of the total amount of tasks were they able to complete successfully).
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
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
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
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.
After conducting usability tests for PakPak, we received direct feedback that onboarding screens were:
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.
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.
To make the welcome/ register screens more helpful, encouraging, and concise.
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.
When we write for PakPak, we want to use a consistent voice. here's how to sound like PakPak:
Our voice is:
Helpful & encouraging
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.
Welcome & Register Screens:
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:
Was created to build trust and let the user know we take their information and safety seriously.
Reassure the user that they are still on the right path.
The "resend email" button was a necessary add-on to allow the user to complete the task.
The icon was used to congratulate the user for successfully filling out the registration form.
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.