Client: NYC UFAA
Module: INFO 643-02 | Information Architecture/Interaction Design
Duration: 4 months (Sep’21 – Dec’21)
Team: Lillian Yang, Sagarika Konanuru, Priyanka Gangwal
Tools Used: Miro, Google Sheets, Figma, Optimal Workshop
- UX research planning and execution
- Insights mapping
- Conducting evaluation tests
- Prototype building
Alumni Association of the NYC Urban Fellows Program is a reputed community of professionals who participated in the highly selective nine-month fellowship program sponsored by The City of New York and administered by the Department of Citywide Administrative Services (DCAS). The project deciphers alumni member needs in form of qualitative research insights and reimagines the website experience by proposing an intuitive and comprehensive design alternative.
- Understanding alumni websites (Secondary Research)
- Deep diving into user needs (Primary Research)
- Defining the user (Personas & Affinity Diagramming)
- Understanding the site’s navigation (Information Architecture Design)
- How do people understand and categorize information? (Card Sorting and Tree Testing)
- Defining tasks to accomplish on the website (User Stories and Task Flows)
- Exploring design solutions (Wireframe Designs)
- Creating the GUI with a consistent visual language (Visual Design)
What do members look for on an alumni website?
The project began by keeping this challenge in mind. It was critical to familiarize ourselves with prevalent alumni website features and then dive into in-depth user interview sessions to better understand the needs of members of the association.
Understanding alumni websites
The first step was to assess alumni websites on the basis of content, interaction features, accessibility, use of visuals, typography, mobile friendliness, navigation, structure, etc. Observations were captured, analyzed and marked on a scale of 1-3 to further understand overall experiences on websites.
Analyzing popular features on other websites in comparison with the client’s, helped us get a fair idea of which interactions if not already there, may work for the client’s website like – adding an alumni directory, option to integrate preferred events with a user’s calendar and Google Maps, having default donation amount CTA buttons along with customizable amount options, etc.
Deep diving into user needs
In-depth interviews were conducted with 6 participants, out of which 4 were UFAA alumni members. Questions included – how frequently do you use the site? Which is the most critical task you use the site for? What your thoughts about the current experience? And many more.
“I didn’t know this website exists!”— A current member
- Members of the UFAA regard the community highly
- There is a common need to socialize with other fellows
- Lack of depth in event details impacts participation
- UFAA details are scattered over multiple website currently
- Current website feels verbose and difficult to navigate
- Limited program & fellow information on the website currently
Defining the user
Simplifying & streamlining the website’s navigation
After finalizing the user type and their needs, the next step was to work on redefining the website’s navigational structure. This was done via a three-fold step that included the following elements –
Understanding the site’s navigation
Analyzing the current information architecture of the website, we found the following issues:
Hierarchy issues: many items in the navigation bar didn’t look like independent clickable pages
Minor menus within the main navigation bar: a few menu titles could be subtitles instead
Major task flow starters hidden in the drop downs of the navigation bar: a few tasks could be highlighted by making them a part of the main navbar
Based on the insights we gained from the interviews with UFAA members and competitive analysis, we came up with a handful features that can enhance the experience of the website users:
An extensive directory to help find and learn about UFAA alumni members
A section that highlights alumni achievements and updates
A digital forum for UFAA alumni to network with each other
A website feature that allows alumni to create custom groups on the online forum
Our Work & Impact
A page that shares UFAA activities, statistics and their impact
A segment that highlights updates on the use of donations to inspire potential ones
How do people understand and categorize information?
We created our first version of the site map based on how our users grouped together the content categories we provided them.
- Several users grouped together unrelated information when the content titles were confusing — we then changed the vocabulary used to make it more intuitive. For example, changed “News and Forum” to “Updates and Forum”.
- Most users found it harder to group cards which currently came under the ‘Contribute’, ‘Get Involved’ and ‘News and Forums’ menus, indicating that more distinct menu titles were needed to separate them — we grouped them under narrower subcategories like — events and career development for better understanding.
With a few changes in the site map, the next step was to move to the tree testing exercise to identify navigation errors if any.
- Some found it difficult to find content due to vocabulary issues — we changed the names and heading of our content to make the experience more intuitive and easily understandable.
- Some of our content was in unidentifiable sections — we moved content around within the IA to create more well defined menus
Refined information architecture
The final site map was a result of the card sorting and tree testing exercises. Some of the key features that are different from he existing site include – the career development, donate, updates and news and the alumni community pages.
Defining tasks to accomplish on the website
The images here showcase the three user stories we’d shortlisted for the project – to find alumni events, to make a donation and to contact a fellow alumni.
Exploring design solutions: helping members RSVP to an event and find an alumni on the website
Ideating wireframes on paper first help us refine the ideas better.
We created low-fidelity prototypes for both the tasks.
A glimpse into the working prototypes:
Are users able to navigate the new design?
We conducted 6 user tests to evaluate the prototypes created for one of the tasks – RSVP to an event. The design recommendations for high-fidelity prototypes based on test insights are summarized below –
Crafting the final GUI with a consistent visual language
We had to take critical decisions with regards to the UI of the final design. Some of the key decisions taken are presented below –
Ticket details: Many of our users during testing mentioned that they would like to recheck the event details right before hitting the pay button.
Directory: As brought up in our user interviews, our aim was to provide users with an interactive directory of alumni that can be filtered by year, industry, region, hiring and mentoring status.
Experience the website prototype yourself!
Below are the tasks you can choose to complete on the website –
Task 1: Find a event that will be held between 16-20 December 2021, costs at least $1 to at most $10, and falls in a social-type category. Next, RSVP and pay for the event with 1 guest coming with you.
Task 2: Find an alumni who is a mentor and works in the urban development industry. Then send a direct message to them on the forum.
Click here to view the desktop version
Click here to view the mobile version
“I absolutely love the filter used here!”
— One of the clients
We presented our prototype to the clients over a virtual call. We explained our concept and gave a prototype walkthrough. The design received a lot of positive feedback, especially on the alumni directory navigation. Below are some of the feedback received –
- The home page was appreciated for its visuals
- The events navigation appeared seamless
- The activities timeline on the individual alumni page was perceived to be a thoughtful touch
- The message feature was greatly appreciated as well
- The only suggestion we received was to have the alumni directory’s list of people page as public, as many alumni members seek a public directory. The log in is page was suggested to be added in the next step to view individual alumni pages.
Learnings and next steps
The project helped me improve my design and research skills to a great extent. I am happy I was able to successfully contribute to the group project. Some of my key contributions include – planning the research protocols, contributing to interview insights and benchmarking study, conducting evaluation tests, designing the wireframes (mobile and desktop version) and creating the designs of the alumni directory pages and the home page.
Not only did I learn about the user-centered design process in interaction design projects, but I also got to learn the tool Figma with the help of my fellow teammates. One of my biggest individual takeaways from the project is realizing the importance of evaluation tests. As “good design” can be extremely subjective, usability/evaluation tests are one of the best tools available to designers to predict the success of prototypes created. As a team, if we had a chance to work on the project from start again, we would aim to complete the evaluation tests of the prototypes of both the tasks. As part of next steps, we aim to test the prototypes further with users to gather their experience feedback and identify challenges if any.
I am extremely thankful to Pratt Institute, Professor Craig Macdonald, NYC UFAA and my teammates for giving me the opportunity to work, learn and grow through this project.