DESIGN WITH PURPOSE
GDC screen.png

Student Organization Experience - 2019

 

STUDENT ORGANIZATION EXPERIENCE - 2019

CONTRIBUTIONS: UX DESIGN | USER RESEARCH | INTERACTION DESIGN
PLATFORM: MOBILE
TIMELINE: 1 WEEK

THE PROMPT

Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.

DISCOVERY: THE PROBLEM

I decided to reframe the challenge into a problem with a question so that I could start thinking about the challenge as a problem to be solved. Once I defined the problem I could start searching for the right solution (in this case product) to solve it.

How might I make finding and creating student organizations engaging and accessible for new students during orientation?

So what makes finding or proposing a student organization a challenge to begin with? I decided to document my assumptions so that I could reflect back on how the scope of the challenge had changed.

Assumptions

Finding student organizations are challenging because…

  • Students are often overwhelmed by the seemingly limitless choices

  • Students do not go into orientation knowing what organizations they want to be a part of

  • Students do not have easy access to all the available organizations

Proposing student organizations are challenging because…

  • Students are not aware of what fees or forms are needed for certain use cases

  • Students do not have a platform to directly access other students with similar interests

RESEARCH: USER RESEARCH AND FLOWS

Interviews

I interviewed current students on their past orientation experiences.

For my stakeholder interview, I decided to talk with a program coordinator from my university’s orientation staff.

Current Students

Current students expressed that the orientation experience was overwhelming. Students received many packets for different campus resources like advising, dining, and major programs but not a lot of information or time was spent on student organizations. There were opportunities for open houses but due to conflicting schedules sometimes students missed out on opportunities to connect with campus organizations even if it was something they were interested in.

Stakeholder: Program Coordinator

The University of Maryland Program Coordinator expressed that the orientation was meant to give a broad overview of the university experience and did not give a lot of focus to student organizations. She expressed,

“I do wish we spent more time on advertising clubs because that can make or break a student’s enjoyment of being in college. It’s about the people they connect with more than anything…”

This insight really stood out to me and I tried to carry this sentiment as I began synthesizing the interviews and ideating on product solutions.

Synthesizing Interview Notes into OKRs

IMG_5659.jpg

Objectives + Key Results:

(I will _____ as measured by _____)

  • Objective 1: Create a student profile

    1. Key Result: including student identification and personal information (gender, email,

    2. Key Result: including hobbies

    3. Key Result: including enrolled classes

    4. Key Result: including enrolled major

  • Objective 2: Match students to organizations they like

    1. Key Result: including interests in student profile

    2. Key Result: including geotags

    3. Key Result: including the interests of mutual friends or classmates

    4. Key Result: including students’ major as a factor

  • Objective 3: Give students agency to propose an organization

    1. Key Result: factoring in existing organizations

    2. Key Result: factoring in student interests

    3. Key Result: including access to necessary forms and materials needed to propose an organization under certain use cases

  • Objective 4: Create an intuitive search experience

    1. Key Result: factoring in features for user delight

    2. Key Result: including a personalized search

    3. Key Result: accounting for user error

Mapping a User Flow

Once the OKRs were complete, I began work on the flow. I used methods like swim lanes, sketches, and then iterated a final flow.

Using Swim Lanes

I started the process of creating a user flow with swim lanes to show the different functionalities of the end product. Any pain points with finding or browsing for organizations were reconciled with giving the student the ability to propose a new organization.

I also detailed the sign up process in how it makes use of:

  • Student Identification

  • Student’s Interests

  • Student Major

  • Enrolled Classes

57091486489__E8527B25-F607-4102-84A9-B418A54976F4.jpg

Sketching the Flow

Once I listed the different functionalities separately, I began sketching the flow and what the goals for the end user (a new student at orientation) would be. I also added improvements to the flow that I did not consider while sketching.

Some of the improvements included:

  • Adding a “submit for approval page” - Most universities require students to fill certain requirements when proposing a new organization that need to be validated. This page still gives students agency to propose an organization but also get notified that their request is being processed.

  • Giving students multiple points to propose a new organization - Students should be able to propose a new organization at any point during the experience. Not just through browsing or searching.

57091392627__C27794E9-42FD-4948-9CAE-A5790E7F1DAB.jpg

Final Flow

I then went digital and cleaned up the flow so that it is easy to follow and added some of the improvements I noted in the previous sketch of the flow.

User Flow Diagram - GDC.png

IDEATION: WHAT DOES THE EXPERIENCE LOOK LIKE?

Sketching Ideas

I began sketching out wireframes for the experience. I found that the most accessible way for students to search for and propose organizations was via a mobile experience. Any point where I noticed there could be improvements after a sketch, I went back and added notes outside the screens.

Sign Up Sketches

Sign up should be friendly, easy, and ask for all information that could be useful in finding interesting communities such as:

  • Student Name

  • Major

  • Classes

  • Interests

Interests were consolidated from interviews with the orientation team and my own research of categories that student organizations fall into.

57103198579__45A87EDC-3DD3-40A0-90B1-EE990AC29036.jpg
57103202527__E0A60F07-CB15-4929-9CC9-CF40D5CC6FF8.jpg

Search + Browse Sketches

Students’ experience looking for new organizations should be accessible so I included multiple points for students to casually browse or deliberately search for organizations they might be interested.

57103206374__C6C3A917-A4D9-4A1C-87D5-CF0984CE78F9.jpg
57103209068__FEB26A69-1497-4E5B-9F88-A96CEC61F56C.jpg

Propose Sketches

I wanted to give students an easy experience proposing new organizations with an experience akin to Google Forms.

57103211858__9067D90E-6BAD-4370-974E-35CD1AF2AF17.jpg

PROTOTYPING: BUILDING THE EXPERIENCE — LO FI —> HI FI

Signing Up

Introducing Language and ID:

I wanted the experience to be easy and friendly, which is why the word squad is important to the design.

The user is then prompted to fill out their user ID in which the information gathered (name, username, major, classes) is then validated by the user for accuracy.

Screen Shot 2019-02-04 at 11.48.02 AM.png

A Basic Password Flow

As the user signs up and fills out their profile, they are then prompted to pick and validate a new password.

Screen+Shot+2019-02-04+at+10.08.20+PM.jpg

Building a User Profile

Factoring Interests in

The user is able to choose what activities and types of organizations they are interested in, which is then factored into their final profile.

Screen Shot 2019-02-04 at 10.51.42 PM.png

Completed Profile and Homepage

Once the user validates that all information in the profile matches their interests and information, they can then go to the Homepage, which includes:

  • Organizations or “squads” they are currently in

  • Recommendations for new “squads” based on their current listed interests

  • A search and menu bar

Browsing with Metrics

Under the “squad” recommendations, users can also see how many members are in each organization through the heart icons next to each number.

Screen Shot 2019-02-04 at 11.07.07 PM.png

Searching for Student Organizations

Accessible Search Bar

The search bar is available in the top navigation bar no matter what page the user is on. When the user searches, they are given search results in addition to recommendations for similar organizations.

Screen Shot 2019-02-04 at 11.16.06 PM.png

Joining Organizations through Search

Once the user finds an organization through search, they can also join the organization. When prompted to join, the user is given information such as meeting times and whether or not there is a fee associated with joining the organization. If the user feels they want to change their interest preferences to diversify their choices, they can always change them once they join an organization.

Screen Shot 2019-02-04 at 11.16.22 PM.png

Proposing New Student Organizations

With multiple access points from the menu to failed search results, students can easily propose new organizations.

Screen Shot 2019-02-04 at 11.34.44 PM.png

New “Squad” Proposal Process

The process to propose a new squad is straightforward and personalized. If the organization is for athletics or is getting SGA funding, the results will change to reveal the information needed for those types of clubs. Students are also given validation that their application is under review. Once they complete the submission, they can choose to:

  • Propose a new squad

  • Go back to the homepage

  • Browse new squads

Screen Shot 2019-02-04 at 11.31.42 PM.png

Wireframe Flow in Action

Below is a video of the full wireframe flow in action.

 
 

Visual Identity

For the visual look of the high fidelity screens, I kept to the conventions of Material Design.

I chose easy to read fonts like Latha for the Header and Franklin Gothic for the Content.

I also chose accessible color palettes with shades of indigo and pink.

Screen Shot 2019-02-05 at 12.23.02 AM.png

Hi-Fi Screens

Below is the high fidelity flow for proposing a new organization after a user is unable to find an organization after searching for it.

 
 

EVALUATION: REFLECTION, FEEDBACK, AND FUTURE ITERATIONS

So what did I learn?

  • Each experience is personal. There are so many options to propose or search for organizations similar to how each student’s university experience is personal.

  • Research pays off. I do not think I would have been able to build out what I did without speaking to real students on their experiences.

  • My OKRs were thorough but broader than I thought. I did not get the chance to build out a social feature or make use of geotags. Those features would require more user research which I did not have access to within a week.

  • My assumptions were not far off from my interviews. Being a student allowed me to empathize with the problem. This was a special case and will definitely not always happen but it made finding new approaches to the requirements a bit easier.

What improvements can still be made?

  • Add more browsing metrics - perhaps including measurable outcomes like university engagement, funding, or retention rate.

  • Add a social function - it would be interesting to see how a student’s preferences might change as they gain more friends at university.

  • Add geotags - it would be interesting to see how location plays into which organizations students join.