Sept. 2021 - Dec. 2021
Optimal Workshop, Figma, Zoom, Google Workspace, Miro
Ariella Brown,
Anamika Menon, and myself
Conducted user research; designed and prototyped the homepage, navigation system, and donate page for desktop and mobile
The NYC Urban Fellows Alumni Association (UFAA) aims to support participants of the Urban Fellows program by fostering relationships among alumni and promoting professional opportunities. UFAA is looking to redesign their website to better serve the needs of the program's alumni.
Our team leveraged research insights to redesign the website to support more ways for alumni to connect with one another. We constructed a new information architecture and high-fidelity prototypes for the homepage, alumni directory, upcoming events page, and donate page.
Following our meeting with our client, we devised two research questions to guide our redesign process:
What are alumni looking for in an alumni website?
How can we make it easy for alumni to get involved with their organization?
Based on our research questions, we decided to start with user research to pinpoint alumni needs before reconfiguring the information architecture of the website and redesigning the interface.
User Research
Information Architecture
Sketches and Wireframes
Prototypes
We conducted user interviews with alumni from UFAA and other organizations to better understand the audience that we are designing for.
Our user interviews revealed that alumni want more opportunities to get to know each other. They are interested in opportunities to interact or catch up with people from their cohort as well as being able to meet new people. Furthermore, many alumni reported that they would like to support UFAA and be more involved with the organization.
"My top priority is finding other alumni. Right now, it's hard to access alumni info because there is no directory and no way to network with others." - Urban Fellow Alumnus
This persona reflects a recent alumnus who wishes to connect with a mentor:
Following our user interviews, we identified areas we wanted to target for our redesign: events, an alumni directory, and the donate page. We wanted to design pages that facilitate alumni interactions by giving them the chance to get involved with UFAA, connect with other alumni, and support the organization.
From there, we conducted a competitive analysis of ten websites to better inform our redesign. We specifically chose websites that included events, directory, and donate pages that we wanted to use as inspiration for our redesign.
We rated each website on a scale of 1 to 3, with 1 being an excellent example and 3 being an example that we should avoid, for six dimensions: homepage, organization, search, content, appearance, mobile-friendliness.
From our competitive analysis, we gained a good sense of what elements to implement and avoid for each page.
We combined information from the UFAA website with our competitive analysis insights and conducted a card sort with 37 cards to learn more about the users' mental models.
Our card sort revealed ten main categories: About UFAA, Alumni Info/Directory, Donations, Events, Job Board, Personal Account Information, Sigmund Ginsberg Leadership Forum, Social Media, UFAA Newsletter, and Volunteer/Mentor.
Our card sort gave us the foundation for producing an initial site map.
To ensure that we were on the right track, a tree test was conducted with this site map to evaluate whether our navigation structure was easy to understand.
Our tree test revealed that users were getting overwhelmed by the amount of information in the navigation header, and that it was difficult to access important pages such as the Event Registration page.
To remedy this, we condensed our site map to six main navigation tabs and reordered some pages to provide a more streamlined experience for users.
After finalizing our sitemap, we started exploring ways to order our content on these pages. Our design process began with ideating through sketches. After exploring some ideas, we created interactive low-to-medium fidelity prototypes on Figma.
We sketched and created wireframes of our desktop and mobile screens at the same time, to ensure that our design is responsive.
To determine whether our prototypes were easy-to-use, we tested our desktop and mobile prototypes to see how users navigated through our website. Our participants were tasked with contacting an alumnus as well as registering for an event.
Our usability tests helped us identify areas where more work was necessary to provide a well-rounded and easy-to-understand prototype.
We decided to target the following areas for improvement:
Before we began designing our high-fidelity prototypes, my team and I compiled a style guide that we could follow to create a consistent and cohesive design across all of our screens.
For this redesign, our goal was to support more ways for alumni to connect with one another. To accomplish this, we made sure that users could easily access important links that facilitate alumni connections such as the Upcoming Events page and the Alumni Directory.
We also aimed to create an easy-to-navigate and user-friendly interface.
View our high-fidelity, interactive desktop and mobile prototypes below.
My team and I presented our redesign to our client, and they were very excited by our work. They particularly liked the layout of our Alumni Directory, the Call to Action for volunteering on the Event Details page, as well as the integration of the donation form into the website.
This was my first time working on a full-scale design project, and it was overall a very valuable experience for me. It was particularly insightful to start this project by conducting user research to get a better sense of what is important to the intended audience. Being able to analyze other similar websites was very helpful for me to understand the elements that work and don't work for UX design in general.
My favorite part of this project was learning how to use Figma and Miro to communicate our findings, create our charts, and to construct our prototypes. Figma, especially, was daunting to me at first but now I am more confident in my abilities to use this application in future projects.
If I were to continue working on this project, I would definitely want to run usability tests on our high-fidelity prototypes to look for ways to improve the usability of the interface and engage in an iterative design process.
