Sustainable Living Guide
Promoting sustainable living and eco-friendly practices through an accessible and community-driven platform.
Disclaimer: This project contains sensitive work, and some details have been protected following Sustainable Living Guide's NDA policy. Please reach out if you would like to learn more.
Roles:
User Research, Brand Design, Wireframes, Prototypes, and Usability Testing
Duration:
June 2023 - Feb 2024
Tools:
Figma, Canva, WordPress
Team:
3 UX Design Interns & 1 Senior UX Designer
Sustainable Living Guide is a community-driven company that provides both free resources and paid services for healthy, joyful, and sustainable living.
Through extensive online classes, programs, memberships, special events, and more, the company brings together authors, teachers, and global community resources to create a thriving world for all. The Sustainable Living Guide website offers a guide that ranges from promoting eco-friendly lifestyle choices to renewable energy and ethical consumerism. It encourages users to reduce their environmental impact, make sustainable choices, and contribute to a more eco-conscious and responsible global community.
The Problem
The website faces significant usability challenges that hinder user engagement and the promotion of holistic sustainable living practices.
While navigating through the website, there are many pain points that I encountered that needed to be addressed:
The navigation bar on the website compresses various topics to the right side of the screen, potentially causing confusion among users and hindering their ability to navigate efficiently.
The homepage lacks a clear visual brand identity, making it difficult for users to immediately grasp the site's main focus or mission. Furthermore, the website doesn't have a streamlined user journey and effective CTAs, leading to challenges in discovering desired programs, events, and classes.
The design lacks a clear hierarchy, especially concerning different color choices that may not be accessible to all users.
The comprehensive guide features sections that are text-heavy, potentially overwhelming users and making it challenging for them to quickly discern the primary objectives and find what they are looking for.
Ultimately, we determined that an unestablished brand identity and hierarchy may deter users from trusting or revisiting the website, weakening its authority in the sustainable living domain. Furthermore, unclear branding and impact might create hesitation among potential partners or sponsors, who could be concerned about misalignment with their own values.
Furthermore, with potential navigation and onboarding challenges, converting visitors into long-term customers or donors may be sub-optimal. An unsatisfactory user experience on the website could result in diminished returns on marketing campaigns and outreach efforts, potentially leading to lower ROI due to user drop-offs.
Our Goals
How can we ensure successful and positive business impact?
As it was clear the website needed business support, we brainstormed a few goals to keep in mind as we dove further into research:
Branding
Enhance the digital presence of Sustainable Living Guide, with the target of a 30% increase in website traffic to promote awareness of sustainable practices.
Build trust and credibility in our commitment to sustainability by successfully establishing a consistent brand voice across the website.
Business
Expand our network of environmentally conscious partners, aiming for a 20% growth in sustainable living partnerships.
Strengthen our grassroots impact by increasing website engagement, with the goal of a 30% rise in membership for events, programs, and classes.
Sustainability
Prioritize digital inclusivity by working towards a 30% improvement in the website's accessibility score.
Refine our information architecture to facilitate swift navigation of sustainable resources, aiming for a 50% reduction in user task completion time.
Reflect the values of community, sustainability, and professionalism through an uplifting and cohesive visual design.
RESEARCH
How can we meet our goals?
To gain a better understanding of our users' needs, we conducted user interviews. We came up with the following takeaways:
What challenges do you face when trying to find reliable and practical information on sustainable living practices?
Users struggle with an overwhelming amount of conflicting information on sustainable living practices, leading to frustration and inaction.
They find it difficult to access reliable and trustworthy resources and guidance on implementing sustainable habits in their daily lives.
There is a need for a cohesive platform that addresses various aspects of sustainable living and supports both individuals and businesses.
How do similar websites compare?
To guide our design process to address our goals and takeaways, we performed multiple rounds of competitive analysis research on similar brands to Sustainable Living Guide. We evaluated the features and functionalities offered by these competitors and identified strengths and weaknesses in terms of accessibility, inclusivity, and overall user satisfaction throughout each of our design iterations.
We also analyzed the visual aesthetics, branding strategies, and design elements employed by competitors to communicate their mission and values effectively. Lastly, we investigated key performance indicators and success metrics employed by competitors to gauge the impact of their platforms, including website traffic, user engagement, and partnership growth.
By synthesizing insights from this competitive market analysis, we were able to draw valuable conclusions to optimize the user experience on the Sustainable Living Guide website and effectively address the unique needs of our target audience.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
Given the user needs and the common trends, we created a problem statement to help guide us through design ideation of the app:
We seek to address challenges within Sustainable Living Guide's current online platform by focusing on improving user engagement and accessibility through intuitive navigation, fostering eco-conscious participation, and refining the design to better embody the values of community and sustainability, our brand voice.
Brainstorming
We want new features to streamline information to allow users to easily navigate to what they need.
Building off of our problem statement, I brainstormed features to implement in the website, drawing inspiration from the competitive research, including content placement, inclusive community-driven visuals, and clear CTAs to enhance user experience. These are some of the primary features I came up with:
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
DESIGN Iteration
Note: I am unable to show all of the exact high-fidelity designs that we ended up prototyping due to Sustainable Living Guide's NDA policy. I modified some of the designs below to comply with these guidelines.
With all of the resources the website has to offer, we needed to ensure that there were cohesive transitions between different website content.
Our initial step of design involved wireframing more than 20 pages to provide a seamless user experience. Initially, the website did not include all pages and lacked a complete user flow. So, we spent time detailing the users' journies and outlining each page's content.
By reducing cognitive load and improving accessibility, we aimed to increase viewer retention and make it easier for users to find the information they need. The new layout not only reflects the values of community, sustainability, and professionalism, but also creates an integrated visual experience. Below are some of the low-fidelity screens I created:
Our mid-fidelity designs started with independent ideation in development. But we quickly realized that we needed cohesion in our design integration.
Once the website structure was completed, we went through several iterations of brainstorming and designing cards, website sections, and the overall visual appearance, ensuring that every element aligned with our overarching vision.
We frequently revisited our competitive research, industry standards, and our user's needs to guarantee that our designs were both innovative and aligned with best practices. Through collaboration and continuous feedback, we were able to unify our ideas. This iterative process allowed us to refine our concepts and create a cohesive and visually appealing user interface that met our company's values and user expectations. Below are some examples of my design changes through the iterative process.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
I also refined the website's branding and design system to immerse users and make sure the experience felt unique and cohesive.
Color & Typography
As we refined the Sustainable Living Guide website, I made strategic changes to our typography and color palette to better align with our brand voice and improve overall user experience. Initially, we used Lato for our primary font, but through extensive testing, I identified that Lato's spacing and widened typography did not fully speak to our mission. After numerous comparisons and mockup evaluations, I chose Open Sans as our primary font for its modern yet inviting tone, creative yet subtle curvature that provides an accessible visual appearance, and community-like kerning.
In terms of color, our initial palette faced challenges regarding web safety and universal applicability. Although market research revealed that strict adherence to web-safe colors was unnecessary, I still sought to refine our palette to further enhance our company's mission for sustainable accessibility. I adopted a color adjustment strategy that involved using the RGB scale to fine-tune blue and green tones, maintaining the integrity of our general colors while following the WCAG 2.1 AA guidelines for all users. This resulted in a palette that is cohesive and more vibrant yet fully ADA-accessible, providing a visually engaging natural, healthy, and joyful tone that conveys our values.
Responsive Design
In addition to refining the typography and color palette, we developed a responsive design system to ensure the Sustainable Living Guide website provides an optimal user experience across various devices and screen sizes. By leveraging flexible grid layouts, we ensured that all elements, including text, images, and interactive components, scale seamlessly not just on larger screens but on tablets and smartphones as well. This responsiveness enhances the usability of the website for day-to-day life and also reinforces our commitment to inclusivity. By prioritizing responsive design, we ensure that our message of sustainable living reaches a broader audience, promoting eco-friendly practices and fostering a global community.
Within a few months of learning the company and its users inside and out, we redesigned and rebranded the Sustainable Living Guide website on mobile, tablet, laptop, and desktop.
Throughout this process, we followed our principles for efficient, scalable, and accessible design. Most importantly, we kept our brand voice in mind throughout all stages of the design process, making sure our final product truly spoke to the users and established itself as an authentic leader in the sustainable living marketplace. Here are a few of the website components that we built!
Final Thoughts
Implementing accessible design is a difficult process.
From the outset, I was committed to ensuring the website was accessible to all users, but I did not realize how much research I had to gather through WCAG guidelines and ADA compliance to fully understand the significance and complexity of website accessibility. Learning about the importance of SEO, implementing text-to-speech compatibility, and ensuring web-safe color contrasts were all parts of the design process that were new to me, but I found the experience gratifying. I was also surprised by how specific the guidelines were, from discovering that rounded designs and splitting concise information into easily digestible sections are crucial for improving accessibility. This journey not only expanded my knowledge but also deepened my appreciation for the importance of inclusive design.
A large-scale project requires constant teamwork and collaboration.
Developing a consistent and scalable design system was another significant challenge, as this was the first time I had worked on redesigning such a large-scale website where we refined the fonts and colors, created all new components, and even adjusted our designs for multiple screen sizes. I learned so much from my team members and our senior designer, who helped us immensely with shortcuts and organization. By working collaboratively, we were able to strike a balance between vibrancy and accessibility in our design system.
I learned how to step up to new design challenges.
Taking initiative on adopting a new typeface for the website was a totally new but rewarding experience. I never knew how detailed a font could be until I spent countless hours researching and analyzing various fonts from Google Fonts, taking note of the kerning, stroke, serif, and aperture of each letter. Through detailed comparisons and mockup evaluations, the ultimate decision to land on Open Sans was immensely gratifying, as it demonstrated how my choice significantly enhanced visual accessibility and alignment with our brand values. Knowing that my efforts created a tangible, meaningful impact on the user experience is profoundly valuable to me.
This project was not only about improving my design skills but also about creating meaningful products that promote sustainability.
I am truly glad I could advocate for my values of eco-consciousness and sustainable living by showcasing them through thoughtful design choices. The knowledge and skills I've gained from this project have equipped me to continue advocating for sustainable practices through impactful design.
I was gratified to see how the strategic changes we implemented could lead to significant business success.
This was the first large-scale project I saw through to development, and I hope to measure success by assessing website traffic, membership and partnership engagement, and long-term awareness of environmental impact and sustainable practices. Establishing a consistent brand voice and ADA accessibility standards across the website will hopefully build trust and credibility in our commitment to sustainability, and I hope to see that reflected in the website's user retention.
Sustainable Living Guide
Promoting sustainable living and eco-friendly practices through an accessible and community-driven platform.
Disclaimer: This project contains sensitive work, and some details have been protected following Sustainable Living Guide's NDA policy. Please reach out if you would like to learn more.
Roles:
User Research, Brand Design, Wireframes, Prototypes, and Usability Testing
Duration:
June 2023 - Feb 2024
Tools:
Figma, Canva, WordPress
Team:
3 UX Design Interns & 1 Senior UX Designer
Sustainable Living Guide is a community-driven company that provides both free resources and paid services for healthy, joyful, and sustainable living.
Through extensive online classes, programs, memberships, special events, and more, the company brings together authors, teachers, and global community resources to create a thriving world for all. The Sustainable Living Guide website offers a guide that ranges from promoting eco-friendly lifestyle choices to renewable energy and ethical consumerism. It encourages users to reduce their environmental impact, make sustainable choices, and contribute to a more eco-conscious and responsible global community.
The Problem
The website faces significant usability challenges that hinder user engagement and the promotion of holistic sustainable living practices.
While navigating through the website, there are many pain points that I encountered that needed to be addressed:
The navigation bar on the website compresses various topics to the right side of the screen, potentially causing confusion among users and hindering their ability to navigate efficiently.
The homepage lacks a clear visual brand identity, making it difficult for users to immediately grasp the site's main focus or mission. Furthermore, the website doesn't have a streamlined user journey and effective CTAs, leading to challenges in discovering desired programs, events, and classes.
The design lacks a clear hierarchy, especially concerning different color choices that may not be accessible to all users.
The comprehensive guide features sections that are text-heavy, potentially overwhelming users and making it challenging for them to quickly discern the primary objectives and find what they are looking for.
Ultimately, we determined that an unestablished brand identity and hierarchy may deter users from trusting or revisiting the website, weakening its authority in the sustainable living domain. Furthermore, unclear branding and impact might create hesitation among potential partners or sponsors, who could be concerned about misalignment with their own values.
Furthermore, with potential navigation and onboarding challenges, converting visitors into long-term customers or donors may be sub-optimal. An unsatisfactory user experience on the website could result in diminished returns on marketing campaigns and outreach efforts, potentially leading to lower ROI due to user drop-offs.
Our Goals
How can we ensure successful and positive business impact?
As it was clear the website needed business support, we brainstormed a few goals to keep in mind as we dove further into research:
Branding
Enhance the digital presence of Sustainable Living Guide, with the target of a 30% increase in website traffic to promote awareness of sustainable practices.
Build trust and credibility in our commitment to sustainability by successfully establishing a consistent brand voice across the website.
Business
Expand our network of environmentally conscious partners, aiming for a 20% growth in sustainable living partnerships.
Strengthen our grassroots impact by increasing website engagement, with the goal of a 30% rise in membership for events, programs, and classes.
Sustainability
Prioritize digital inclusivity by working towards a 30% improvement in the website's accessibility score.
Refine our information architecture to facilitate swift navigation of sustainable resources, aiming for a 50% reduction in user task completion time.
Reflect the values of community, sustainability, and professionalism through an uplifting and cohesive visual design.
RESEARCH
How can we meet our goals?
To gain a better understanding of our users' needs, we conducted user interviews. We came up with the following takeaways:
What challenges do you face when trying to find reliable and practical information on sustainable living practices?
Users struggle with an overwhelming amount of conflicting information on sustainable living practices, leading to frustration and inaction.
They find it difficult to access reliable and trustworthy resources and guidance on implementing sustainable habits in their daily lives.
There is a need for a cohesive platform that addresses various aspects of sustainable living and supports both individuals and businesses.
How do similar websites compare?
To guide our design process to address our goals and takeaways, we performed multiple rounds of competitive analysis research on similar brands to Sustainable Living Guide. We evaluated the features and functionalities offered by these competitors and identified strengths and weaknesses in terms of accessibility, inclusivity, and overall user satisfaction throughout each of our design iterations.
We also analyzed the visual aesthetics, branding strategies, and design elements employed by competitors to communicate their mission and values effectively. Lastly, we investigated key performance indicators and success metrics employed by competitors to gauge the impact of their platforms, including website traffic, user engagement, and partnership growth.
By synthesizing insights from this competitive market analysis, we were able to draw valuable conclusions to optimize the user experience on the Sustainable Living Guide website and effectively address the unique needs of our target audience.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
Given the user needs and the common trends, we created a problem statement to help guide us through design ideation of the app:
We seek to address challenges within Sustainable Living Guide's current online platform by focusing on improving user engagement and accessibility through intuitive navigation, fostering eco-conscious participation, and refining the design to better embody the values of community and sustainability, our brand voice.
Brainstorming
We want new features to streamline information to allow users to easily navigate to what they need.
Building off of our problem statement, I brainstormed features to implement in the website, drawing inspiration from the competitive research, including content placement, inclusive community-driven visuals, and clear CTAs to enhance user experience. These are some of the primary features I came up with:
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
DESIGN Iteration
Note: I am unable to show all of the exact high-fidelity designs that we ended up prototyping due to Sustainable Living Guide's NDA policy. I modified some of the designs below to comply with these guidelines.
With all of the resources the website has to offer, we needed to ensure that there were cohesive transitions between different website content.
Our initial step of design involved wireframing more than 20 pages to provide a seamless user experience. Initially, the website did not include all pages and lacked a complete user flow. So, we spent time detailing the users' journies and outlining each page's content.
By reducing cognitive load and improving accessibility, we aimed to increase viewer retention and make it easier for users to find the information they need. The new layout not only reflects the values of community, sustainability, and professionalism, but also creates an integrated visual experience. Below are some of the low-fidelity screens I created:
Our mid-fidelity designs started with independent ideation in development. But we quickly realized that we needed cohesion in our design integration.
Once the website structure was completed, we went through several iterations of brainstorming and designing cards, website sections, and the overall visual appearance, ensuring that every element aligned with our overarching vision.
We frequently revisited our competitive research, industry standards, and our user's needs to guarantee that our designs were both innovative and aligned with best practices. Through collaboration and continuous feedback, we were able to unify our ideas. This iterative process allowed us to refine our concepts and create a cohesive and visually appealing user interface that met our company's values and user expectations. Below are some examples of my design changes through the iterative process.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
I also refined the website's branding and design system to immerse users and make sure the experience felt unique and cohesive.
Color & Typography
As we refined the Sustainable Living Guide website, I made strategic changes to our typography and color palette to better align with our brand voice and improve overall user experience. Initially, we used Lato for our primary font, but through extensive testing, I identified that Lato's spacing and widened typography did not fully speak to our mission. After numerous comparisons and mockup evaluations, I chose Open Sans as our primary font for its modern yet inviting tone, creative yet subtle curvature that provides an accessible visual appearance, and community-like kerning.
In terms of color, our initial palette faced challenges regarding web safety and universal applicability. Although market research revealed that strict adherence to web-safe colors was unnecessary, I still sought to refine our palette to further enhance our company's mission for sustainable accessibility. I adopted a color adjustment strategy that involved using the RGB scale to fine-tune blue and green tones, maintaining the integrity of our general colors while following the WCAG 2.1 AA guidelines for all users. This resulted in a palette that is cohesive and more vibrant yet fully ADA-accessible, providing a visually engaging natural, healthy, and joyful tone that conveys our values.
Responsive Design
In addition to refining the typography and color palette, we developed a responsive design system to ensure the Sustainable Living Guide website provides an optimal user experience across various devices and screen sizes. By leveraging flexible grid layouts, we ensured that all elements, including text, images, and interactive components, scale seamlessly not just on larger screens but on tablets and smartphones as well. This responsiveness enhances the usability of the website for day-to-day life and also reinforces our commitment to inclusivity. By prioritizing responsive design, we ensure that our message of sustainable living reaches a broader audience, promoting eco-friendly practices and fostering a global community.
Within a few months of learning the company and its users inside and out, we redesigned and rebranded the Sustainable Living Guide website on mobile, tablet, laptop, and desktop.
Throughout this process, we followed our principles for efficient, scalable, and accessible design. Most importantly, we kept our brand voice in mind throughout all stages of the design process, making sure our final product truly spoke to the users and established itself as an authentic leader in the sustainable living marketplace. Here are a few of the website components that we built!
Final Thoughts
Implementing accessible design is a difficult process.
From the outset, I was committed to ensuring the website was accessible to all users, but I did not realize how much research I had to gather through WCAG guidelines and ADA compliance to fully understand the significance and complexity of website accessibility. Learning about the importance of SEO, implementing text-to-speech compatibility, and ensuring web-safe color contrasts were all parts of the design process that were new to me, but I found the experience gratifying. I was also surprised by how specific the guidelines were, from discovering that rounded designs and splitting concise information into easily digestible sections are crucial for improving accessibility. This journey not only expanded my knowledge but also deepened my appreciation for the importance of inclusive design.
A large-scale project requires constant teamwork and collaboration.
Developing a consistent and scalable design system was another significant challenge, as this was the first time I had worked on redesigning such a large-scale website where we refined the fonts and colors, created all new components, and even adjusted our designs for multiple screen sizes. I learned so much from my team members and our senior designer, who helped us immensely with shortcuts and organization. By working collaboratively, we were able to strike a balance between vibrancy and accessibility in our design system.
I learned how to step up to new design challenges.
Taking initiative on adopting a new typeface for the website was a totally new but rewarding experience. I never knew how detailed a font could be until I spent countless hours researching and analyzing various fonts from Google Fonts, taking note of the kerning, stroke, serif, and aperture of each letter. Through detailed comparisons and mockup evaluations, the ultimate decision to land on Open Sans was immensely gratifying, as it demonstrated how my choice significantly enhanced visual accessibility and alignment with our brand values. Knowing that my efforts created a tangible, meaningful impact on the user experience is profoundly valuable to me.
This project was not only about improving my design skills but also about creating meaningful products that promote sustainability.
I am truly glad I could advocate for my values of eco-consciousness and sustainable living by showcasing them through thoughtful design choices. The knowledge and skills I've gained from this project have equipped me to continue advocating for sustainable practices through impactful design.
I was gratified to see how the strategic changes we implemented could lead to significant business success.
This was the first large-scale project I saw through to development, and I hope to measure success by assessing website traffic, membership and partnership engagement, and long-term awareness of environmental impact and sustainable practices. Establishing a consistent brand voice and ADA accessibility standards across the website will hopefully build trust and credibility in our commitment to sustainability, and I hope to see that reflected in the website's user retention.
Sustainable Living Guide
Promoting sustainable living and eco-friendly practices through an accessible and community-driven platform.
Disclaimer: This project contains sensitive work, and some details have been protected following Sustainable Living Guide's NDA policy. Please reach out if you would like to learn more.
Roles:
User Research, Brand Design, Wireframes, Prototypes, and Usability Testing
Duration:
June 2023 - Feb 2024
Tools:
Figma, Canva, WordPress
Team:
3 UX Design Interns & 1 Senior UX Designer
Sustainable Living Guide is a community-driven company that provides both free resources and paid services for healthy, joyful, and sustainable living.
Through extensive online classes, programs, memberships, special events, and more, the company brings together authors, teachers, and global community resources to create a thriving world for all. The Sustainable Living Guide website offers a guide that ranges from promoting eco-friendly lifestyle choices to renewable energy and ethical consumerism. It encourages users to reduce their environmental impact, make sustainable choices, and contribute to a more eco-conscious and responsible global community.
The Problem
The website faces significant usability challenges that hinder user engagement and the promotion of holistic sustainable living practices.
While navigating through the website, there are many pain points that I encountered that needed to be addressed:
The navigation bar on the website compresses various topics to the right side of the screen, potentially causing confusion among users and hindering their ability to navigate efficiently.
The homepage lacks a clear visual brand identity, making it difficult for users to immediately grasp the site's main focus or mission. Furthermore, the website doesn't have a streamlined user journey and effective CTAs, leading to challenges in discovering desired programs, events, and classes.
The design lacks a clear hierarchy, especially concerning different color choices that may not be accessible to all users.
The comprehensive guide features sections that are text-heavy, potentially overwhelming users and making it challenging for them to quickly discern the primary objectives and find what they are looking for.
Ultimately, we determined that an unestablished brand identity and hierarchy may deter users from trusting or revisiting the website, weakening its authority in the sustainable living domain. Furthermore, unclear branding and impact might create hesitation among potential partners or sponsors, who could be concerned about misalignment with their own values.
Furthermore, with potential navigation and onboarding challenges, converting visitors into long-term customers or donors may be sub-optimal. An unsatisfactory user experience on the website could result in diminished returns on marketing campaigns and outreach efforts, potentially leading to lower ROI due to user drop-offs.
Our Goals
How can we ensure successful and positive business impact?
As it was clear the website needed business support, we brainstormed a few goals to keep in mind as we dove further into research:
Branding
Enhance the digital presence of Sustainable Living Guide, with the target of a 30% increase in website traffic to promote awareness of sustainable practices.
Build trust and credibility in our commitment to sustainability by successfully establishing a consistent brand voice across the website.
Business
Expand our network of environmentally conscious partners, aiming for a 20% growth in sustainable living partnerships.
Strengthen our grassroots impact by increasing website engagement, with the goal of a 30% rise in membership for events, programs, and classes.
Sustainability
Prioritize digital inclusivity by working towards a 30% improvement in the website's accessibility score.
Refine our information architecture to facilitate swift navigation of sustainable resources, aiming for a 50% reduction in user task completion time.
Reflect the values of community, sustainability, and professionalism through an uplifting and cohesive visual design.
RESEARCH
How can we meet our goals?
To gain a better understanding of our users' needs, we conducted user interviews. We came up with the following takeaways:
What challenges do you face when trying to find reliable and practical information on sustainable living practices?
Users struggle with an overwhelming amount of conflicting information on sustainable living practices, leading to frustration and inaction.
They find it difficult to access reliable and trustworthy resources and guidance on implementing sustainable habits in their daily lives.
There is a need for a cohesive platform that addresses various aspects of sustainable living and supports both individuals and businesses.
How do similar websites compare?
To guide our design process to address our goals and takeaways, we performed multiple rounds of competitive analysis research on similar brands to Sustainable Living Guide. We evaluated the features and functionalities offered by these competitors and identified strengths and weaknesses in terms of accessibility, inclusivity, and overall user satisfaction throughout each of our design iterations.
We also analyzed the visual aesthetics, branding strategies, and design elements employed by competitors to communicate their mission and values effectively. Lastly, we investigated key performance indicators and success metrics employed by competitors to gauge the impact of their platforms, including website traffic, user engagement, and partnership growth.
By synthesizing insights from this competitive market analysis, we were able to draw valuable conclusions to optimize the user experience on the Sustainable Living Guide website and effectively address the unique needs of our target audience.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
MindValley
MindValley utilizes high-quality visuals and engaging videos paired with clear, strategically placed CTAs to enhance user engagement and navigation.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
WholeFoods
Whole Foods adopts a consistent, earthy color scheme and uses card-based design elements to strengthen branding and organize content effectively.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
Ecoversity
Ecoversity focuses on building an inclusive community through accessible educational content and a community-driven design to boost user satisfaction.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
One Commune
One Commune incorporates interactive slideshows and ensures the design consistently communicates their mission to increase user engagement and trust.
Given the user needs and the common trends, we created a problem statement to help guide us through design ideation of the app:
We seek to address challenges within Sustainable Living Guide's current online platform by focusing on improving user engagement and accessibility through intuitive navigation, fostering eco-conscious participation, and refining the design to better embody the values of community and sustainability, our brand voice.
Brainstorming
We want new features to streamline information to allow users to easily navigate to what they need.
Building off of our problem statement, I brainstormed features to implement in the website, drawing inspiration from the competitive research, including content placement, inclusive community-driven visuals, and clear CTAs to enhance user experience. These are some of the primary features I came up with:
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Interactive Cards
Organized information without overwhelming users, presenting key content in a structured, easily navigable format
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Breather Rows
Space to improve user experience and establish brand voice, ensuring the site is not cluttered and overwhelming
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
Credible Information
Resources that provide various opportunities to implement practical sustainable living practices
DESIGN Iteration
Note: I am unable to show all of the exact high-fidelity designs that we ended up prototyping due to Sustainable Living Guide's NDA policy. I modified some of the designs below to comply with these guidelines.
With all of the resources the website has to offer, we needed to ensure that there were cohesive transitions between different website content.
Our initial step of design involved wireframing more than 20 pages to provide a seamless user experience. Initially, the website did not include all pages and lacked a complete user flow. So, we spent time detailing the users' journies and outlining each page's content.
By reducing cognitive load and improving accessibility, we aimed to increase viewer retention and make it easier for users to find the information they need. The new layout not only reflects the values of community, sustainability, and professionalism, but also creates an integrated visual experience. Below are some of the low-fidelity screens I created:
Our mid-fidelity designs started with independent ideation in development. But we quickly realized that we needed cohesion in our design integration.
Once the website structure was completed, we went through several iterations of brainstorming and designing cards, website sections, and the overall visual appearance, ensuring that every element aligned with our overarching vision.
We frequently revisited our competitive research, industry standards, and our user's needs to guarantee that our designs were both innovative and aligned with best practices. Through collaboration and continuous feedback, we were able to unify our ideas. This iterative process allowed us to refine our concepts and create a cohesive and visually appealing user interface that met our company's values and user expectations. Below are some examples of my design changes through the iterative process.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Hero Image
VERSION #1
The first design iteration, while functional, was not accessible, failing to meet usability standards for all users.
Final version
By reducing unnecessary features and framing the text with a gradient, I successfully achieved accessibility and communicated our brand values of natural immersion and vibrance.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Project Cards
VERSION #1
While the design successfully promoted our values, it lacked room for descriptions and made it difficult to view multiple cards at once, affecting usability
Final version
Research indicated the need for detailed descriptions, so I added more space while maintaining image focus, accessibility, and design consistency.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Testimonials
VERSION #1
This design contained all the necessary information but was not scalable.
Final version
The updated design provided more space and reflected industry standards.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Pricing Tiers
VERSION #1
The initial design limited space for displaying features and lacked a clear visual hierarchy between CTAs and pricing details.
Final version
The revised design incorporated best practices by prioritizing visibility, with a greater emphasis on the title and a rounded button at the bottom for improved accessibility.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Article Cards
VERSION #1
The design, while having adequate space for all information, did not differentiate itself from the project cards and lacked a CTA.
Final version
The design features a smaller, more spacious layout that accommodates more specific article details, presenting a more cohesive look that resembles a traditional article format.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Event Cards
VERSION #1
The initial iteration was too wide, limiting space for additional information and making it difficult to organize content effectively.
Final version
I successfully organized all information into the final design, integrating marketing icons and establishing a clear visual hierarchy with CTAs.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
Enrollment
VERSION #1
Too much white space was utilized with no supporting information, which didn't promote our brand values.
Final version
I incorporated a more vibrant visual within the form layout and added standard inputs, making the design more streamlined and visually appealing.
I also refined the website's branding and design system to immerse users and make sure the experience felt unique and cohesive.
Color & Typography
As we refined the Sustainable Living Guide website, I made strategic changes to our typography and color palette to better align with our brand voice and improve overall user experience. Initially, we used Lato for our primary font, but through extensive testing, I identified that Lato's spacing and widened typography did not fully speak to our mission. After numerous comparisons and mockup evaluations, I chose Open Sans as our primary font for its modern yet inviting tone, creative yet subtle curvature that provides an accessible visual appearance, and community-like kerning.
In terms of color, our initial palette faced challenges regarding web safety and universal applicability. Although market research revealed that strict adherence to web-safe colors was unnecessary, I still sought to refine our palette to further enhance our company's mission for sustainable accessibility. I adopted a color adjustment strategy that involved using the RGB scale to fine-tune blue and green tones, maintaining the integrity of our general colors while following the WCAG 2.1 AA guidelines for all users. This resulted in a palette that is cohesive and more vibrant yet fully ADA-accessible, providing a visually engaging natural, healthy, and joyful tone that conveys our values.
Responsive Design
In addition to refining the typography and color palette, we developed a responsive design system to ensure the Sustainable Living Guide website provides an optimal user experience across various devices and screen sizes. By leveraging flexible grid layouts, we ensured that all elements, including text, images, and interactive components, scale seamlessly not just on larger screens but on tablets and smartphones as well. This responsiveness enhances the usability of the website for day-to-day life and also reinforces our commitment to inclusivity. By prioritizing responsive design, we ensure that our message of sustainable living reaches a broader audience, promoting eco-friendly practices and fostering a global community.
Within a few months of learning the company and its users inside and out, we redesigned and rebranded the Sustainable Living Guide website on mobile, tablet, laptop, and desktop.
Throughout this process, we followed our principles for efficient, scalable, and accessible design. Most importantly, we kept our brand voice in mind throughout all stages of the design process, making sure our final product truly spoke to the users and established itself as an authentic leader in the sustainable living marketplace. Here are a few of the website components that we built!
Final Thoughts
Implementing accessible design is a difficult process.
From the outset, I was committed to ensuring the website was accessible to all users, but I did not realize how much research I had to gather through WCAG guidelines and ADA compliance to fully understand the significance and complexity of website accessibility. Learning about the importance of SEO, implementing text-to-speech compatibility, and ensuring web-safe color contrasts were all parts of the design process that were new to me, but I found the experience gratifying. I was also surprised by how specific the guidelines were, from discovering that rounded designs and splitting concise information into easily digestible sections are crucial for improving accessibility. This journey not only expanded my knowledge but also deepened my appreciation for the importance of inclusive design.
A large-scale project requires constant teamwork and collaboration.
Developing a consistent and scalable design system was another significant challenge, as this was the first time I had worked on redesigning such a large-scale website where we refined the fonts and colors, created all new components, and even adjusted our designs for multiple screen sizes. I learned so much from my team members and our senior designer, who helped us immensely with shortcuts and organization. By working collaboratively, we were able to strike a balance between vibrancy and accessibility in our design system.
I learned how to step up to new design challenges.
Taking initiative on adopting a new typeface for the website was a totally new but rewarding experience. I never knew how detailed a font could be until I spent countless hours researching and analyzing various fonts from Google Fonts, taking note of the kerning, stroke, serif, and aperture of each letter. Through detailed comparisons and mockup evaluations, the ultimate decision to land on Open Sans was immensely gratifying, as it demonstrated how my choice significantly enhanced visual accessibility and alignment with our brand values. Knowing that my efforts created a tangible, meaningful impact on the user experience is profoundly valuable to me.
This project was not only about improving my design skills but also about creating meaningful products that promote sustainability.
I am truly glad I could advocate for my values of eco-consciousness and sustainable living by showcasing them through thoughtful design choices. The knowledge and skills I've gained from this project have equipped me to continue advocating for sustainable practices through impactful design.
I was gratified to see how the strategic changes we implemented could lead to significant business success.
This was the first large-scale project I saw through to development, and I hope to measure success by assessing website traffic, membership and partnership engagement, and long-term awareness of environmental impact and sustainable practices. Establishing a consistent brand voice and ADA accessibility standards across the website will hopefully build trust and credibility in our commitment to sustainability, and I hope to see that reflected in the website's user retention.