Brotman Baty Institute
A website for the collaboration of precision medicine.
Project: Website
Role: Concept Development, Art Direction, UI Design, Project Coordination
Firm: Jennergy, Inc.
The Brotman Baty Institute is a collaboration of Fred Hutch, Seattle Children’s and UW Medicine. Their goal is to accelerate both the basic sciences of precision medicine and the delivery of benefits to patients.
As a newly created institute, BBI needed a website. The website needed to give access to the work, research, and scientific data while also providing users with basic knowledge of the institute.
My role was to design a responsive website, including several page templates that the institute could update through WordPress CMS. The website's primary use was for sharing and providing access to both studies and research articles, so they needed to take the focus. My approach was to make the design minimal and clean so that the studies and article information would be easy to find.
The site successfully launched and exceeded the client's expectations. I learned that maintaining constant communication is vital in the development stages to ensure an excellent experience for the end product. Overall, the process went well, and I was thrilled with the results.
Research
I joined in as the creative director and led a whiteboard session to determine the website's needs to begin the project. I then created a site map to organize the hierarchy and flow of the website.
Exploration
Next, I used the site map and some quick wireframe sketching to determine that we would build six to seven different page layouts.
Building Structure
Below, building more defined wireframes allowed me to focus on the hierarchy and structure of the site.
Defining Visual Style
Before moving into the hi-fidelity designs, I created a mood board to determine the visual look. The mood board allows the client to feel the visual design and serves as a guiding direction.
Final Result
The home page features a clean design that highlights who the institute is, then quickly directs your attention to relevant tools, news or events.
Responsive Design
The site was designed with the responsive application in mind making sure it was easy to navigate at any size.
Interior Design
Interior pages carry the same clean design that allows you to quickly navigate and directs your focus to the content.
