National Institutes of Health
The National Institute of Biomedical Imaging and Bioengineering (NIBIB), part of the National Institutes of Health (NIH), leads the NIH Synthetic Biology Consortium: a trans-NIH collaboration spanning 11 institutes and centers, formed to connect synthetic biology researchers and stakeholders and bring their work to the NIH. As the UI/Web Designer, I designed the consortium's first web presence, a clean, intuitive, and fully accessible site that supported its mission while aligning with NIH brand guidelines.
ROLE
UI Design
User Research
TEAM
UI/UX team, PM,
Eng
CLIENTS
NIH NIBIB
TIME
Summer 2019
Design Challenge
Designing for a trans-NIH consortium meant serving a broad, distributed audience of researchers, program staff, and stakeholders across multiple institutes, with no existing site to build on. The project also carried real constraints: a tight timeline and limited flexibility in color and visual styling to stay consistent with the NIBIB parent website. Every element had to meet WCAG accessibility standards, which required careful attention to color contrast, usability, and inclusive design while maintaining brand alignment.
NIBIB color palette
Solution
Using the NIBIB brand's blue palette as the primary color and pairing it with a light background to achieve sufficient contrast, I created a visually cohesive website that aligned with brand guidelines while meeting WCAG accessibility standards. The final design improved readability and ensured a more inclusive experience for all users.
User Research
I collaborated with members of the Synthetic Biology Consortium to understand its goals, content needs, and objectives for the site. In parallel, I researched the target audience, synthetic biology researchers, NIH program staff, and prospective collaborators, to understand their workflows and information needs. That research shaped the content priorities, including surfacing funding opportunities and clearly communicating the consortium's mission to draw new researchers to the NIH.
- Funding opportunities for continuous search
- Hero image/graphic that depicts synthetic biology
- Same header from NIBIB
- Simple, yet effective website communicating mission
Wireframe
Based on research insights and stakeholder requirements, I developed low-fidelity wireframes to establish the site's information architecture, content hierarchy, and overall user flow. The wireframes were reviewed with the client to validate the structure and ensure alignment with the consortium's goals before moving into visual design.
Prototype
Following client approval of the wireframes, I translated the validated structure into a high-fidelity interactive prototype. The prototype demonstrated the intended user experience, visual direction, and key interactions while providing stakeholders with a realistic representation of the final product.
Final Look
After incorporating final stakeholder feedback and refinements, the site launched to support the consortium's members. The final design delivered a clean, accessible, and brand-aligned experience aligned with the consortium's mission, giving users a more intuitive way to engage with its resources.
