1871’s Hackathon for Good was a virtual Hackathon held in June 2021. The purpose was to bring together all our communities to make a difference by way of inclusive innovation. True Star Foundation, an organization that’s making a difference in the lives of Chicago youths, is looking towards leveraging technology to help enhance the work they already do. Spoiler alert - our team won 1st place!

Team
Ashwin Raman (PM), Carson Berish (PM), Enrique Casas (PM), Juliana Provvidenza (UXA), and Jarod Barrera (PM with Dev perspective)

Fun Fact
Our team's name was “Onion Peelers”. We joke about how problems can grow in layers of complexity (like an onion) in discovery. We want to peel away at the layers to understand the core problem and deliver the ideal solution.

Role
UI Designer

Deliverables
Mockups
Prototype walkthrough
Style guide
Presentation pitch
Product one-pager

Tools - Figma, Adobe Suite

True Star Foundation

True Star Foundation operates a unique model in which they hold weekly after-school, in-school, and summer programming where students are educated through a variety of disciplines in the media industry. Students not only learn about the profession, but they also work cooperatively to produce professional quality work in each area.

Their programs list includes journalism, radio/podcast, digital marketing, photography, graphic design, and promotional/community outreach.

Opportunities Exploration

As we learn more about the foundation, we want to ensure we deliver the greatest impact within the timeline of the hackathon (2 days). To do this, we wanted to pinpoint the jobs-to-be-done (JTBD) to identify hidden segments of opportunity. After we created a list of all the jobs-to-be-done, we started to trim down and prioritize what was in scope towards True Star Foundation’s needs.

Youth Empowerment

Inspire youths to achieve by sharing work to promote self-confidence, empower their voices, and validate their work.

Energizing Growth

Stimulate sustainable engagement with youths while providing value in honing their professional skills.

Scale collaboration

Bridge the gap between youths, mentors/instructors, and alumni to provide guidance and interaction in a safe space.

Problem Statement

Due to the demand for a digital expansion of the core True Star Foundation program experience, how might we provide student opportunities and deepen the connections of the True Star community based on interest?

The solution would have to be web-based so it could be easily accessible to find and connect students through youth-led interest groups. A web-based solution would also lower the specialist need for a mobile developer since True Star Foundation has an existing Wordpress platform and other social media outlets.

Visual Exploration

True Star Foundation wants to ensure their product experience is marketable to today’s youths (GenZ demographic). I provided a mood board to ensure we were unified on the overall visual brand language (look & feel). This allowed me to accelerate the prototyping build by creating a rudimentary design system. This provides extra value to True Star Foundation as a valuable tool in building out any more potential features post-hackathon.

Component Library

In order to move and iterate quickly, I invested a core amount of time building up a rudimentary UI component library to act as the single source of truth. This allowed me the ability to save time by making universal changes within a single component.

Explore

The Explore tab allows youths to show off their work and involvement, giving each student a chance to be in the spotlight and having a core area to drive sharing through external link outlets.

• Provides the benefit of uplifting self-confidence, strengthening motivation, and validating ideas.

Classes

The Classes tab houses all of the True Star Foundation’s educational material and lectures. Since their content is scattered across multiple channels, True Star Foundation needs to easily adapt old and new content to a singular space and ensure the content is easily accessible to their student youths.

• Bridge engagement between student youths with their instructors, mentors, and alumni to facilitate personal and professional growth.

• Allows room for growth for True Star Foundation’s main program offering while making it easier to search and filter content for student youth.

Profile

The Profile tab allows youths to create a personal reflection of their involvement with True Star Foundation along with other youth groups (Spaces) and student projects. They can display their personal bio, interests, and fellow collaborators. Badges act as an accomplishment as student youth users grow in the True Star community and get more involved with digital and in-person engagement.

• Another area to further benefit youths to uplift self-confidence, strengthen motivation, and validate ideas.

• Generate constant engagement with the youth while providing value in honing their professional skills.

Spaces

One of the core features is the Spaces tab. A collection of communities based on student youth’s career goals and interests while aligning with the structure of True Star Foundation’s program offerings. Student youths can join a Space with fellow peers through shared interests. They can also create new Spaces for any untapped interests or career opportunities.

• Generate constant engagement with the youth while providing value in honing their professional skills.

• Bridge engagement between student youths with their instructors, mentors, and alumni to facilitate personal and professional growth.

True Star Spaces step by step walkthrough:

1. Click on the hamburger menu to open navigation.

2. Open Spaces (between Shop and Contact) which opens the main solution: True Star Spaces and redirects the user to the Explore tab.

3. Browse upcoming classes by viewing the Classes at the bottom navigation.

4. View Profile to see their overall accomplishments, metrics, badges, and personal content.

5. Find a new space to join under Spaces based on interests, new spaces, or other promoted categorization.

6. Find more information regarding a new space card “Let’s Talk Music”

7. Review the details of the space and Join Space

8. See what projects are active under the Projects tab

9. Check out a sponsored project “Weekly Podcast Recording”.

10. View the discussion within the Project and introduce yourself.

11. Go Back and Apply.

We had 3 minutes to pitch our solution to judges.
The solution was judged based on the following categories:

• Originality of the Solution

• Feasibility of the Solution

• Alignment of the Solution

• Overall Delivery of Pitch

• Overall Design of the Solution

We each individually worked with each other before, but this hackathon was the only opportunity where we were given a chance to work collectively as a team. Even if we didn’t win, we had fun bringing a vision to life and it amplified how important it was to us to get that vision down as early as possible.

We also realized just how important it was to quickly identify what was of value to the users and then look at the scope. We further refined these insights with considerations on the presentation and judging criteria. This was the secret to our win!

As far as the next steps, our team wasn’t able to continue with the project outside of our day-to-day responsibilities. We warmly hand off our deliverables and provide professional insight on immediate next steps. We hope to see True Star Spaces very soon!