An Anti-Bullying Ux Case Study
OCTOBER 2019 | UX + UI DESIGN
THE PROBLEM
Bullying is an epidemic.
It occurs everywhere: our communities, schools, social media, and homes. Bullying is linked to many negative, and sometimes lasting problems, including impacts on mental health, school performance, substance abuse, and suicide.
Even with the growing awareness it still remains a serious problem
THE GOAL
Design a desktop application that combats bullying and helps youth who are victims.
MY TEAM AND ROLE
I was paired with another great UX Designer, Kassy Pedersen on our first ever UX project.
We worked together through the research and ideation phase to establish our core features of the website. We would then split to finish the project ourselves.
I went on to design the user experience from lo-fi wireframes, user-testing, to the hi-fi prototype.
This provided it’s own pains and gains. While I was excited to get started with the hi fidelity I also missed the benefits of closely collaborating with someone else.
Lucky for me, Kassy and I still reached out to each other when we needed it.
Our first step was to find out who our users are, what they needed, and why they needed it.
To get the answers to these questions we created our surveys and scheduled interviews with experts and youth.
While interviewing youth we had to be sensitive with the way the interviews were conducted and understand some may not want to talk about it.
Our surveys proved to be a great resource as they could be anonymous.
From our initial research it was confirmed that the majority of our youth are experiencing bullying and the emotional and mental affects it can have.
So, why aren’t they seeking help?
At first, I assumed that it’s because no one wanted to talk bout it.
Our data showed us that wasn’t true, they didn’t feel like they had a safe place to open up with someone who could not only understand but even relate.
All together this information gave us a general idea of our target user. However, it did not give us the whole picture.
At this point we realized we could have conducted our user survey’s better with the questions we asked so we produced a second one.
With our limited time constraints we took the information we had and continued our research with comparable websites and programs.
We found they did a great job of providing information and anti-bullying campaigns. Yet, when we put all the research together we noticed two potential gaps.
- The resources presented on these sites focused heavily on STOPPING bullying
- The majority tone was directed at parents and schools
What’s missing? What about our victims? What about during or after the bullying has taken place? How do we help them?
After compiling all of our research findings my group and I decided to have two personas, who had similar goals, but had different expectations, needs and thoughts.
We did this because, in our findings, we knew that the solution needed to go beyond just stopping bullies — it needed to help the victims.
What if we gave the necessary tools directly to YOUTH, to heal and empower themselves in a more personal manner than just articles and videos?
Our users are victims helping victims
Key objective:
Eliminate the effects bullying has on todays youth, by creating a safe environment to cope through a mentorship program for kids that have been or are being bullied.
Challenges:
Creating a positive experience for two key users was our first challenge.
Incorporating a mentorship program also introduces other challenges with ensuring trust and security.
As a team, we grabbed our sticky notes and listed out user goals, tasks, and all ideas for possible solutions. At this point we had a wall full of stickies, a pain point of having two personas.
How could we put this all together?
We sorted through what we had to determine what was needed and what we could take away until we established our MVP:
- Empower users with information to understand and take action
- Become an adult mentor
- Find an adult mentor
This process not only continued to help generate ideas but helped us to determine what to build to maintain a user-centered product.
| Our user story map was clear and we were confident with what we had, however as this being our first user story map it would continue to evolve.
We moved on to creating our user flow and testing through card sorts. A process I found really enjoyable as it provided more feedback and information than I expected it to.
Sketch
Sketching our idea was an exciting next step.
We told ourselves to just sketch, 10x10 style, sketch out every iteration and idea we had.
We came back together, talked about the things we liked and didn’t like until we were able to combine our ideas while maintaining our user goals.
Lo-fi
We divided up the webpages between the two of us and started working on our lo-fi wireframes.
I individually took over the sign up and joining the mentorship program.
From the beginning we struggled and continued to struggled with having two user personas to design a positive experience for our mentorship program. At this point I decided to focus on primary persona, Emma, and create a clean mentor process.
I would later adapt that process to becoming a mentee with the needed adjustments.
Once we felt like we had a good foundation of wireframes we put a prototype together for user testing
| At this point I was getting really excited to see things coming together more — it might have been a little premature as during the user testing process our project would make some big changes.
Getting design and user testing feedback is essential in the UX design process.
During our first design review we received really valuable feedback. With that feedback came the challenge to assess the quality of that feedback.
One recommendation we received was to include a section dedicated to parents.
At first we thought, “great, we will include a parent’s section.”
However, we felt it contradicted our research and ultimately made the decision not to.
However there was feedback that would leave an impact on our project.
01. Copy
When it came time to add in copy I was faced with one of our biggest challenges yet.
The site was based on a mentorship program between mentors and mentees
Although mentee was the technical term it was not the guiding voice we wanted on the site.
This was confirmed through reviews and user testing.
I reached out to fellow UX Designers to help spark some new ideas on what other term we could use in replace of mentee.
From Harry Potter houses to JV and Varsity teams we couldn’t find anything that fit so we decided to get rid of it completely and attempt to unify the mentorship program as much as we could.
The decision to replace the word “mentee” required us to rethink our whole user flow.
At this point, I learned how silly it might seem, but how important one word could be.
We spent the next day or two back at the white board, making changes, removing pages and remapping our user flow.
Our goals remained the same but the way we would go about it would dramatically change.
02. Mentorship Program
This was the most difficult part of the design process for me. The biggest pain point was: We had two key users.
As noted above, this created several challenges for us:
- Content focused at mentors and mentees
- Creating two account types
- Mentorship application and matching
- Ensuring trust and safety
Our two users would come together at some point but their expectations, needs and thoughts are different. Creating two positive experiences bringing them together through a mentorship was complex with our time constraints. Before I even got to hi-fidelity we had reworked this flow over and over again.
The biggest change was when we took away mentee and tried to unify the process.
In doing so we had removed multiple pages, I honestly felt relieved. It finally felt so clear and simple now, for mid-fi that is.
“perfection is when there is nothing left to take away”
I believe that is true; it proved valuable through out our design process. However before I continued with my hi-fidelity mock ups after removing those pages I did another series of user testing to make sure we had achieved “perfection”.
After testing it was obvious we had taken away too much.
There was friction in our flow and users were confused by a lack of information that originally had given our site value.
Working through my hi-fidelity mock up I reworked my user flow for the last time.
I focused on keeping the mentorship process simple while maintaining value and information.
03. User Onboarding
User onboarding is the system of actively guiding users to find new value in your product.
Frankly, our site was lacking quality user onboarding.
We improved the ability of our users to use our product by making it easier to use, understand and feel safe using the site by adding or improving features throughout the website.
To name a few:
- Conveying value
- Progress bar
- Guided introduction
- User success
I wanted to create something that was clean, yet fun and inviting, somewhere you wanted to be and hangout.
The colors I picked and diverse images would solidify that feeling. I went with bold, yet all lowercase headings to keep a relaxed tone.
I’ll admit in previous graphic design projects I was used to clean and sophisticated style guides. Lots of colors and patterns were out of my “comfort” zone but I was excited for the challenge. I received some of my greatest feedback on the look and feel.
Connecting mentors with youth. By matching youth with trained adult mentors it guarantees youth that there is someone who cares about them, assures them they are not alone in dealing with day-to-day challenges of bullying, and get help anytime, anywhere.
Safe Place. By providing mentors and a forum youth have a safe place to talk openly and relate.
Knowledge is power. Empowering youth by providing them with the skills and tools they need to identify, cope, communicate, and self-discover. This enables victims to experience their life in a different way.
Special thanks to kasandra pedersen for all her support in this learning and growing experience in our first case study. Thanks to DevMountain and my mentors for the guidance through this project.
