Climable
Helping a women-run non-profit better tell promote their projects and mission through a website redesign
Overview
In the spring of 2024, I worked as a Marketing and Communications Intern at Climable, a Cambridge-based women-run non-profit intersecting clean energy with education. I learned so much about graphic design and social media management in the internship, but of course, at non-profits, I put on many hats beyond just social media management and graphic design. My supervisor tasked me with spearheading the redesign of Climable’s website where I gained invaluable experience in UX, UI, branding, and web design.
My Role
UI Designer
Graphic Designer
UX Designer
Collaborator
Maisy Rohrer
Timeline
January 2024 - March 2024
Tools
Figma
Miro
Context & Problem
Climable is a women-run non-profit organization based in Cambridge, MA with a powerful mission to make climate science and clean energy more accessible and understandable for everyone. The organization has accomplished many projects, from helping the development of solar-powered microgrids that benefit communities like Chelsea and Boston's Chinatown to creating clean energy curriculum for middle school and high school students!
The organization also runs a robust internship program throughout the year to educate more young leaders on the importance of sustainability with a focus on communities, which I was lucky to be a part of in the spring of 2024! Evidently, Climable has a wide range of projects and its staff want to better utilize online platforms and social media to clearly communicate its diverse works. Climable's website is the main way for stakeholders and potential collaborators to find out more about their organization's mission and projects. The website is an integral part of the organization's outreach and online presence, but it had little page hierarchy and was difficult to navigate.
My Role
Team
Timeline
Tools
UI Designer
Graphic Designer
UX Designer
Maisy Rohrer
January 2024 - March 2024
Figma
Miro
Solution
I redesigned the Home Page of Climable's website as well as adding a Projects page, making the entire website contain a more narrative hierarchy and highlighting the different kinds of projects that Climable involves itself in. I also made the website more visually appealing and more customized through the incorporation of strong UI and branded icons which I created.
Examining the Old Website
Projects Page
Originally, the "Projects" page was only at the dropdown section of the masthead. I proposed that we separate it from the "Actions" page and move it to the masthead because "Actions" was not a clear term, and "Projects" are a crucial part of an organization's website that should not be kept hidden.
The UI of the site also left something to be desired. There were not enough graphics and font consistency to really communicate the brand image and story of the organization.
Little Call to Action
Because Climable's projects are all relatively complex and contain wide varieties of subject areas from direct development of sustainable microgrids to clean energy curriculum, grouping all of the projects together felt overwhelming and that there was a steep learning curve. There was little call to action on the website, making it difficult to navigate for new users.
Ideation
Wire Framing
I created some low-fidelity and high-fidelity wireframes that outlined the changes that I wanted to make to the format, hierarchy and pages of the Climable website. After I presented these wireframes to the Climable staff and received approval of them, I moved onto the design phase of my project.
Designing
Branded Icon Design
Once the Climable staff finalized the project categories that they wanted to divide the "What We Do" section into, I went straight to brainstorming for the look of the icons. I wanted to create my own custom icons with Adobe Illustrator because Climable's projects are quite unique, so there are not currently existing icons for some of their work(i.e. microgrids).
Additionally, coming from a graphic design background, I wanted to strengthen Climable's brand image and establish a customized UI for the website. I created sketches for each project category and presented them to the Climable team during one of our weekly strategy meetings. I had them vote to decide which best represented and communicated Climable's missions and goals effortlessly.
Design
Updated Home Page with Narrative Hierarchy
In the final prototype, I redesigned the Home Page of the Climable website to include intentional, storytelling within the page's hierarchy and have multiple call to actions to learn more about the organization's work and get involved.
Intuitive "What We Do" Page
Making the Projects page its own separate section on the website menu bar as well as incorporating the "What We Do" project categories really helped improve the clarity of Climable's diverse work. The icons also help users instantly grasp the purpose of each project category!
Reflections & Goals
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our
website redesign:
What I Learned
🌱 I had the invaluable opportunity to gain hands-on web design and branding experience within a fast-paced, women-run non-profit organization. I learned so much about the work culture in non-profits and about the importance of online platforms they use to promote their work.
🌱 This was my first UX/UI-related project outside of a classroom setting, and learning more about how to use design and prototyping tools in Figma to create an interactive website redesign was eye-opening. This project made me fall in love with the power of UX/UI design in non-profit spaces!
🌱 I learned that getting consistent feedback from team members and collaborators is crucial in the smooth development of a project. It's important to get as many eyes on your project as possible!
Goals for the Future
✨ I want to work with more non-profit organizations in the future and help them also improve their online presence and convey their missions in more narrative ways!
✨ I hope to get more experience in conducting user research in the future and conducting user tests.
Testimonial
Maisy Rohrer
Senior Program Manager at Climable
"Rachel Liang was an exceptional member of the Climable team as our first Marketing and Communications Intern. Climable desperately needed support in improving our marketing and outreach materials. So we overhauled one of our internship positions to seek a student with a passion for design and a willingness to learn alongside us. Rachel came into the role and took up the mantle with seeming ease and comfort. They were dedicated and professional, and an enthusiastic collaborator.
One of Rachel’s most important projects with us was redesigning much of Climable’s website. When they started, our homepage barely conveyed any important information about the organization. Key pages—such as project descriptions and our team page—were not intuitively located nor was the information within them effectively organized. Using Figma, Rachel created a new design prototype that far exceeded our expectations. It was clear that Rachel profoundly understood Climable’s mission and our engagement goals across various users. The layout, utilization of brand colors, creative use of Squarespace features, and custom graphics produced a user-friendly experience that effectively draws attention to the key aspects. Now built, the website is something Climable is proud to share with funders, potential partners, and our community members. We've even received cold emails from staff of other organizations asking who designed our website—it's that good!
Without hesitation, I highly recommend Rachel for UI/UX design projects. I have no doubt they will succeed in any role they undertake. They are an excellent designer with a passion and eye for UX/UI. They will be an invaluable member of any team lucky enough to have them."
Climable
Climable
Helping a women-run non-profit better tell promote their projects and mission through a website redesign
Helping a women-run non-profit better tell promote their projects and mission through a website redesign
Overview
Overview
In the spring of 2024, I worked as a Marketing and Communications Intern at Climable, a Cambridge-based women-run non-profit intersecting clean energy with education. I learned so much about graphic design and social media management in the internship, but of course, at non-profits, I put on many hats beyond just social media management and graphic design. My supervisor tasked me with spearheading the redesign of Climable’s website where I gained invaluable experience in UX, UI, branding, and web design.
In the spring of 2024, I worked as a Marketing and Communications Intern at Climable, a Cambridge-based women-run non-profit intersecting clean energy with education. I learned so much about graphic design and social media management in the internship, but of course, at non-profits, I put on many hats beyond just social media management and graphic design. My supervisor tasked me with spearheading the redesign of Climable’s website where I gained invaluable experience in UX, UI, branding, and web design.
Role: UI Designer, Graphic Designer, UX Designer
Collaborator: Maisy Rohrer
Timeline: January 2024 - March 2024
Tools: Figma, Miro, Canva
My Role
UI Designer
Graphic Designer
UX Designer
Collaborator
Maisy Rohrer
Timeline
January 2024 - March 2024
Tools
Figma
Miro
Context & Problem
Context & Problem
Climable is a women-run non-profit organization based in Cambridge, MA with a powerful mission to make climate science and clean energy more accessible and understandable for everyone. The organization has accomplished many projects, from helping the development of solar-powered microgrids that benefit communities like Chelsea and Boston's Chinatown to creating clean energy curriculum for middle school and high school students!
The organization also runs a robust internship program throughout the year to educate more young leaders on the importance of sustainability with a focus on communities, which I was lucky to be a part of in the spring of 2024! Evidently, Climable has a wide range of projects and its staff want to better utilize online platforms and social media to clearly communicate its diverse works. Climable's website is the main way for stakeholders and potential collaborators to find out more about their organization's mission and projects. The website is an integral part of the organization's outreach and online presence, but it had little page hierarchy and was difficult to navigate.
Climable is a women-run non-profit organization based in Cambridge, MA with a powerful mission to make climate science and clean energy more accessible and understandable for everyone. The organization has accomplished many projects, from helping the development of solar-powered microgrids that benefit communities like Chelsea and Boston's Chinatown to creating clean energy curriculum for middle school and high school students!
The organization also runs a robust internship program throughout the year to educate more young leaders on the importance of sustainability with a focus on communities, which I was lucky to be a part of in the spring of 2024! Evidently, Climable has a wide range of projects and its staff want to better utilize online platforms and social media to clearly communicate its diverse works. Climable's website is the main way for stakeholders and potential collaborators to find out more about their organization's mission and projects. The website is an integral part of the organization's outreach and online presence, but it had little page hierarchy and was difficult to navigate.
Solution
Solution
I redesigned the Home Page of Climable's website as well as adding a Projects page, making the entire website contain a more narrative hierarchy and highlighting the different kinds of projects that Climable involves itself in. I also made the website more visually appealing and more customized through the incorporation of strong UI and branded icons which I created.
I redesigned the Home Page of Climable's website as well as adding a Projects page, making the entire website contain a more narrative hierarchy and highlighting the different kinds of projects that Climable involves itself in. I also made the website more visually appealing and more customized through the incorporation of strong UI and branded icons which I created.
Examining the Old Website
Examining the Old Website
Projects Page
Projects Page
Originally, the "Projects" page was only at the dropdown section of the masthead. I proposed that we separate it from the "Actions" page and move it to the masthead because "Actions" was not a clear term, and "Projects" are a crucial part of an organization's website that should not be kept hidden.
The UI of the site also left something to be desired. There were not enough graphics and font consistency to really communicate the brand image and story of the organization.
Originally, the "Projects" page was only at the dropdown section of the masthead. I proposed that we separate it from the "Actions" page and move it to the masthead because "Actions" was not a clear term, and "Projects" are a crucial part of an organization's website that should not be kept hidden.
The UI of the site also left something to be desired. There were not enough graphics and font consistency to really communicate the brand image and story of the organization.
Little Call to Action
Little Call to Action
Because Climable's projects are all relatively complex and contain wide varieties of subject areas from direct development of sustainable microgrids to clean energy curriculum, grouping all of the projects together felt overwhelming and that there was a steep learning curve. There was little call to action on the website, making it difficult to navigate for new users.
Because Climable's projects are all relatively complex and contain wide varieties of subject areas from direct development of sustainable microgrids to clean energy curriculum, grouping all of the projects together felt overwhelming and that there was a steep learning curve. There was little call to action on the website, making it difficult to navigate for new users.
Ideation
Ideation
Wire Framing
Wire Framing
I created some low-fidelity and high-fidelity wireframes that outlined the changes that I wanted to make to the format, hierarchy and pages of the Climable website. After I presented these wireframes to the Climable staff and received approval of them, I moved onto the design phase of my project.
I created some low-fidelity and high-fidelity wireframes that outlined the changes that I wanted to make to the format, hierarchy and pages of the Climable website. After I presented these wireframes to the Climable staff and received approval of them, I moved onto the design phase of my project.
Designing
Designing
Branded Icon Design
Branded Icon Design
Once the Climable staff finalized the project categories that they wanted to divide the "What We Do" section into, I went straight to brainstorming for the look of the icons. I wanted to create my own custom icons with Adobe Illustrator because Climable's projects are quite unique, so there are not currently existing icons for some of their work(i.e. microgrids).
Additionally, coming from a graphic design background, I wanted to strengthen Climable's brand image and establish a customized UI for the website. I created sketches for each project category and presented them to the Climable team during one of our weekly strategy meetings. I had them vote to decide which best represented and communicated Climable's missions and goals effortlessly.
Once the Climable staff finalized the project categories that they wanted to divide the "What We Do" section into, I went straight to brainstorming for the look of the icons. I wanted to create my own custom icons with Adobe Illustrator because Climable's projects are quite unique, so there are not currently existing icons for some of their work(i.e. microgrids).
Additionally, coming from a graphic design background, I wanted to strengthen Climable's brand image and establish a customized UI for the website. I created sketches for each project category and presented them to the Climable team during one of our weekly strategy meetings. I had them vote to decide which best represented and communicated Climable's missions and goals effortlessly.
Final Prototype
Final Prototype
Design
Design
Updated Home Page with Narrative Hierarchy
Updated Home Page with Narrative Hierarchy
In the final prototype, I redesigned the Home Page of the Climable website to include intentional, storytelling within the page's hierarchy and have multiple call to actions to learn more about the organization's work and get involved.
In the final prototype, I redesigned the Home Page of the Climable website to include intentional, storytelling within the page's hierarchy and have multiple call to actions to learn more about the organization's work and get involved.
Intuitive "What We Do" Page
Intuitive "What We Do" Page
Making the Projects page its own separate section on the website menu bar as well as incorporating the "What We Do" project categories really helped improve the clarity of Climable's diverse work. The icons also help users instantly grasp the purpose of each project category!
Making the Projects page its own separate section on the website menu bar as well as incorporating the "What We Do" project categories really helped improve the clarity of Climable's diverse work. The icons also help users instantly grasp the purpose of each project category!
Reflections & Goals
Reflections & Goals
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our
website redesign:
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our website redesign:
What I Learned
What I Learned
🌱 I had the invaluable opportunity to gain hands-on web design and branding experience within a fast-paced, women-run non-profit organization. I learned so much about the work culture in non-profits and about the importance of online platforms they use to promote their work.
🌱 This was my first UX/UI-related project outside of a classroom setting, and learning more about how to use design and prototyping tools in Figma to create an interactive website redesign was eye-opening. This project made me fall in love with the power of UX/UI design in non-profit spaces!
🌱 I learned that getting consistent feedback from team members and collaborators is crucial in the smooth development of a project. It's important to get as many eyes on your project as possible!
🌱 I had the invaluable opportunity to gain hands-on web design and branding experience within a fast-paced, women-run non-profit organization. I learned so much about the work culture in non-profits and about the importance of online platforms they use to promote their work.
🌱 This was my first UX/UI-related project outside of a classroom setting, and learning more about how to use design and prototyping tools in Figma to create an interactive website redesign was eye-opening. This project made me fall in love with the power of UX/UI design in non-profit spaces!
🌱 I learned that getting consistent feedback from team members and collaborators is crucial in the smooth development of a project. It's important to get as many eyes on your project as possible!
Goals for the Future
Goals for the Future
✨ I want to work with more non-profit organizations in the future and help them also improve their online presence and convey their missions in more narrative ways!
✨ I hope to get more experience in conducting user research in the future and conducting user tests.
✨ I want to work with more non-profit organizations in the future and help them also improve their online presence and convey their missions in more narrative ways!
✨ I hope to get more experience in conducting user research in the future and conducting user tests.
Testimonial
Testimonial
Maisy Rohrer
Maisy Rohrer
Senior Program Manager at Climable
Senior Program Manager at Climable
"Rachel Liang was an exceptional member of the Climable team as our first Marketing and Communications Intern. Climable desperately needed support in improving our marketing and outreach materials. So we overhauled one of our internship positions to seek a student with a passion for design and a willingness to learn alongside us. Rachel came into the role and took up the mantle with seeming ease and comfort. They were dedicated and professional, and an enthusiastic collaborator.
One of Rachel’s most important projects with us was redesigning much of Climable’s website. When they started, our homepage barely conveyed any important information about the organization. Key pages—such as project descriptions and our team page—were not intuitively located nor was the information within them effectively organized. Using Figma, Rachel created a new design prototype that far exceeded our expectations. It was clear that Rachel profoundly understood Climable’s mission and our engagement goals across various users. The layout, utilization of brand colors, creative use of Squarespace features, and custom graphics produced a user-friendly experience that effectively draws attention to the key aspects. Now built, the website is something Climable is proud to share with funders, potential partners, and our community members. We've even received cold emails from staff of other organizations asking who designed our website—it's that good!
Without hesitation, I highly recommend Rachel for UI/UX design projects. I have no doubt they will succeed in any role they undertake. They are an excellent designer with a passion and eye for UX/UI. They will be an invaluable member of any team lucky enough to have them."
"Rachel Liang was an exceptional member of the Climable team as our first Marketing and Communications Intern. Climable desperately needed support in improving our marketing and outreach materials. So we overhauled one of our internship positions to seek a student with a passion for design and a willingness to learn alongside us. Rachel came into the role and took up the mantle with seeming ease and comfort. They were dedicated and professional, and an enthusiastic collaborator.
One of Rachel’s most important projects with us was redesigning much of Climable’s website. When they started, our homepage barely conveyed any important information about the organization. Key pages—such as project descriptions and our team page—were not intuitively located nor was the information within them effectively organized. Using Figma, Rachel created a new design prototype that far exceeded our expectations. It was clear that Rachel profoundly understood Climable’s mission and our engagement goals across various users. The layout, utilization of brand colors, creative use of Squarespace features, and custom graphics produced a user-friendly experience that effectively draws attention to the key aspects. Now built, the website is something Climable is proud to share with funders, potential partners, and our community members. We've even received cold emails from staff of other organizations asking who designed our website—it's that good!
Without hesitation, I highly recommend Rachel for UI/UX design projects. I have no doubt they will succeed in any role they undertake. They are an excellent designer with a passion and eye for UX/UI. They will be an invaluable member of any team lucky enough to have them."
