Improving club management for Penn Clubs officers 👩🏻🏫
Name: Penn Labs Design Technical Challenge
Timeline: September 19 - 21, 2020
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.
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:
- 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.
- 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.
- 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?").
- 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.
- The page names on the top bar lack distinction between one another.
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.
- A dashboard with a clear, at-a glance view of important and frequently visited information. This includes upcoming events, unanswered questions, and members list.
- Easier access to recent questions. This ensures that club officers don't miss new questions.
- Ability to integrate other organization tools used by club (e.g. Google Calendar).
- Clear display of upcoming events in calendar view for easier planning and to get a better sense of the overall semester timeline.
I began by sketching out the general layout that I wanted to design. From there, I identified a list of design goals:
- 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.
- 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".
- 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.
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.
Here are some sections Penn Course Plan that I used as inspiration:
- 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.