#web
#responsive
#Webflow
PIH Health Annual Report
PIH Health Annual Report
PIH Health Annual Report
PIH Health Annual Report
PIH Health Annual Report
PIH Health Annual Report
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
The PIH Health Annual Report was reimagined as a responsive website to better engage readers and reduce the costs and limitations of a traditional printed book. This innovative approach offered a modern, accessible format that broadened its reach and improved audience interaction.
2020-2021
Timeline
Creator
Role
2020-2021
Timeline
Creator
Role
Background
Background
The company used to distribute their Corporate Annual Report as a printed booklet and as a PDF. As the requests to include more information on it that range from financial statements to donor lists, the increase in production costs and poor reception by general public, we clearly needed to create a new way of distribution.
As the lead designer, I was responsible for the visual and technical transformation of the report. I worked closely with the PIH Health team to ensure the new format was both engaging and aligned with the organization’s values.
The company used to distribute their Corporate Annual Report as a printed booklet and as a PDF. As the requests to include more information on it that range from financial statements to donor lists, the increase in production costs and poor reception by general public, we clearly needed to create a new way of distribution.
As the lead designer, I was responsible for the visual and technical transformation of the report. I worked closely with the PIH Health team to ensure the new format was both engaging and aligned with the organization’s values.
Challenges
Challenges
The printed annual report spanned over 60 pages, making it overwhelming for readers and expensive to produce. Transitioning to an online format required:
The printed annual report spanned over 60 pages, making it overwhelming for readers and expensive to produce. Transitioning to an online format required:
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
1
Content Management
Condensing and reorganizing extensive material into an intuitive and user-friendly structure.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
2
Information Architecture (IA)
Creating clear navigation for added sections and pages.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
3
Design Adaptation
Ensuring the design maintained the professionalism of the printed report while leveraging the flexibility of digital media.
Process
Process
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
1
Conceptualization
Developed a moodboard to establish the visual style and direction. Collaborated with stakeholders to align on goals and audience needs.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
2
Content Strategy
Reorganized the report’s content into digestible sections. Enhanced the structure for easy navigation and scannability.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
3
Design and Development
Designed and built the site using Webflow, ensuring a responsive layout for desktop, tablet, and mobile users. Incorporated interactive elements to engage readers and add depth to the content.
Visual Style
Visual Style
Being in charge of the look and feel of this project, I decided to start using a Style Tile, a moodboard-like document where I can collect things like a color palette, textures and possible font pairings. This was also a good starting point to create a design system for later reference.
Being in charge of the look and feel of this project, I decided to start using a Style Tile, a moodboard-like document where I can collect things like a color palette, textures and possible font pairings. This was also a good starting point to create a design system for later reference.
Data and Stats
Data and Stats
Key data was presented as information cards where the content was previously summarized. Subtle animations were a breeze to add using Webflow on this section and also in the navigation.
Key data was presented as information cards where the content was previously summarized. Subtle animations were a breeze to add using Webflow on this section and also in the navigation.
Results
Results
1
Increased Readership
A 15% increase in readers, largely attributed to the responsive design.
1
Increased Readership
A 15% increase in readers, largely attributed to the responsive design.
1
Increased Readership
A 15% increase in readers, largely attributed to the responsive design.
1
Increased Readership
A 15% increase in readers, largely attributed to the responsive design.
1
Increased Readership
A 15% increase in readers, largely attributed to the responsive design.
2
Improved Engagement
Tracking tools provided insights into reader behavior, allowing for better content optimization.
2
Improved Engagement
Tracking tools provided insights into reader behavior, allowing for better content optimization.
2
Improved Engagement
Tracking tools provided insights into reader behavior, allowing for better content optimization.
2
Improved Engagement
Tracking tools provided insights into reader behavior, allowing for better content optimization.
2
Improved Engagement
Tracking tools provided insights into reader behavior, allowing for better content optimization.
3
Positive Feedback
Leaders and the CEO praised the website’s usability and modern approach.
3
Positive Feedback
Leaders and the CEO praised the website’s usability and modern approach.
3
Positive Feedback
Leaders and the CEO praised the website’s usability and modern approach.
3
Positive Feedback
Leaders and the CEO praised the website’s usability and modern approach.
3
Positive Feedback
Leaders and the CEO praised the website’s usability and modern approach.
4
Cost Savings
Transitioning away from print significantly reduced production expenses.
4
Cost Savings
Transitioning away from print significantly reduced production expenses.
4
Cost Savings
Transitioning away from print significantly reduced production expenses.
4
Cost Savings
Transitioning away from print significantly reduced production expenses.
4
Cost Savings
Transitioning away from print significantly reduced production expenses.
Tools
Tools
Webflow
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
Miro
Reflection
This project was a testament to how design and technology can enhance storytelling. It demonstrated the importance of adapting to user needs and leveraging digital tools to drive engagement.
