YIFANG LI
  • Bio
  • Selected Work
  • CV
  • Contact Me

An Application For Browsing, Searching, And Proposing Student Organizations

DESIGN CHALLENGE: STUDENT ORGANIZATION APPLICATION

Year: 2018 | Individual Project | Skills: Survey, Paper Prototyping, Low-fidelity Prototyping, High-fidelity Prototyping (Axure), Usability Testing

INTRODUCTION

The goal of this design challenge is to design an experience for new students to browse, search, and propose new student organizations. This project shows how I create a design within limited time (2 days).

Presentation slides can be viewed via this link.

PROCESS

  • Preliminary Research: 2 hours
  • User Study:
             - Survey (Constructing survey + Data collection): 10 hours
             - 
Interview: 30 mins
  • Persona & Design Objectives:  1 hour
  • Ideation & Wireframing: 4.5 hours
  • High Fidelity Prototype: 4.5 hours
  • Usability Testing Proposal: 1 hour​​

STEP 1: PRELIMINARY RESEARCH - UNDERSTANDING THE PRODUCT

Since I have little exposure to student organizations, I first did a thorough review of several universities’ student organization pages (e.g., Clemson University, Georgia Tech). In this chart, I list the potential users, the time and environment that they may interact with the webpage/ application, and the possible interactions.
Picture

STEP 2: REVIEWING EXISTING PRODUCTS

Universities usually have the student organization webpages on their own websites. I select Clemson University and Georgia Tech for a review.
TigerQuest (Clemson University)
Pros:
  • Help users to narrow down their search by selecting “Categories”
Cons:
  • Since the number of the organizations is very large (645) and they are listed alphabetically, users are unlikely to browse the latter part of the list. Increase physical burden
  • Provide very limited information of the selected organization. Not friendly for new students​
Picture
Picture
Student Engagement Center (Georgia Tech)
Pros:
  • Upon clicking on an organization from the list, a pop up window (2nd screen) of a brief introduction shows up which does not overwhelm users
  • Provide more details of an organization which are useful for new students (e.g., events, news)
Cons:
  • Unlikely to browse and investigate all organizations. Increase physical burden
  • Only official information is provided. Lack of practical information of an organization (e.g., reviews from current/ prior members)​
Picture
Picture
Picture

STEP 3: USER STUDY - IDENTIFYING USER NEEDS

I conducted a survey to understand users’ previous experience and their expectations on the new product. Q1-7 are multiple choice questions. Q8 is an open-ended question. Due to the time limitation, I collected 22 responses from students at Clemson University.

  • What is your gender?
  • What is your ethnicity?
  • ​What year are you in?
  • Have you ever joined a student organization at your college?
  • ​How did you get the information about the student organization?
  • Please rate this item: I think the student organization page in my university provides me with enough information.
  • ​​Have you ever proposed a student organization?
  • What kinds of information would be helpful for you to make better decisions on the student organization's selection?
Quantitative Results
  • 73% of the participants have (previously) joined a student organization.
  • 50% obtain information from friends or members of the organization, while 27% mainly rely on the university webpage/app.
  • 64% states the student organization app provides insufficient information.
  • Only 9% have proposed a student organization.
Picture
Qualitative Results
Participants also provided qualitative feedback on the additional functions/information they needed when selecting student organizations:
  • For new students who are unfamiliar with any organizations, the product should provide them recommendations based on their needs.
  • The reviews and ratings of organizations from prior/current members should be provided.
  • When browsing organizations, they’d like to have a save function to later comparison and decision.
  • The product should enables viewing past events/photos of an organization to give new students a better overview.
Ideally, I should obtain more information from students who proposed an organization. However, due to the time and sample constraints, I only get the below feedback:
  • For students who propose an organization, currently they could only use written form to register an organization and get approved after a long wait. They hope to have an online application portal.

Follow-up Interview
To gain a deeper understanding on students’ requirements of the product, I conducted an interview with one female student.
She agrees with the students’ needs from the survey. Additionally, she provided:
  • Have a better visualization of the people and the network within one organization, not just a roster (These people are who you are going to build friendship with!)
  • Not just review and ratings, it’s better to clearly list out the pros and cons of an organization like in Glassdoor company review
  • Know the estimate workload of an organization, so students can choose the appropriate one based on their schedule

User Needs Summary

  • Other than the existing official description, new students need more information from different perspectives of an organization.
  • For new students, the product should provide recommendations based on their needs rather than browsing and searching.
  • When seeking information, new students are mostly relying on 1) friends or current members recommendations/invitations and 2) student organization app/webpage. Hence there is a need for a tool which can integrate these two sources. For example, using our product, a new student can scan the QR code on a current member’s phone to accept invitation.

STEP 4: PERSONA & DESIGN OBJECTIVE

Picture

Design Objectives

New Students: Provide organization recommendations based on students’ needs. Provide adequate information from different perspectives of an organization such as members’ reviews, estimated workload.
Members: Easily invite new students to join. Be able to rate and leave comments on their organizations.
Proposer: Create a hassle-free experience to propose an organization.

STEP 5: IDEATION

Option 1: Web Page / Webapp
Pros
  • Does not require app install
Cons
  • Hard to enable personalization (e.g., ask first-time users questions to generate recommendation)
  • Cannot enable offline access​
Picture
Option 2: Standalone App
Pros
  • Provide personalization. Track students’ engagement and provide custom recommendations
  • Leverage device capabilities (e.g., camera)
  • Enable offline access
Cons
  • Require app install
  • Need to build user base​
Picture
My Decision: Standalone App
Based on the the number of pros of standalone app, I decide to choose it. Note: During orientations, this app could be introduced to new students, hence user base is not a big problem.

STEP 6: WORKFLOW & LOW-FIDELITY PROTOTYPE

Workflow 1: New Student Workflow
I created the wireframe/low-fidelity prototype in Axure. A logical flow (text + wireframe)  for new student is shown in the following slides. I leveraged design elements in Google Maps and Google Shopping.
Picture
Picture
Workflow 2: Current Member Workflow
The main functions I demonstrate here include 1) inviting new students and 2) adding a review.
Picture

  • For example, during social, a current member may introduce his/her organization to a new student. The member can go to that organization profile page under “Your Organizations”, and click “Invite others” to generate a QR code. New students then can scan this code to join.
  • It is also applicable when an organization requires members’ invitation to add new students.



​
​
  • Current or previous members can review their organization by providing 1) rating, 2) pros, 3) cons, and 4) comment.
  • Members can check “Post anonymously.”
Workflow 3: Proposer Workflow
Picture
  • Scrolling down the browsing page, there is a “Propose organization” button.

STEP 7: HIGH-FIDELITY PROTOTYPE (USER JOURNEY)

Wyatt (New Student)'s Journey
Picture
Picture
  • Wyatt is so excited about the upcoming adventure  at Clemson University!
  • In the orientation, he was recommended to use an app that could help him search and join student organizations.
  • After installing and opening the app, Wyatt decides to answer a few questions to get organization recommendations.
Picture
  • Awesome! A list of recommended organization is generated!
Picture
Picture
  • Besides the recommendation, Wyatt also explores organizations by himself via manipulating the filters.
  • He clicks on the little magnifier, then a search bar shows up.
Picture
Picture
  • He remembers his friend Lindsay highly recommends him to join American Sign Language Club, so he searches it.
  • Wyatt then looks at the organization profile page.
Picture
Picture
  • He would like to know the members. Different circle colors mean different roles.
  • By clicking the blue circle, Amy, the organizer’s profile shows up.
Picture
Picture
  • Wyatt is very interested in this organization and would like to join. By clicking the join button, he can send request.
  • Some organizations requires members’ invitation. If Lindsay, the member presents, Wyatt can tap “Get Invitation” button to activate the QR code scanner. Lindsay can also send Wyatt the QR code, then he can choose it from album. Or, send a text invitation request to Lindsay via this app.​
Lindsay (Current Member)'s Journey
Picture
Picture
  • Wyatt and Lindsay are having dinner together. Lindsay knows Wyatt is interested in American Sign Language Club.  She goes to “My Organizations”, chooses this club, then clicks “Invite Others.”
  • Her invitation QR code is generated. Wyatt can scan it to accept invitation!
Picture
Picture
  • Being a member for two years, Lindsay would like to share her experience with others.
  • She first taps stars, then writes the pros and cons, and additional details.
  • If she has some negative feedback, she would check “Post anonymously.”
Jessica (Propose)'s Journey
  • After browsing all organizations, Jessica could not find one related to Chinese culture, so she decides to propose one.
  • To increase discoverability, there are two entries for proposing. One is located at the bottom of explore page, while the other one is within the ‘hamburger’ button.
  • Great! Just filling all information, her organization will be sent for review!
Picture
Picture
Picture

STEP 8: PLAN FOR THE USABILITY TESTING

Ideally, I should do a usability testing on my hi-fi prototype, then iterate on modifying and testing  until all usability problems are addressed. Due to the time constraint, I provide the plan below.

Participants: 5 participants

The testing will be split into multiple tasks. For each task, I will record:

Performance Data Measurements:
  •    Time spend for each task
  •    The number of errors occurred for each task
  •    The successfulness for each task
Preference Data Measurements:
  •    Rate the ease or difficulty of performing this task (1very difficult-5very easy)
  •    Rate the time it took to complete this task (1more time than expected-5less time than expected)
  •    Rate the likelihood that you would use this feature/task (1not likely at all-5very likely)

After all the tasks, I will measure the overall usability:

Post-test Questionnaire:
  • SUS (System Usability Scale)
back
Made by Yifang Li. 2019.
  • Bio
  • Selected Work
  • CV
  • Contact Me