Role
UX Designer
Deliverables
Journey Maps
User Flows
Site Map
Wireframes
Prototypes
Presentations
Tools
Figma
Slack
Notion
Vowel
Duration
9 Weeks
Nov 2022 - Jan 2023
Process Highlights
Product Team
I was one of 5 designers on the design team, working in tandem with the research team and product strategy team. Everyone on the project were volunteers working through Tech Fleet. There were 17 people total on this project.
Methodology
This project consisted of 4 agile sprints lasting 2 weeks each, with a week for holiday break. 9 weeks total. We used the design thinking process to continuously discover and design.
Responsibilities
We were expected to participate in a daily standup in Slack, design team meetings 4 times a week and sprint planning, presentation, and retro for every sprint. I collaborated with the team on all deliverables but focused especially on Authentification & Onboarding.
Project Plan
We used a Kanban board on Notion to manage the project.
Case Summary
Challenge
Safe Place International (SPI) aids doubly-marginalized communities (primarily refugees identifying as LGBTQIA+ and/or single mothers) through holistic development programming. SPI is looking for a way to keep the graduates connected to the community.
How might we create a community platform for SPI graduates and members?
Graduates are not comfortable sharing on social media.
"Our WhatsApp groups are maxed out at 400 and we have about 750 students."
- SPI Client
The community has a 50-70% drop off rate after graduation.
Solution
Create a user portal to provide the SPI community members with a safe platform to continue connecting and empowering one another after graduating from the programs.
Background
Tech Fleet picked up this project after a small team had used SPI as a client for a hackathon. The materials from the hackathon gave us some research and insights to be able to hit the ground running. Our goal was to build a safe and inclusive portal that would further SPI's mission of community, education, and resources. We focused on our users' unique needs for the platform: safety, community, and resources.
Safety
Help graduates feel secure in the site by integrating features such as an access code, security questions, share options, and the quick exit feature.
Community
Allow graduates to connect with one another through a discourse feed that includes comments and reactions. Graduates can join groups and add friends to create deeper connections with other grads.
Resources
Refugees and those in the LGBTQIA+ space are at a higher need for support and resources. The site offers support and SPI is planning to expand on the resources available by adding a reporting feature.
Discovery
We started this project by reviewing all of the material from the hackathon research and deliverables. We met with the client to go over all of the features and prioritize the more important ones for the MVP. We decided on 6 Priority 1s (P1s) for Phase 1:
Authentification & Onboarding
Quick Exit
Feature
Discourse
Feed
Profile
Management
Reports
Feature
Low Bandwidth
Considerations
Hurdle 1
We had limited access to users at the beginning of the project. The client was getting together graduates for interviews and testing but it would be weeks before we would be able to hear from users. We were able to ask client questions about the graduates and work with the research team to perform exploratory research.
The design team started their own research by collaborating with the research team on Competitive Analysis as well as separate research for low bandwidth considerations. The research team was also able to glean some insights from different SPI social media pages.
We dove into the hackathon persona to craft user journeys, HMW, and user flows for each P1. These were collaborative exercises and we became very good at giving feedback as a team. The user journeys helped us to gain empathy for the user at every step of the process. We were able to define major pain points and conduct a How Might We workshop to dig deeper. As we started piecing together solutions we also began to prioritize features. We used user flows and a Site Map to organize the screens and provide information architecture.
Design
When we had a clearer picture of our users and the challenges they were likely to face, we started sketching using the Crazy 8s exercise. We brainstormed and gave critiques for each of the P1 features. This allowed us to quickly produce innovative solutions for each feature given our constraints.
.png)
Afterwards we transitioned our sketches into low-fi wireframes and gave design critiques. I specifically focused on designing Onboarding & Authentication, Profile Management, and Reports.
Hurdle 2
There was no client response. It was hard to establish contact with the client so we took it upon ourselves to make some executive decisions. Research continued to do their own secondary research and design made a pivot to include mobile designs. We were not able to get feedback on our design decisions but moved forward with our design system using the research provided.
We modeled our design system after Material Design and made some adjustments to better fit our users. For example we used minimal color and stayed away from rainbow designs. While rainbows are representative of the LGBTQIA+ space, it can also be dangerous to display rainbows for some of the refugees. We went with a simplistic approach for low band width considerations.
We then used the design system to quickly complete Mid-fi designs and prototype for user testing. Research was able to conduct user testing during the holiday break and Sprint 3.
Validation & Iteration
While the design team waited for user testing feedback we continued to refine our design system and perform a heuristic evaluation. These exercises led to a more formal voting process and design unification.
User testing was conducted in 2 rounds with 9 participants from the SPI community. These tests were helpful to get qualitative responses and validated most of our assumptions and designs.
“I like the access code because it’s a good way to keep check with who comes through the site.”
“I can choose who I want to share each information with. It’s nice.”
“This enables everyone in the community to fully express themselves!”
However, there were still a few significant areas in need of improvement.
Reports
Users really loved this feature for immediate help, they’d expect a response within an hour. This was not the intention for the feature.
Access code
Users were confused what the access code was for, where it comes from, and if they have to use it every time they sign on.
Quick Exit
Users felt that the Quick Exit test in onboarding felt forced and they were unsure what to do after they exited the site.
Hurdle 3
The client contact had been silent for a month and, unbeknownst to us, had left the company. Our decision was to move the reports feature to Phase 2 due to lack of clarity from client. The users' needs and expectations are very different from the original function of the feature. There needs to be more research done on the purpose and goal of the report feature and what SPI can realistically offer as assistance. It received positive feedback from users and we hope to test this feature further in Phase 2
We started hi-fi iterations using the insights from user testing and the heuristic evaluation. Some of the feedback we incorporated were tooltips for the access code, a smoother onboarding flow, and a step by step process to test the Quick Exit feature. We also included some more options for the user in profile share settings and the ability to skip the onboarding tutorial and Quick Exit test.
Deliver
(Good news everyone! We were able to get a new client contact!) The design team met with research to uncover more insights from the last round of user testing. We also worked on adding documentation and annotations for hand off while cleaning up files. We were able to put together a final client demo slide deck and an annotated hand off slide deck for Phase 2.
Hurdle 4
Race against time! The design team was still receiving insights from research during the last week of the project. This last push to complete the hi-fi designs, hi-fi prototype, client demo slide deck, and the annotated handoff slide deck was a true test in our ability to work together as a team. We dialed in communication and teamwork with not just the design team, but with everyone on the project. And it all paid off when we got this response from our client…
"
I'm blown away by what all of you have created. It's going to be such a gift and such a big impact in the life of the community... This is like the key to what we were looking for all this while. Having this platform where each and every person will have access to it and would get to see all the amazing things that people are telling them or sharing with them. Wow. I am just, I'm telling you, I have goosebumps and I'm blown away by everything that all of you have shared. Thank you, thank you, thank you!
"
- Cherie, Safe Place International Client
Prototype Links
.png)
Presentation Links
Reflection
I got a taste of how a truly agile process works! We were able to be adaptive in our work flows each sprint. We also got a lot of practice in how to pivot and rally as a team. The team showed flexibility and teamwork by being able to jump in to different areas of the site to help each other meet deadlines. This was also my first experience making a design system from the ground up. It was a daunting task and also hugely rewarding.
Next Phase
Phase 2 is in the works and there plans to be more focused on development and strategy. Some of the Priority 2 features we hope to incorporate are fully realized reports and resources pages, direct messaging, and moderator functions.