Enhancing the alumni website experience

Project Details

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

My Role

  • UX research planning and execution
  • Insights mapping
  • Wireframing
  • Conducting evaluation tests
  • Prototype building

Abstract

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.

Process Followed

  1. Understanding alumni websites (Secondary Research)
  2. Deep diving into user needs (Primary Research)
  3. Defining the user (Personas & Affinity Diagramming)
  4. Understanding the site’s navigation (Information Architecture Design)
  5. How do people understand and categorize information? (Card Sorting and Tree Testing)
  6. Defining tasks to accomplish on the website (User Stories and Task Flows)
  7. Exploring design solutions (Wireframe Designs)
  8. 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.

Takeaways

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.

Snippet of the secondary research analysis

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.

Takeaways

“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
Glimpse into the primary research files

Defining the user

Affinity diagramming to map out user preferences

Target persona: Current alumni member

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:

Find Alumni

An extensive directory to help find and learn about UFAA alumni members

Alumni Spotlight

A section that highlights alumni achievements and updates

Online Forum

A digital forum for UFAA alumni to network with each other

Alumni Groups

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

Donation Stories

A segment that highlights updates on the use of donations to inspire potential ones

How do people understand and categorize information?

Glimpse into the card sort titles

We created our first version of the site map based on how our users grouped together the content categories we provided them.

Takeaways

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

Takeaways

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

Task flow to RSVP to an event
Task flow to find an alumni and connect with them

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:

Task 1: RSVP to an event
Desktop version low-fidelity prototype
Task 1: RSVP to an event
Mobile version low-fidelity prototype

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 –

Home page: While the need for networking via organization events (in- person and virtual) was brought up in our user interviews with the UFAA members, 4 out of 6 participants looked for events on the homepage before browsing through the navigation bar in our prototype evaluation test.
Filter bar: We’d initially made a left aligned, vertical filter. Our prototype evaluation test results, however, showed that participants had to scroll down to access all the filters. They also mentioned they preferred seeing all of the main filter options on the landing area of the page.
RSVP button: Most test participants expressed that they wanted the RSVP button to be accessible as soon as they view the page instead of having to scroll down to view it. We hence positioned it in a manner that is always visible no matter which part of the page a viewer is on.

Ticket details: Many of our users during testing mentioned that they would like to recheck the event details right before hitting the pay button.

Add to calendar: The feature “add to calendar” was appreciated by most of the participants in the user test as they would like to keep a reminder for the event on their calendars.

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.

Fostering alumni networking: Our user interview insights highlighted the need for viewing information of other alumni to have a continued connection and source of career growth.
Filters: Since we have several filters, we realized that it is hard to fit all of them horizontally in the mobile resolution. Instead, we decided to make a seperate filter page for a better usability.
Log in to view directory: The alumni directory is designed to be viewed only by UFAA members and further allows members to control the kind of information that can be displayed on their profiles.

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.

Links –

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

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