Penn Labs: Club Management
Penn Labs: Club Management

Penn Labs: Club Management

Improving club management for Penn Clubs officers 👩🏻‍🏫

image

About

Name: Penn Labs Design Technical Challenge

Role: Designer

Timeline: September 19 - 21, 2020

Tools: Figma

Context

🤷🏻‍♀️
Now, more than over, club officers need an all-in-one, user-friendly platform to effectively plan and manage virtual events.

For the first time, the Student Activities & Clubs (SAC) Fair this semester was held online on Penn Clubs, a platform created by Penn Labs for students to browse and manage clubs.

As university life moves back online for the Fall semester, many club officers are concerned about ways to keep their club members active and engaged, despite the virtual and remote circumstances. Before Penn Clubs, officers mostly relied on emails, Newsletters, and in-person meetings to relay information to members. A lot has changed.

The Problem

Even though the current Penn Clubs interface is pretty intuitive to use, there are areas of improvements that could make it easier for student officers to manage club events.

Here are several pain points that I've identified:

  1. The current manage club interface first takes the user to "Edit Club Page". After setting up the club page at the start of the semester, this might not always be the first place that club officers look to. Instead, they may want to have other information readily available on the starting page for easy access.
  2. The "events" page only has a list view. Club officers may find it difficult to get a sense of the overall timeline for the semester.
  3. The inputs for the "edit event" section stays displayed even after the user saves it. This not only crowds the screen, but could also be misleading ("Do I clear the entries? Did it go through?").
  4. The "edit event" and "create new event" view both occur on the same section. It would be more intuitive to visibly separate the two features.
  5. The page names on the top bar lack distinction between one another.

User Research

Due to time constraints, I was not able to conduct full user research. However, with the given time, I interviewed 15 club leaders to identify several needs for a typical Penn Clubs officer.

  1. A dashboard with a clear, at-a glance view of important and frequently visited information. This includes upcoming events, unanswered questions, and members list.
  2. Easier access to recent questions. This ensures that club officers don't miss new questions.
  3. Ability to integrate other organization tools used by club (e.g. Google Calendar).
  4. Clear display of upcoming events in calendar view for easier planning and to get a better sense of the overall semester timeline.

Ideation

image
image

I began by sketching out the general layout that I wanted to design. From there, I identified a list of design goals:

Overall

  • Keep Penn Clubs header bar. This will help maintain consistency with home page.
  • Keep the "card" format of event display. This is to maintain consistency across the platform.
  • Maintain consistent design with Penn Clubs and other Penn Labs products. This includes typography, colors, and other stylistic choices.

Dashboard

  • Add a side menu bar. This will replace the horizontal section containing page names. Add icons to each page name to help the user easily distinguish between them.
  • Add widget-like sections to highlight important info from other pages for an at-a-glance feel. This includes club statistics, unread questions, members list, and an events side bar containing a small calendar and "upcoming events".

Events

  • Add a calendar view of events with clickable blocks (similar to Google Calendar) for better user interaction.
  • Improve list view of events. Add more spacing between each event. Display event image in the list view. Add feature for scrolling through events based on month and year. This will be helpful in the long term, when the club has accumulated quite a lot of past events.
  • Add a "quick add" button for creating new events. Placed at the top of calendar/list for easy access. No need to scroll to the bottom of the page.
  • Add overlay windows for viewing, editing and creating events. This will keep the specific event details hidden until the user wants to see them.
  • Add feature to export event to Google Calendar. This will help the user better manage between their different productivity tools.

Process

💡
Throughout the process of designing the interface, I frequently referred to Penn Clubs and other Penn Labs products to make sure that my design is consistent with the overall brand.

I used the "upcoming events" section from Penn Clubs as inspiration when designing the "view events" overlay window. I wanted to make sure that I keep the "card" format to maintain consistency.

image

Here are some sections Penn Course Plan that I used as inspiration:

image
image

  • Here, I mainly took notes on the overall color palette of the interface. I thought that the mix of light colors worked really well for a calendar / schedule view.
  • I also used the dropdown selection feature for toggling between "month" and "list" view of events.

Dashboard

image

Events (Calendar View)

image

Events (List View)

image

Viewing Events

image

Editing Events

image

Adding Events

image

Prototype