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
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.
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.
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.
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.
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.
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.
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.
Error Handling
To accommodate every possible error case, I designed different error statuses throughout the process.
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.
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!