My Role
Full Stack UX Designer — User flows, Prototyping, Design systems
Timeline
4 months — Shipped in July 2022
Results
Key designer in Green String Network's selection as a finalist for the MIT Global Solve Challenge.
Overview
Our team at Develop for Good created an experience that helps young individuals in conflict-inflicted areas by providing a holistic, community-based solution focused on development, mental health, and empowerment. This solution was named "The Ustawi-Thrive Initiative" by the client, GreenString Network.
Jump to Final Solution
or dive into the process
An opportunity to offer support to youth in fragile communities….
Green String Network aims to help communities heal from social and collective traumas. However, they lack the resources and reach to achieve this. The organization needs to leverage the power of unity, but how?
….using a community-based approach.
The Challenge
How might we create a community-based solution to improve the challenges faced by young individuals in conflict-inflicted areas?
01.
The Constraints
Hurdles before beginning the project.
This was a huge initiative - with limited time, members from all around the world, and a lack of cultural understanding.
Duration
The high-fidelity prototype was expected to be completed within 4 months, and was to be approved by the client. It was important for me to finish the assigned tasks before client and designer meetings every Saturday.
Time Zones
Develop for Good is a California based organization. Members of my team were from California, Ontario, and Yucatan, so coordinating meetings will be difficult because of the time difference.
Cultural Differences
Greenstring Network is an organization based in Kenya. So, there were many cultural differences that needed to be addressed. The client updated us on some of them, but it was imperative to keep these in mind.
02.
A Deeper Understanding of the Problem
There is a correlation between childhood trauma and adulthood isolation.
This means that the courses need to focus on using a community approach to heal childhood traumas. Although this was out of scope for our solution, it was a valuable insight that would benefit course development.
According to CDC and KEMC, 70% of individuals in Nairobi have been exposed to at least one Adverse Childhood Experience (ACE). Numerous individuals in fragile areas suffer from isolation, leading to loneliness and mental health issues. Ranking high in collectivism, these individuals benefit from group healing and empowerment. How can this be achieved?
We conducted 6 user interviews to better understand the needs of users. We worked with psychologists who helped conduct the interviews, and focused on key research questions. We then compiled the findings into Miro and grouped them according to themes.
What type of device is commonly used?
What is the preferred device for learning?
Does the user prefer learning on their own, with others, or with the support of a mentor?
Is the 12-week program enough as a course offering?
How can the solution be accessible to a wide range of users?
What are some existing programs that are available?
What languages should the solution support?
What is the primary usage for the solution?
What would help the user feel comfortable using the app?
Research questions we focused on
User insights from interviews
Despite the constraints, starting from the bottom and conducting interviews helped us to identify what features users were truly looking for.
03.
Product Requirements
Defining the exact product requirements from the client helped us fulfill the business objectives.
Most of the target market were Android users!
Multiple Languages
English, Swahili, Arabic, Somali were the most preferred options.
Include Certain Features
Include specific functions such as a chat functionality and the 12-week program
Developing a North Star Product Experience
Empowerment through Accessible Learning
This encompasses user-friendly onboarding, offline access to courses, personalized learning, and progress trackers. A simple user interface would ensure that users are able to navigate and access content easily.
Unlocking Potential through Community
By assigning "Circle Keepers', users can make meaningful connections with mentors as well as other individuals within their community.
Self-Discovery
Users should be able to discover what they love through courses and should be able to continue after the 12-week program offered by Green String Network.
04.
Design system
Taking the time to create a style guide helped achieve a more cohesive look.
Before beginning the design, we created a quick map to ensure that the user is able to seamlessly navigate through the features we were assigned. This also allowed us to determine how many screens we needed to design.
We created a style guide in Figma, choosing to focus on organization colours and ensuring accessibility and inclusiveness were top of mind.
05.
Sketches
And then we brought the vision to life with some sketches and wireframes.
To get the creative juices flowing, I started by dumping all my ideas on one page before sectioning it off into different pieces.
Quick braindump 🧠
From these sketches and wireframes, the next step was to create a prototype and make the necessary changes, utilizing an iterative design thinking process.
06.
Iterations
Circling back: what do users want?
After beta testing with 3 users using a heuristic evaluation user research method, we came up with the following iterations.
Adding pinned contacts
Allowing users to quickly access their favourite contacts
Adding a sort feature
Allowing for enhanced search and navigation
Filter with tags
Allowing users to quickly access their favourite contacts
Adding circle keepers
Allowing users to interact with trained professionals who lead GSN's program
React to messages
This feature is available on most chatting platforms, so users would want to see something similar [Jakob's Law]
07.
Final Solution
The Final Product!!!!!
Individuals can select their preferred language before continuing. They will also be given a quick summary of what the app does (when downloading the app for the first time).
The Rationale
GreenString Network operates in multiple countries. English is often not the only primary language. Therefore, we provided various options (based on our research) while also reassuring users that their preference can be changed later.
A catalog of courses for users to choose from. Currently, this section will comprise of courses created by GreenString Network, including their 12-week program.
The Rationale
One of our findings from user research was that users will want to explore other topics that they are interested in. Creating a dedicated page for courses will ensure that the app is "future proofed".
Users can chat with circle keepers as well as other contacts.
The Rationale
Instead of relying on email communication, a chat feature allows users to get access to resources as well as talk to other individuals easily.
Personal calendar to add tasks as well as events calendar to view important dates.
The Rationale
This feature ensures that users have access to all the events that are hosted by Greenstring. It's a tool to stay organized.
08.
Learnings
Much to Learn, We All Still Have….
Adapting to clients
For this particular project, the client was based in Kenya. There were many cultural differences that I wasn't previously aware of. Therefore, conducting research prior to meeting with the client for the first time was imperative.
Providing options and taking it step-by-step
To ensure that the client is satisfied, each member of the team provided multiple options of the designs during presentations. We also implemented any changes right away so the process wouldn't be delayed. I recognized the importance of client approval before designing further early on, and it saved a lot of time and effort throughout the process. There were some instances when the client requirements changed which required a complete new approach to the design.
Collaborating with tight deadlines
As there were other designers on the team, we had to collaborate outside of weekly meetings to ensure that we met the deadlines. We would provide feedback on each other's designs and also ensure that every screen was consistent with the style guide. The next steps are to finalize the prototype as well as test with actual users before developers begin coding the app!
🐾 Next steps would be to conduct testing with users and continue iterations!