Do Good (Mobile App & Responsive Website)
Project Overview
Source: Link
The Problem:
Only 3% of children who graduate from the foster care system obtain a college degree. 70% of young women end up pregnant by the age of 21 and 20% of all Foster care grads end up homeless.
Victims of domestic abuse are unable to search for work using traditional methods because they often suffer from PTSD and are unable to create any social networking sites for fear of repercussions from the abusive ex.*
*Source: Link
The Goal:
The goal of the Do Good app is to provide underprivileged members of the community a simple and clear path to access the help and job search support they need to improve their quality of life. The app aims to simplify the process of asking for help.
The Product:
Do Good is an organization designed to support disadvantaged people as they apply and interview for jobs that are more financially stable. The site allows users to quickly make an appointment to discreetly receive a variety of services to support them in their job search including clothing supply, resume and interview tips and resource assistance.
Responsibilities:
All elements of UX research, paper & digital wireframes, icon design, as well as the creation of both lo-fidelity and hi-fidelity prototypes.
User Research: Summary
My research began by considering 2 different populations who struggle when it comes to job search support; domestic abuse survivors and graduates of the foster care system. In both cases, these people do not have a reliable group of friends and family that can help the users network.
After finding a series of videos interviewing members of both groups, there were a few insights that presented unexpected challenges. With domestic abuse survivors, they are unable to have any kind of online presence for fear of being found or targeted by their abuser. This lack of social presence is often a red flag for employers but it’s an unavoidable issue for the survivors. For children in foster care, there are often educational gaps as kids are shuffled between homes and schools. 25% of these kids experience PTSD and 70% of young women are pregnant by the age of 21. Many are removed from their foster homes when they age out at 21 and nowhere to go and now emotional support to guide them into the world. As a result, 20% of foster kids end up homeless. All of these users could benefit from an organization whose main goal is to support that transition from victim to champion.
Persona #1: Delia
Delia is a survivor of domestic abuse who needs to find a good paying job because she needs to provide a better life for herself and her 2 children.
Persona #2: Alex
Alex is a graduate of the foster care system who needs support in his job hunt because he wants to start a career that will support himself and his little sisters.
User Research: Pain Points
Can’t Have an Online Presence
DA Survivors can’t have a searchable online presence for fear that their abuser could track them down. Social media job sites like LinkedIn are not an option for these people.
Lack of Education
Many users have a limited or interrupted education so their user experience needs to be simple and clear with accessibility as a priority since users may have a different native language or a physical disability.
Inconsistent Internet Access
Many users experience homelessness or live in shelters which means that internet access is sporadic at best. They aren’t going to be able to spend hours using the site/app.
Embarrassment to Utilize the Service
Both groups experience embarrassment at their situation, so as much anonymity as possible would encourage usability.
User Journey Map
Considering the needs of this users were especially challenging. With a user who is fearful about having an online presence, I have to ensure that user feels as safe on the app/site as the organization wants them to feel in the building. Additionally, when our users have strong feelings about their situations, we have to be considerate of that. Providing a virtual check in, allows users to arrive without actually standing in the lobby where others might see them. We are also serving a population that may struggle with child care, so knowing that they may need help during their appointment will help staff prepare.
Sitemap
Paper Wireframes
Many of the competitor’s sites were simplistic and felt like a standard template. The mission of this organization is to make those who are less fortunate, feel as though they are having a unique experience. In my design, I tried to think outside of the box and create a unique online experience for the user, without over complicating the design. After exploring sites of high end stylists and styling organizations, I was inspired by their content layout. For the final design, I combined both inspirations for the final option.
Digital Wireframes
In designing the variations of this site, I knew it was critical to consider the users’ accessibility. Many who will require these services will likely only be able to use a desktop computer (at a school, library or current job) or a mobile phone. The mobile applications take into account the fact that users will need to access information quickly and efficiently. Desktop users have a bit more information and visuals to guide them. The Mobile site is a combination of both the app and the desktop to consider users who might not have storage on their phone to download the app itself.
The major task for the app is to allow users to make an appointment to meet with a stylist who will help them find an outfit appropriate for their job interview. This requires a few questions to prepare for the appt. In the responsive site, questions were kept above the fold on the desktop so users did not have to scroll. In the mobile site, scrolling is more natural so we were able to spread the questions out vertically. In the mobile app, questions were separated into pages with clear “NEXT” and “BACK” buttons to facilitate the navigation. Once users have completed the task, they receive a confirmation page. Questions have been broken down into the basic information necessary for a consultant to be prepared & maximize the users time in a fitting.
Dedicated Mobile App
Mobile Site
Desktop Site
Lo-fidelity Prototypes
Dedicated Mobile App
Desktop Site
Mobile Site
Usability Study: Findings
Overall users were happy with the functionality of the app in the usability studies but ran into a few stumbling blocks. In Round 1, many users were unsure of the completion of their tasks so we were able to add a confirmation notification. In many cases, users struggled to know exactly what to do because english was not their first language so incorporating imagery and icons will be helpful.
Round 1 Insights
Users did not receive a confirmation page when they completed a task but were instead returned to the home page, unsure if their task was accomplished. (Mobile Site)
Most users native language was not english, so creating a simple clear option to translate the site would be helpful. Images and Icons would help (All)
Users did not immediately notice the “Confirm” or “Submit” buttons to complete a task. (Desktop Site)
Round 2 Insights
The mobile app has a clear option to change the site’s language preference, but the desktop and mobile sites’ option is buried.
Placement of imagery and icons helped the navigation significantly.
Adding confirmation messages helps users feel confident that they’ve accomplished their task.
Mockups (Desktop Site)
Based on the usability study, we’ve used different containment values to lead the user through the different sections of the questionnaire since the information extends below the fold. We knew that we needed to create a confirmation that the user had completed the necessary task. We created a pop up with information confirming the action and notifying the user that they would be contacted by phone. Once they receive this notification, they are directed back to the home page to encourage them to make additional appointments for other services.
Before Usability Study
After Usability Study
Services - Main
Donate - Main
Clothing Services
Mockups (Mobile Site)
Because this product is geared toward users from a variety of different cultures, there was a lot of consideration of accessibility beyond English speakers. Colors and shapes were selected for their contrast to help users recognize the important elements of interaction. Imagery was specifically chosen to guide users to the pages of which they are in need. The use of circles is a theme throughout the site because it is a common symbol of community, unity and new beginnings. As a result, the circle is used to draw a user’s attention through the processes required on the site.
Before Usability Study
After Usability Study
Home
Navigation
Clothing Services
Profile
Mockups (Mobile App)
One of the things our users mentioned in the research process was that anonymity online is vital. In many cases, people escaping an abusive homelife can be found online by their abusers. Because of this we wanted to highlight the Privacy Policy, both in writing and through the use of a video in an effort to boost accessibility for all users. By connecting the video thru Youtube, users may apply captions to the video in their most comfortable language. They also receive the important information verbally. This puts a face to the company and encourages the user to feel like they are being spoken to, directly. The use of comforting imagery is intentionally applied to ensure that users feel valued, welcome and safe.
Before Usability Study
After Usability Study
Services - Resources
Events
Languages
Services (Spanish)
Accessibility Considerations
Iconography
Pages were designed with iconography and imagery that was consistent across platforms to ensure that users would be able to follow the flow with the help of the visual design. Additionally, each site has provided users with the ability to translate the site into their most comfortable language.
Hierarchy
Typographic hierarchy and containment shapes and colors were applied to help users understand similar information or questions.
High Contrast
Application of high contrast has been applied throughout each design to bring attention to action items for the users.
Takeaways
Impact:
As a public school teacher, I’ve seen the direct impact on young people who come from an unsteady homelife. The lack the support from struggling parents to accomplish their own goals, contributes to a cycle of stress & challenges. A service like the organization detailed in this project can streamline and simplify that initial step of finding a new job. I would hope that a site like this could allow those in need to receive the help and support they require to better their lives and find a fulfilling career.
What I learned:
In addition to the personal challenges the potential users face in their process of finding a job in a predominantly online society, I have learned a great deal about the consideration of the user’s time and efficiency in this app’s design. Many users have very limited access to internet services, so creating a streamlined flow and confirmation of the completion of a task ensures confidence that these users have taken the first step to improving their quality of life.
Next Steps
Further develop the pages that will allow users to upload documents or incorporate information from an existing resume.
Revise the appointment pages to allow users to add on additional appointments. For example, before completing a request for a clothing appointment, users should be asked if they also need resume, interview or resources services.
Thank You...
for taking the time to view my design. I welcome you to explore my additional work on the rest of my site.