Uncle Joe’s Resource App

 
 

ROLE: UX Researcher / Visual Design

CLIENT: Uncle Joe's Peer Counseling and Resource Center

TIME: FL21-SP22

DESIGN TEAM: Allison Fong, Sophie Warsetsky

ENGINEERING TEAM: Ege Cavusoglu, Raj Thanker, Jay Kim

 
 
 

CLIENT

Uncle Joe’s Peer Counseling and Resource Center

Highly trained peer counselors that provide WashU students with support and resources for a variety of mental health-related issues

PROBLEM SPACE

the experience of accessing resources was inadequate

the @stillwaiting_washu Instagram features students’ sub-optimal experiences

 

“WashU has a lot of resources out there, but the websites are disorganized, overwhelming, out of date, and just hard to navigate”

TW: Suicide

TW: Eating Disorders

 

with COVID-19, there was an overflow in demand

 
 

students associated Uncle Joe’s solely with peer counseling, missing out on other helpful resources

based on my past research surrounding students’ perception of Uncle Joe’s

“We have so many resources that people don’t know about. They are on our website but no one visits it because it’s overwhelming, not uniformed, and hard for us to update.“

THE SOLUTION

all your resources in one place…

with easy-to-use filters and consistent information

at your fingertips

 

HOW WE GOT THERE

interviews ↔ information architecture

SEMI-STRUCTURED INTERVIEWS

In group and one-on-one settings, these interviews helped us understand the project, create shared goals, and transfer Uncle Joes’ knowledge to our designs.

Participants: Uncle Joe’s Co-Presidents, Resource Managers, Social Media Outreach, and others interested in the app

 

based on our insights, we prioritized

easy and quick ways for users to find what they need

  • filters by topic

  • tagging system

  • making immediate crisis resources easily available

integrating action opportunities

direct links to

  • call or email organizations and contacts

  • get directions

  • explore websites

highlighting the most popular and trusted resources

  • giving users a good place to start

  • uncle joe’s recommended resource icon

 

INFORMATION ARCHITECTURE

After multiple iterations of information architecture and app functionality based on Uncle Joe’s feedback, this map informed our initial app wireframes.

user testing ↔ design iterations

USER TESTING

With multiple rounds of user testing, we made major improvements to our design iterations.

 
 

USER TESTED DESIGNS

Filtering:

 

Approach 1 Approach 2 Approach 3

User Insights:

Keeping topics and features together in one consistent and to-the-point pop-up filter was best.

  • Approach 1 was not preferred because of the separate drop-downs for topics and features to filter by

  • Approach 2 was not preferred because of the increased clicks, the complexity of using more personal language, and the lack of aesthetic consistency with topic proportions

  • Approach 3 was not preferred because it was too busy and required scrolling when multiple topics were selected

Interior Resource Page:

Crisis Resources:

 

User Insights:

  • Including all contact information in one place maintains aesthetic consistency

  • Is not too loud with colors and layout but still encourages action

 

User Insights:

  • Having the crisis resources open upon arrival to the page increases accessibility in a time of crisis and removes the barrier of opening the accordion

  • Using the icon to signal importance as a user scrolls to safety planning is eye-catching

a new behind-the-scenes for Resource Managers

A need we discovered from our interviews with Uncle Joe’s was that they needed an accessible, no-code, and collaborative tool to update resources on the app.

After talking to software engineers, we decided to translate their 50+ page Resource Book into a Google Sheets Resource Database, improving information consistency and formatting across the resources. Using the GoogleSheets API, whenever a Resource Manager updates the Google Sheet the change is live on the Progressive Web App.

 
 

stakeholder engagement

Creating roadmaps and having check-ins with Uncle Joe’s became extremely important as we faced roadblocks with no-code platforms, defending our funding, and pivoting our plans to move forward with software engineers.

  • With a determined roadmap and check-ins, we were able to

    • create a realistic timeline + prioritize tasks while allowing space for future app features

    • maintain the trust in progress + Uncle Joe’s vision

    • keep up with leadership changes within Uncle Joe’s

the resilience of execution

with designers: 

  • weekly meetings with designers to delegate tasks and communicate research findings and methodologies

  • collaborating on design iterations and design decisions

  • organizing the Figma space and annotating designs for engineers

with software engineers:

  • recruiting software engineer mentor for project setup, conventions, and guidance

  • sitting in on weekly stand-ups for “sticky points” in code

    • with our team spanning across 5 timezones for the summer, setting up WhenIsGood and automated Slack stand-up threads increased our communication and productivity

Annotations example from my teammate Allison

THE OUTCOME

working with WashU to create a starting base of 3,800+ users

We worked with the Vice Chancellor for Student Support and Well-Being to incorporate the app introduction and download into WashU’s First-Year Orientation (2,000 undergrad students) and Residential Life to incorporate the app into Sophomore Welcome and RA floor meetings (1,800 undergrad students).

a media campaign involving students and admin alike

Along with creating a physical presence around campus with posters, we plan to utilize our online channels for getting the Uncle Joe’s Resource App out there

  • WashU Offical Instagrams: @washu @washureslife @washu_habif @washu_rsvp

  • Student Organization Instagrams: @unclejoeswashu @washu_su @washu_activeminds @metoowashu

Reflections on…

 

Nothing Ever Being “Done”:

I found that over time our ideas become more complicated and the what-ifs of the product become more exciting. Therefore, nothing is ever truly “done“ or perfect. Allowing and encouraging user feedback within the app itself was an essential move to keep iterating and ensure the app is useful to our audience. I’m extremely excited to see how the app will evolve over the years.

The Power of Mission:

With many actors involved, everyone being busy is a harsh reality, but emphasizing the project’s possible impact on WashU was a huge motivator for me and for my teammates to keep working.

Student Project Sustainability:

Unlike academia, college undergrads move fast. People graduate and student positions are replaced on a semester basis. By creating a long-term plan, clear conventions, and building long-lasting dedication we were able to create something tangible and important for the student body.