UW Connect

Connect with your school through mobile.

Origin

Google Design Challenge 2020

My Role: UI/UX Designer

Time Frame
One Week


UW Connect originated from the next round of applicants applying for the role of the Google User Experience Design Intern of Summer 2020. The task was to create a presentation between two of the given prompts with Google Slides or a website.

Inspiration

"Your school wants to strengthen the community by encouraging experienced students to connect with new students and help them adjust to campus life. Design an experience that allows mentors and mentees to discover each other. Consider the needs of both mentors and mentees, including how someone may become a mentor and how to connect mentors to mentees."

UX Methods

User Surveys - Problem

81.81% of students had difficulty connecting with students in their first year

36.4% did not attend orientation

36.4% attended orientation and did not find it beneficial

81.81% find it more worthwhile to connect online with mentors

Survey available here!

Mind Map and Brainstorming - Problem

Students entering school often:
  • Struggle silently
  • Fear judgement and weakness
  • Ashamed and afraid of vulnerability
  • Intimidated by discomfort
  • Aren’t aware of the facilities/programs
  • Have difficulty connecting
  • Need help outside outside school

Competitive Analysis - School Peer Mentorship Programs

Why it doesn't work:
  • Requires a lot of effort and commitment
  • No freedom to choose mentors
    • Selection is very restricted
    • Gender and age may be a concern for certain individuals
    • Every individual has a different interest/need for peer Mentorship
    • Language barriers
  • Students are afraid of opening up
  • Not available on all campuses
    • Requires travel
  • Too intimidated to sign up
  • Long wait times

"I'd be too intimidated by them to want to sign up anyways"

Pre-Flow Setup - Solution

By creating a product backlog-like diagram, it will help me create a userflow which will set the foundation to my next few iterations. focus

User Flow

Mobile dating apps such as Bumble and Tinder were inspired my designs and flow, the intuitive swipe design and minimal pages is the idea I was set to replicate. userflow

UI Foundations

I decided to create this mobile application focused for a specific demographic, therefore I focused on my school - University of Waterloo. The colours and designs are based on our website colours, and the style is relative to our school portals. UI Foundations

How does it work?

Design Thinking: Setup

  • Safety: Student Log In
  • Customization: Questionnaire
    • Compatible results
  • Swift Log In: Touch ID/passcode

  • Dynamic filtering
    • Personalize your matches

  • Seamlessly switch between Mentor and Mentee Accounts

Connecting

  • Freedom of choice
    • Connect with anyone
    • Connect selectively

  • In-app messaging
    • Engage without exchanging personal information
    • Discover common interests before meeting
  • Judgement-free
    • No personal photos unless with consent
  • Google Translate integration
Try out the prototype here!

Challenges I Ran Into

I ran into multiple challenges using Figma's Smart Animate during the course of this project. There were plenty of amazing features that Figma has offered their users in order to create the most seamless and realistic prototype available but was also very complicated. Some other challenges came to staying within the restrictions of my UI foundations - although consistency is very important, setting components in Figma create restrictions upon adjusting certain shapes and designs.

What I Learned

  • Figma Smart Animate is an incredibly useful tool
  • More than one iteration will be needed for a beautiful product
  • Figma's code section helps a lot when coding a real working prototype

What's next for UW Connect

  • Mentors/mentees near you (Google Map Integration)
  • Reviewing mentor/mentee option
  • Additional incentive system
  • Favourite option
  • Event postings
  • Integrate school schedule and availability

Built With

  • Figma
  • Figma Smart Animate
  • Adobe Sketch
For more information, check out my presentation on Google Slides!
© JiaJia Kong 2019 - 2020.