Role
Product Designer
UX Researcher
Team
Heather Davies
Kate Ragosta
Selena Huang
Katherine D'Angelo
Duration
Nov. 2024 - March. 2025
4 mo. total
Goal:
The primary goal was to modernize and simplify the Hariri Institute website while aligning with Boston University's Office of Research visual standards. We aimed to improve user experience for both internal and external audiences while ensuring the site could be easily maintained by non-technical staff.
Solution:
We developed a modern, accessible website that balances institutional branding with Hariri's interdisciplinary identity. The solution features a clean design system with reusable components, improved content discoverability, and a streamlined CMS for easy content management.
Introduction
The Hariri Institute for Computing, housed within Boston University's Duan Family Center for Faculty Computing and Engineering, needed a complete redesign of its outdated web presence. The site no longer reflected the scope or impact of the Institute's work and lacked visual cohesion, accessibility, and scalability.
I served as the lead UI/UX Designer, working closely with stakeholders to craft a modern, accessible, and maintainable site that aligned with BU's Office of Research theme while reflecting Hariri's distinct interdisciplinary mission.
Goals
-
•
Modernize and simplify the Hariri Institute website.
- • Align with Boston University's Office of Research visual standards.
- • Spotlight Hariri's people, events, research clusters, and projects.
- • Improve user experience for internal and external audiences.
- • Streamline content management for non-technical staff.
- • Ensure scalability for future growth and evolving needs.
Process
1. Research & Discovery
-
•
Conducted a full audit of the existing site to identify UX bottlenecks.
- • Held stakeholder interviews with the Communications Manager, Director of Operations, and faculty to understand communication priorities.
- • Mapped current pain points: difficulty navigating archived content, manual updates, and low visibility of research.
2. UX & Information Architecture
-
•
Developed new site architecture and user flows prioritizing simplicity and clarity.
- • Created personas for key audiences (faculty, students, donors, external partners).
- • Conducted informal usability testing using click-through Figma prototypes to validate navigation patterns and hierarchy.
Figure 1: Site Architecture
3. Design System & Prototyping
-
•
Created low-to-high fidelity prototypes in Figma.
- • Designed reusable components (expandable bios, research highlights, event cards, FAQ accordions).
- • Focused on mobile responsiveness and accessibility from the outset.
- • Designed scalable, modular components to support various content types and future growth.
4. Visual Identity & Customization
-
•
Used BU's Office of Research theme as a foundation.
- • Introduced visual patterns unique to Hariri (custom hero modules, grid layouts, dynamic galleries).
- • Balanced institutional branding with Hariri's interdisciplinary identity.
Figure 2: Initial Design Concepts
5. Developer Handoff & Documentation
-
•
Delivered annotated mockups with interaction guidance for BU's internal web development team.
- • Created a CMS layout guide for non-technical staff to maintain the site.
- • Proposed custom backend content types (e.g., tag researchers by cluster, auto-link bios to news stories).
Results
-
•
Successfully launched a redesigned, responsive website with improved UX and content discoverability.
- • Internal teams now have tools to maintain up-to-date, relevant content with ease.
- • External users can explore Hariri's projects, events, and people more intuitively.
- • The design reflects Hariri's leadership in computational research while remaining accessible to a general audience.
Figure 3 and 4: Proposed Splash Page Designs
Tools Used
-
•
Figma – Design system, wireframes, high-fidelity mockups
- • Miro – Site mapping and user journey diagrams
- • Zoom & Google Meet – Stakeholder interviews and feedback sessions
- • Google Drive – Collaborative documentation and UI handoff
- • Boston University CMS – Implementation with developer guidance