Hariri Institute
A comprehensive redesign of the Hariri Institute's digital presence, focusing on improved user experience, content organization, and visual identity that reflects their position as a leader in computational research.
Project Details
DURATION
ROLE
TEAM
Sep. 2024 - Dec. 2024 (4 mo. total)
Design Strategist, UX Researcher, UI/UX
Heather Davies
Brian Zeng
Avdeep Kaur
Minyang Li
Project Overview
To redesign and redevelop the website for the Boston University Hariri Institute an organization comprised of BU faculty and graduate students across disciplines to study and design intelligent systems. Hariri Institute researchers develop solutions in the areas of Automation, Robotics & Control, Computational Biology & Medicine, Cyber-Physical Systems, Data Analytics, Energy Systems, Information Sources, and Networks.
Goals:
- Develop a holistic architecture and modern UX experience that showcases the Hariri Institute's mission, research, collaborations, news, events, and faculty profiles.
- Develop a new Events Calendar that better showcases important events, enables event categorization, and provides for a more streamlined editing process.
- Highlight and promote Hariri Institute's interdisciplinary research, collaboration, and events such as the Tsai Seminars that bring exposure from outside BU.
- Create a visual design for the website that focuses on engagement and education and is more in-line stylistically with the institute's new branding identity.
- Create landing page and other specialty page designs that automate the display of cross-promotional content.
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.
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.
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.
Tools Used
Figma
Design and prototyping
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