- Original Post Date: September 2019
- My role: UI Design.
- Tools used: Sketch.
The following case is a small project I did when prompted to design a new feature to add to the existing website pennclubs.com as an application to join Penn Labs, the on-campus team that designs applications catered to the Penn community.
Introduction
The Penn Clubs website has great features and is already easy to navigate. The tags / filters, shuffle option, short blurbs, and extended information pages have everything a young freshman might need to read about clubs without sweating down Locust Walk. As much as I hate to say it, it reminds me, an old washed-up junior, of the (shudders) job recruiting process. And though there are some companies that we apply to because of our genuine interest in their mission — let’s face it. There are many that we apply to because they have an opening for a role that we’re looking for, one that fits our skills and interests, and would give us the experience that we’re looking for, too. It’s a win-win for both the company and the employee: so why not for the club and for the student, too?
I imagine it goes a little something like this (or at least, it did for me!):
Or something like this:
Many Penn clubs will recruit for specific roles / teams even if that club doesn’t seem like it would need someone of that particular role. For example, The WALK is a fashion magazine: you’d think, it’d need photographers, stylists, designers — but it might not be common knowledge that it needs business roles, too, to keep up with sponsorships and partnerships. It makes sense — these roles are not hidden, but not particularly advertised either. Penn Clubs could make it easy for freshmen and other students, who want to get specific experience on-campus.
Deep Dive: Open Member Roles
Introducing: Member roles, another tool that students can use while looking for clubs to join. Just like searching for “software engineering intern” in Handshake (Penn is super pre-professional, after all), member roles will allow students to filter through clubs, looking for ones that have open roles for teams they are interested. Wharton kids might want their first shot at working on an operations team; fine arts majors might want to see where graphic designers are needed on campus (sike–they’re always needed!). It would allow students to look for clubs that want to recruit people of their particular skill set or see openings for where they could dive head-first into getting experience in a role they want to grow in.
After all, many clubs at Penn have a lot of similar roles: finances, operations, marketing, outreach, internal, external. But even for slightly more ‘niche’ roles, like a videographer, clubs could practically advertise their need for a role to the student body through Penn Clubs. It’s beneficial for both applicants and for clubs:
For the applicants:
- Able to search for clubs that need their particular skill set / interest
- Minimizes time wasted looking at clubs without roles they are interested in
For the clubs:
- Able to advertise their need for a specific role
Details
‘Member roles’ for a group can be a very generic term — and sometimes, clubs won’t even really go through the types of roles they’re looking for until you show up to their GBM or get the email with the application link. By then, it might be too late, or you might not get access to such an application except if you know what you’re looking for. That’s why Penn Labs could provide a (finite) list of open role types to start off.
Potential ‘role’ tags (in alphabetic order)
- Business Manager
- Data Analyst
- Designer
- Finance
- Editor
- External
- Graphic Designer
- General member*
- Illustrator
- Internal (social)
- Marketing
- Operations
- Outreach
- Performance (general)
- Performance (acting)
- Performance (singing)
- Performance (dancing)
- Photographer
- Public Relations
- Social Impact
- Tech
- Videographer
- Web development
- Writers
*General member roles
Many of the clubs listed on PennClubs do not recruit for specific roles (such as Greek life, community service groups, political groups, etc.) — in these cases, the tag would either list no specific roles, or a “General member” tag. In this case, the “Type” tags would serve better for a user to find these clubs because they are more dependant on the club and its mission, not particularly the role each member plays.
Requesting a specific role
Members of clubs on campus, if needed, could request new roles for PennLabs to add to the list of roles to select from, in order to keep control over the options, just as it does for the ‘Type’ of clubs that representatives can select from. This might be through a feedback form or through contacting the development team.
OR tags instead of AND tags
The open role tags, like the club types, size, and applications are selected “or-wise” not “and-wise”. I think to go with the flow of this interaction, I believe that the new member role tags should also have “or-wise” functionality. This is definitely preferred, as students will probably be searching for one specific role to apply as — not two. Thus, the “and-wise” functionality is not needed.
Preparing Mockups
I noticed that the Penn Clubs website has similar design fundamentals (i.e. primary colors, simple sans-serif fonts, great usability, etc.) yet I noted that some of the colors were slightly different from those given in the style guide — more pastel, if you will! I put together a small style guide for myself to work off of during this process, something that I could reference easily while putting together the mockups. Font choices were chosen based on the system fonts choices as detailed here. I also added a similar green (to create a distinct color for the Open Roles tag), based off of the style guide but slightly more pastel and bright like the PennClubs colors differ slightly from the PennLabs ones do. See below:
Secondly, I needed to figure out a way to integrate the open member roles into the main landing page, the pop-up ‘windows’ for each club, and the individual club pages, too.
Landing page
Given that many clubs are often recruiting for many roles (sometimes upwards of 10+ possible roles), it might be too overwhelming to have all of the roles listed directly in their small blurbs. Thus, similar to the Applications information, I think it would be best to have this information subject only to the pop-up window and the individual club pages to not clutter the landing page.
Pop-up Windows
Similar to the landing page, the potential for 10+ roles to be on this pop-up has the potential to also clutter the pop-up page. However, I do believe there should be some sort of information here — some sort of general information. Under quick information, there could be either a specific role (if only one or two roles are open), the word “Multiple” (for 3+ roles), or the word “None” (for 0 roles).
Individual Club Page
This was by far the most interesting challenge, given that this would be the most important page for finding information about a club. There were multiple locations for this to go, outlined in my sketch here:
I ended up choosing #2 — it would cause 1) less clutter on the page if there are 10+ roles open, 2) cause less formatting issues should the window be resized, and 3) fit into the existing interface easily, too.
