Health Index | Data Visualization
Hologic gathers data yearly to showcase the global state of Women’s Health to the general public, students, professors, and NGOs such as the United Nations, WHO and so on. They have brought this project to FFW for my team to create an innovative and personable design for the second ever public index.
ROLE SUMMARY
Lead Designer
I utilized new branding consistently across the entire site, while creating new, innovative ways of displaying and navigating through data visualization from the mapping page to the country pages.
TOOLS USED
Figma
Adobe After Effects and Photoshop
Chart JS
Miro
DESIGN PROCESS
Who am I designing for?
What major updates are required?
Where can I input new innovative design across the site?
How can I improve navigation for previous and new visitors?
When is this project due, to determine the meetings with the development team
Project Workshops
The initial workshop would give the scope of the project answering the “Who”, “What”, and “When” questions.
”Who” - I would be designing for the general public, NGOs, and educational bodies. This means there would be a need for sources of information on each page with data, quotes, or data summaries.
”What” - I would be adding the new brand guidelines across the pages, making sure the colours are consistent and elevate the data being shown.
”When” - I created a timeline which consisted of dates that I would meet up with the development team to showcase the library we would be using for the charts and any subtle animations that would be utilized across the site.
The next workshop would tackle opposition research. I gathered websites that I thought had designs that aligned with the vision of Hologic and added notes on the specific components that could be improved and customized. This workshop helped to answer the “Where” and “How” questions which would be fleshed out
”Where” - I would showcase subtle animation in the hero and story blocks using After Effects and Lottie within Figma.
”How” - I would create an interactive map where the user can click on a country they see, get a hamburger preview, and have the option to go the respective country page. Within the country pages, the user would be able to navigate through the 5 groups of data from any part of the page, expanding and/or collapsing further data charts.
The final workshop resulted in the final notes to be designed, and annotations to be discussed with the development team. Effective communication with the development team was crucial to launching the final website and the results were met with positive outburst and accolades.
