YUROU ZENG

Find My Club Redesign

Developed by the Student Technology Innovation Team (STIT) at NYU, Find My Club is a digital platform for students to search and explore clubs, follow clubs of interest, and view community events around campus. 


Role

Lead Designer

Tools

Sketch, Figma, Zeplin

Overview

NYU's lack of an official campus can be a blessing and a curse to its students. While some are able to thrive socially, most students find it difficult to build a sense of belonging. The solution we turn to is the 900+ clubs available across NYU's schools, offering to cater to our interests all while helping us meet new people, learn new things, and find our community.

While this all sounds nice, having a student look through 900+ club entries during their jam packed welcome week just isn't efficient. That's why the Student Technology Innovation Team (STIT) built Find My ClubOur team wanted to hone in on the problems a student faces while navigating, researching and participating in clubs and club activities. The way that we went about doing this was to create a system that would consolidate and categorize the clubs around campus, taking the already existing platform for club management and implementing improved methods of exploration and customization.

Before I joined STIT, a beta version of the app existed for students to use. I was brought into the team over the summer to revamp and prepare the application for its official launch in the Fall. I was the sole designer for this project and my responsibilities largely revolved around creating a new UI system and visual branding for the system, as well as researching ways of enhancing the club search experience for students.

The Process

To start, I familiarized myself with the current app and its design, as well as read through the user analysis and interviews the past designers did to see how they arrived at their decisions.

Working with an already developed app is completely different from working from scratch, it's definitely easier to note possible improvements when there's a fully functional app rather than just screen prototype.

My work was divided into two areas: visual and UX design.

Visually, I wanted to declutter the system and create a voice and tone for the application. Adding in a more functional landing page, updating the UI design and altering the copy and content on the pages.

For the experience component, I noted two major areas of concern that I wanted to tackle.

  • Club results page - although certain clubs have been filtered out, I noticed that due to the size of the club blocks as well as just the sheer number of club options across NYU, the amount of time it takes to look through and scroll down the club results page was considerable. There has to be a better way to display the results to be more easily consumed.
  • Tags and organization - across the app, all clubs have a color tag that assigns it to one of the 16 different interest categories. The assigned color is mostly arbitrary and the large number of different colors (some of them quite similar to each other) make it an ineffective code to use.

Proposal: The Dropdown

I proposed to the team that for a more effective categorizing system, we could implement dropdown menus. By attaching clubs to a collapsible header based on interests, not only will there be less for the student to scroll as they can close sections at will, the clubs will also appear much more organized when grouped together.

Previous Club Results Page

Club Results Page w/ Dropdown

Results Page w/ Dropdown (Mobile)

The dropdown solution also eliminates the need for colored tags, which resolves my concern regarding that. Once the tags are gone, the club listings can actually be made smaller, which allowed more clubs to show up at once, lessening the amount of scrolling a student would need to do.

The dropdown was also implemented in the "My Clubs" page to maintain consistency across the display of clubs.

User Research and Interview

Before moving on to the visual design portion, I conducted a couple user interviews to figure out different students' behavior when it comes to joining clubs and attending club activities.

I wanted to understand students' priorities as it comes to club on campus, and how we can make Find My Club a time effective tool that help students engage in their communities while adapting to their schedules.

From an online survey and three in person interviews, the key takeaway was that most students lacked the time to fully commit to clubs, but enjoy attending events (especially ones with free food) that allowed them to socialize and wind down when they have the time.

While the foundation of Find My Club revolves around finding clubs, a worthwhile investment would be to bring event finding to the forefront. By emphasizing events happening around campus, we're able to cater to busier students who might not be able to join clubs, as well as increase retention and keep students coming back to the app.

Visual Update

Onboarding

This is the page students see when they log in for the first time.

Club Search Results

Past the initial questionnaire, this is where students can start following and checking out clubs.

My Clubs

List of clubs that a student follows.

Events

The events tab contains events hosted by clubs a student follows, as well as events happening across campus.

Event Detail

Information and description of an event.

All NYU

All the clubs and organization across NYU, organized by interest.

Highlight: Onboarding

One of my favorite pages is the onboarding questionnaire with the interest select buttons. I proposed a number of different designs, but the challenge was figure out a way to make each select feel like a button. In the previous design, a grey circle was placed behind each emoji to hint that they are clickable, but that didn't feel like the best decision. Not only did the emoji get washed out, there became too much going on and felt messy.

The first two definitely wasn't as strong as the last two, as the text on an all blank canvas definitely didn't feel like buttons, and we've largely moved past the use of drop shadows in the redesign.

Ultimately, we ended by combining the last two to give birth to the new interest selection page.

Highlight: Events

Approving my events idea, the team decided to add in an "All Events" tab. The tab recommends events happening around campus that might be relevant to a student's initially selected interests.

Launched!

As of September 2019, STIT has officially launched Find My Club. Our team has been working hard in marketing ourselves at Club Fests and across campus. We've already seen a huge boost in users and we're hoping to continuously analyze how students use our app and use that to iterate and improve Find My Club further!

Working on this project was a super fun learning experience, since the base of the app already exists, I was too excited and had so many ideas that I wanted to try implementing. However, due to time constraint and feasibility, I had to prioritize and discuss with the developers on the team about what would be possible and what wouldn't.

This is also one of the first projects I had where I took part in the accessibility review, which is required for the app to be approved for release. Throughout the design process, I was able to implement best practices in how to optimize the screen for voice over, tabbing and legibility. I hope to bring these lessons learned into all the projects I work on in the future, in order to create applications that are function, accessible and inclusive.

Using Format