Alumni Association Website

Brown University

UX testing and design, UI design, front-end development

The redesign of the Alumni Association website started with the creation of user personas of different alumni users. User surveys, reverse card sorting, and heatmap testing were conducted to guide the organization of the information architecture, designs of wireframes, and the creation of rapid prototypes using HTML, CSS, and Javascript. The last stage included final touches to the design from accumulated user feedback and final front-end development, as well as content management. The site was also built to comply with the latest WCAG 2.0 standards at the time.

baa-preview

Information Architecture

The biggest challenge I faced with this project was the immense amount of content for different types of users. The first and foremost important step in the design process was to organize the complexities of this website and make sure all user types were able to find the information they needed. Once the naming of the navigation, creation of hierarchical menus, and organization of the content was planned, reverse card sorting was used to assess the success of the information architecture of the website. After multiple tests and iterations, the design process then moved to wireframes.

information-architecture-baa

Wire Frames

Wire frames of key pages such as the home page, events, and first and second level content pages were created. Due to time constraints, other page types were created during the rapid prototyping stage.

screenshot_baa19
screenshot_baa20

Content Pages

The Brown Alumni Association website is a content-rich experience due to the wide alumni community. This created a challenge in not only the informational architecture of the site but also how to successfully use many levels of navigation. This was done with a secondary navigation as well as landing pages with helpful descriptions and mini navigations under each category description. Breadcrumbs were utilized at the top of the page and hints and highlights of related content were added to the left column.

Event Pages

The Brown Alumni Association website also connects alumni to events at the university, across the nation, and the globe. A robust events calendar was needed to connect thousands of alumni around the world.

screenshot_baa21
screenshot_baa22

Final Design

Rapid prototyping using HTML, CSS, and Javascript were created and heatmap testing was conducted along the way to ensure a user friendly and visually pleasing final product.

Responsive Design

screenshot_baa8
screenshot_baa9
screenshot_baa10
screenshot_baa16

Located in the Pacific Northwest

© 2023 Stacey Berglind. All rights reserved.