NYU Engage Membership Manager

Strategies:
User Research, Personas, User Flows, Wireframing, Prototyping, A/B Testing, Responsive Design

Timeline:
Sep 2020 - Jul 2021

Tools Used:
Figma, Miro

Company: NYU

Strategies: User Research, Personas, User Flows, Wireframing, Prototyping, A/B Testing, Responsive Design

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.

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 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.

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.

Form prompting user to select add or remove users

Step 1 - Add or remove

Form prompting user to select a branch of the school from a dropdown

Step 2 - Select branch

Form prompting user to select the branch's organization from a dropdown

Step 3 - Select organization

Form prompting user to select users' starting date of membership

Step 4 - Select date

Form prompting users to input NYU users' emails

Step 5 - Input users

Fully completed form for managing a roster

Step 6 - Submit

Overview page after inputting a roster to manage

Step 6 - Submit

Load screen after submitting a manage roster form

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

Conclusion

NYU Engage Membership Management launched in the summer of 2021. Because our user base was so small, usability testing was much more casual and quicker than usual. Some key takeaways from this project included:

Responsive Design

Making this product responsive was lower on our priorities but it made a world of difference when executed. I learned about breakpoints in design and best practices in scaling your layout, and also learned from the developers’ how much work is put it to ensure smooth responsiveness.

User Testing

This was my biggest dive into user research and testing. We worked directly with our user base on developing personas and understanding their pain points and user habits, as well as a miscellaneous sample of students and staff to conduct user testing for a more robust set of feedback to influence our design decisions.