Web mockup landing page for NYU Engage Membership ManagerWeb mockup landing page for NYU Engage Membership ManagerWeb mockup landing page for NYU Engage Membership Manager

NYU Engage Membership Manager

  • Company:

  • NYU

  • Strategies:

  • Research, UX/UI Design, Prototyping

  • Timeline:

  • Sep 2020 - Jul 2021

  • Tools Used:

  • Figma, Miro

Company: NYU

Strategies: Research, UX/UI Design, Prototyping

Timeline: Sep 2020 - Jul 2021

Tools used: Figma, Miro

Engage Membership Manager is a web app used to add or archive students’ memberships for clubs and organizations.

During my time at NYU IT, I worked on the designs, research, and testing for Membership Manager on NYU Engage. I was the sole product designer on the team, collaborating with a product manager, front-end developer, and back-end developer on the project.

Click here to jump to the designs!

Problem

With many active clubs at New York University, and new incoming students every semester, branch administrators are currently unable to bulk add/remove users to an organization’s roster. Currently, to add a large group of users to an organization, branch administrators have to go through a super administrator for involvement imports, and have to prepare a .csv file with member information in a specific format. The process of formatting is time-consuming and involvement imports can only take up to 1,000 users at a time.

Our goal was to give more power back to the branch administrators, allowing them to directly manage rosters through a digital platform.

Persona

I conducted user interviews with branch administrators and student leaders of some of the clubs NYU has to offer, and created a persona based on their goals and pain points.

User persona for Carolyn, a 30-year-old NYU employee

Pain Points

From there, the team collaborated on a features list that would address the pain points we found through research. We decided to focus on branch administrators, as they were the ones importing a large list of users every semester for clubs on top of their other tasks and duties.

Discovery

User Flow

With the features in mind, I created a user flow that shows a user’s journey to manage a roster from start to finish.

Diagram that shows a user's step-by-step process to upload a roster on Membership Manager
Card Sorting

The Manage Roster form would have sections to select an organization, the action the user wants to take (add/remove), the start or end date, and to input member information. We conducted some user testing to see which order would make the most sense to our users.

Card sorting exercise that reads 'Exercise 1: Arrange these in order of importance'
Card sorting exercise that reads 'Exercise 2: Arrange these in the order that an online application might ask'
Card sorting exercise that reads 'Exercise 3: Would you prefer Input Users to be first or last?'
Card sorting exercise that reads 'Exercise 4: Would you prefer Add/Remove users to be first or last?'

From there, we were able to design a form that would address all the sections needed to import a roster, as well as organize it in the order that made the most sense to our users.

Design

Designs and prototypes were all made on Figma, following NYU's graphic and visual design guidelines.

Landing Page

To access Membership Manager, the user can access the portal, which leads them to this landing page. To sign in, users must use the global NYU login and enter their credentials.

Website mockup, the header has the NYU logo an a button to sign in, the left-hand side has a title that reads 'NYU Engage Membership Manager' with a description 'Manage your organization rosters in just a few clicks. Add or remove student memberships simply and easily'. The right-hand side has a screenshot of the membership form

Manage Roster

Upon sign in, users are greeted with the Manage Roster tab, where they can fill out a form to add or remove students to a club roster.

Managing roster form's step 1

Step 1 - Add or remove

Managing roster form's step 2

Step 2 - Select branch

Managing roster form's step 3

Step 3 - Select organization

Managing roster form's step 4

Step 4 - Select date

Managing roster form's step 5

Step 5 - Input users

Managing roster form's step 6

Step 6 - Submit

Step 7 - Confirmation page

Managing roster form's step 8

Step 8 - Processing users

Task History

To view past actions, the user can navigate to Task History, where they can see a table of all the rosters they've managed in the past. The table will give them information like the organization, the number of users, and the status of the upload. The download button, which is available for 30 days after an upload, will give them a .csv file of users, and will show which ones upload unsuccessfully if applicable.

List of previous tasks done by a user. The columns show the task date, action (add or remove), organization, set date, number of users, and status

Error Handling

To accommodate every possible error case, I designed different error statuses throughout the process.

Error case where an email doesn't have a domain name

Error - Incomplete email

Error case where the copy and pasted list has all of the emails without spaces between them

Error - Incorrectly pasted email list

Error message that reads 'This file type is not permitted, please try again with a .csv file'

Error - Incorrect file type

Error message that reads 'This file size exceeds the max limit, please try again'

Error - file size too large

Responsive Design

Because some of the visual components are so complex, here's a look into my attempts at accommodating major screen sizes with the help of the front-end developer on the team! To achieve this, we created breakpoints based on certain popular screen sizes to resize the blobby elements of the design.

Screenshot of design file showing how the landing and manage roster page resizes with different screen dimensions

Aftermath

My year at NYU IT was so important in my growth as a designer to learn to how to work cross-functionally, partnering with developers, product managers, and other designers. Having been a part of this new learning experiences, along with juggling school, extracurriculars, and COVID-19 made the end product so much more meaningful and impactful to me!

Check out some other projects: