The Youth Hub was an app I helped design as part of a Hackathon, and ultimately came second runner up in the competition. This app was intended to help the workers at Henry Street (a non-profit) better publicize their programs to youth participants. I contributed to the stakeholder interviews, user flow development and prioritization, and owned a portion of the visual design.
On January 26th and 27th I participated in a hackathon sponsored by Beyond on behalf of the Henry Street Settlement. Representatives from the Henry Street Settlement arrived with multiple challenges they addressed on a regular basis they felt could be mitigated through the strategic use of technology.
My team’s prompt was to design an app for the participants in the Lower East Side Youth Opportunity Hub, an outreach program for at-risk youth to help them find stable employment, educational opportunities, recreational activities, and other support. The goal of this app was both to enable youth participants find events and outreach programs relevant to them and to help the organizations putting together those programs keep track of their participants. We broke this goal down into the following objectives for the final product:
- Accessible via smartphone (app)
- Ease of use (familiar UI settings)
- Technically scalable and easy to maintain
- Enables timely distribution of information
- Collects user information (demographics and statistics)
- Aesthetically reminiscent of a rec center to escape the stigma of social work or charity
We ultimately designed two separate but connected apps. One for the youth involved in the program (Clients), and one was for the employees of the partner organizations (Organizers). The Organizers app would give them access to the views and experiences of the Client app, but would also allow them a separate space to keep track of the data from their various events and youth clients.
My Contribution: I was an active participant in all the stakeholder interviews, user persona development, user flow prioritization, and wireframe development. Our group split up to develop the high-fidelity mockups, and my particular contribution here was designing the event details page for the web app.
Results: Our team came in second out of all the participating teams in the Hackathon. We were particularly singled out for scaling our technological solution to the resources of Henry Street, while still being mindful of the needs of both sets of users. Our team also sent our final presentation, and all our deliverables to the representatives at Henry Street, in the hopes that they will find them actionable, and have made ourselves available to assist in anyway.
The Hackathon was held by Beyond for the benefit of Henry Street Settlement, a New York-based nonprofit that delivers a wide range of social services, arts, and healthcare programs for more than 60,000 people each year. Henry Street focused their outreach on New York’s Lower East Side.
At the event, Henry Street gave participants a choice from eight different problems the organization was encountering that they felt could be addressed through strategic application of technology. The solutions presented by hackathon participants were going to be judged on the following criteria:
- Business Impact
- User Impact
- Technical Feasibility
- Usability
My group ultimately chose to work on the Youth Opportunity Hub, an outreach program targeting disengaged youth on the Lower East Side.
The complete Hackathon team, "The Magnificent Eight."
Youth Opportunity Hubs are an initiative sponsored by the Manhattan District Attorney’s Office of Criminal Justice initiative. They are programs designed to provide “one-stop” support for at risk youth (ages 13 - 24) who are believed to be at risk of becoming involved in the criminal justice system.
The Henry Street Settlement partnered with five other organizations to launch a Youth Opportunity Hub serving teenagers and young-adults on the Lower East side (the other partners are the Chinese-American Planning Council, Educational Alliance, Grand Street Settlement, Hamilton-Madison House, and University Settlement). Together, they offer a range of program for youth, including:
- Help finding a job
- Help returning to school, getting a GED or getting into college
- Mental health support
- Basketball, soccer, baseball and more
- Fun trips and community events
- Financial planning and access to resources
With this context, we were ready to find out about the specific needs of the Lower East Side Youth Hub, and how technology could help them.
Our first order of business was to interview Matt Phifer, a Deputy Program Officer of Education and Employment at Henry Street, who was able to give us more detailed context on the specific struggles the organization was having with the Youth Hub.
Matt was incredibly generous with his time, and took us into great detail about the struggles his organization was having tracking the success of the Hub. From this conversation we identified some critical pain points:
Inability to track and manage event attendees: The Youth Hub is being sponsored by multiple organizations who held responsibility for different types of events or resources. This made it hard for them to track a Client’s experience across the Hub. For instance, if a client met with a social worker who recommended they go to a resume workshop, it was hard for that social worker to know if they ended up attending it. It was also difficult for organizations to recognize if a Client was new to the Hub or returning. To illustrate this, we learned that although Matt knew that 112 Clients had participated in Youth Hub events, only 40 had open cases.
Difficulty in identifying trends and areas of interest: Organizers might not know until the moment an event is happening how many people are coming or interested. Being able to see RSVPs on an app would help them know which events attract more interest ahead of time. Moreover, by using a ticketing system on the app they would not have to worry about manually signing in attendees and following up with them later, but would have all their information in one place already.
Challenges in getting youths interested and retaining interest in Henry Street and partner events and activities: This highlights a problem that is not unique to Henry Street--it’s hard for institutions to reach out to young people in a way that seems authentic and interesting. Matt thought an App would help potential clients keep track of Youth Hub events using resources they are already comfortable with (i.e. a cell phone).
A solution to these problems had to both make it easy and rewarding for Youth Hub participants to engage with the Hub using resources they already had available (i.e. a smartphone) and make it easy for social workers, program coordinators, and stakeholders in each of the organizations sponsoring the event to track information. With this information, we outlined our objectives:
- Accessible via smartphone (native app / web app)
- Ease of use (familiar UI settings)
- Technically scalable and easy to maintain
- Timely distribution of information
- Collect user information (demographics and statistics)
- Change the stigma of “social work” as a charity to more of an open rec center vibe
We knew we were designing for two users: the youth participants in the program, and the representatives of the organization managing the program. Accordingly, we developed two personas that could be representative of these groups:
Our two users stories.
We chose age 18 for Ron because it was a threshold age that would make him conceivably accessible for programs aged at young adults (career development) and teenagers (e.g. education). We also opted to make him partially homeless as Matt had highlighted housing insecurity as being a frequent issue for youth in the program, which made things like asking for an address difficult and potentially fraught for users who were being onboarded.
Chelsea was representative of all the employees of the organizations involved in sponsoring the Youth Hub. We chose to make her a social worker as Matt had highlighted them as being hands on and mobile in their work and outreach, and also primary points-of-contact for youth in the programs.
To aid the planning process, we mapped out all the interactions between Chelsea and Ron in our consolidated User Flows, and identified points where they could be enabled by technology.
Early brainstorming of our user flows on the whiteboard.
Our finalized User Flow.
We then tried to break down this general relationship map into the specific needs of each participant:
Since we were working with limited time in a Hackathon environment, it was critical that we come to a consensus on feature prioritization before we began building the solution.
Must Have |
Could Have |
Should Have |
|
|
|
As we were working with a limited timeframe, we prioritized the five screens we needed to design to present to the judges:
Our hastily drawn wireframes.
Ultimately, we decided to do hi-fi prototypes of the login page, the Client home page, the Client profile page, an event details page, and a visualization of the main landing page for Organizers.
We used the colors on in an informational brochure about the Youth Hub inform our color pallet.
We also used the format of this brochure to inform some of our aesthetic decisions within the app. Most notably, the hexagon shape of the brochure designed to underscore a “hive” motif in the marketing--we utilized this hexagon in the profile images of the app later.
Our team had multiple UX Designers, so after agreeing to a color palette and font structure we were able to breakout separately to design the high fidelity mockups.
My individual contribution to the high-fidelity mockups was designing the event details page. I knew Matt wanted his youth users to utilize this app the way they would Facebook or any other app, so from the beginning it was incredibly important to me that this page be laid out in a way that was familiar for its users.
Accordingly, I conducted a very quick benchmark of the event details page on a Facebook event, a Meetup event, and an Eventbrite.
Comparing the event details of three different apps.
I used this to prioritize the information that should be on the event details page:
- Event image
- Title
- RSVP Options
- Date & Time
- Location
- Event Details Preview
- Tags
- Host
- Other Attendees
- Map with Event Location Highlighted
- Other Suggested Events
Once I had these prioritized I sketched some initial ideas for the screen.
However, after regrouping with my teammates and reviewing their pages, we decided as a group that the ticket scanning function should go on the event detail page instead of the user’s profile page. This would help users who RSVPed to multiple events keep track of their tickets. This feature is incredibly important to the app, as it would allow social workers like Chelsea to more easily keep track of who attended events.
Our team presented our final project proposal to judges from Beyond and Henry Street Settlement. The important aspects were that we were able to scale the technological requirements to the capabilities of the Henry House Settlement house while also serving the needs of both the youth users and the organizations.
In terms of concrete deliverables, while the time-limits of a hackathon did not allow us to turn in a final polished product, it did allow for some strong initial high fidelity mockups:
The login page for the app.
Landing page for Client users.
Client users profile page.
The landing page for Organizers.
Organizer dashboard visualization.
Our developers were also able to begin to envision the functionality of the final apps as well. While these prototypes were preliminary, they were a solid foundation to the final apps.
Ultimately, our group came first-runner-up in the Hackathon.
I was incredibly proud of the work our team did in a short amount of time. The fact that we spent so much of our upfront time talking to Matt and planning out our approach helped us be much surer of our decisions later on. The biggest benefit of this planning time was that it made us mindful to be realistic about our solution; we did not want to design something so convoluted it ended up being a time sink for Henry Street. Matt and his colleagues had already told us that across the organization they were responsible for maintaining over 30 databases, all responsible for tracking different pieces of information for different government entities and grants. We did not want maintaining this app to turn into one more data-set employees had to fill out when they could be spending time with clients who needed them.
Our two app solution, we hoped, would help automate things employees spent time doing manually. A quick scan of a users ticket could help keep track who actually came to events, and having some information about that youth participant already on hand would make it easier to reference it quickly.
A major challenge our team faced was that we had four User Experience Designers, 2 Product/Project Managers, and only two developers. While the UX Designers were able to quickly put together wireframes and mockups to present to the judges, our developers did not have the equivalent firepower to put together an initial prototype of the apps. While they got further than we expected, and definitely laid a solid foundation, our presentation relied more heavily on the mockups to convey our ideas.
So many design challenges revolve around helping companies on the cutting-edge of technology, so it was surprisingly difficult to go back to the basics and think about what resources people who don’t actually work in technology need to make their lives easier. During the early ideation phase we tossed around a lot of ideas for more sophisticated databases, detailed user profiles, two native apps, but quickly realized that many of those had the potential to become a burden instead of a tool. Our two app proposal was not the most elegantly delivered solution, but it was developed with a realistic understanding of what would actually be helpful to our stakeholders, which ultimately helped us stand apart from the group.
