Redesigning Clark EcoEnergy’s website to reflect their mission, showcase their work, and support their growth in renewable energy.
Role
Lead Designer
Date
2024
Type
Web Design
Tools
Figma
Overview
Clark EcoEnergy, a commercial solar energy service provider, sought a complete rebrand and website redesign to establish a modern, visually compelling online presence. With an outdated HTML table-based website and no clear brand identity, the project focused on building a site that could showcase the company’s work, communicate its values, and stand out among competitors.
Goals
The primary goal was to redesign the website and to establish a bold and cohesive brand for Clark EcoEnergy, including a new logo and visual identity. The website needed to stand out among competitors with a modern and visually appealing design that showcased the company’s case studies through images and videos. Additional objectives included defining a clear voice and tone for the brand, ensuring the site was fully responsive, and creating a CMS that allowed the client to easily auto-generate content without requiring ongoing development efforts, saving time and money.
Problem
Clark EcoEnergy’s website lacked branding, visual appeal, content and modern functionality. The old site was built as a basic HTML table, with limited content and no responsiveness, making it inadequate for showcasing their work or attracting clients.
My Role
As the lead web designer, I collaborated with stakeholders to define project requirements, align on messaging, and oversee the design process from concept to implementation. I also wrote the UX language used throughout the site, video script, directed creative with the video team, and worked closely with the front-end engineer to ensure the designs were accurately implemented.
Design Process
Logo Design
I reimagined the existing logo into a stylized sun symbolizing renewable energy’s cyclical nature. Using green for eco-friendliness and yellow for solar energy, the design reinforced the company’s sustainability mission.
Brand Guidelines
I developed a comprehensive brand guideline document, including color palettes, typography, logo orientations, iconography, and photography direction. This created a cohesive identity for the company across all touchpoints.
Landing Page
To support early development efforts, I designed a minimalistic splash page using the brand guidelines. This interim page helped establish an on-brand look while the final site was under development.
Low-Fidelity Designs
Using Figma, I created low-fidelity interactive prototypes to structure the site’s information architecture. Collaborating with stakeholders, I clarified content relationships and prioritized features, ensuring the design aligned with technical and business goals.
High-Fidelity Designs
After receiving approval on the low-fidelity designs, I began exploring high-fidelity concepts to bring the site to life. My initial approach focused on a simpler format with green accents to align with the brand’s identity. However, feedback from stakeholders indicated that the homepage lacked the bold, premium feel they wanted. Taking this feedback into account, I returned to the drawing board to create a more dynamic and visually engaging experience while considering technological constraints.
For the updated homepage, I introduced several enhancements to deliver the desired "wow" factor. These included:
A prominent hero section with video to immediately capture attention.
Micro-animations that activate on scroll to create a polished, interactive feel.
Sticky modules that enhance usability while maintaining user focus.
Refined use of patterns and textures to establish a more premium look and feel.
In addition to the homepage, I designed case study templates tailored for seamless integration with the CMS. These templates were structured to allow easy data entry and automatic population into the site, including the generation of URLs. This ensured efficiency and consistency across the platform.
Given that the existing site was built on static HTML tables and lacked responsiveness, the new designs were crafted to accommodate mobile viewports. This step ensured the site would provide a modern, user-friendly experience on all devices.
To help the client visualize the new experience before committing to development, I created a high-fidelity interactive prototype. This prototype allowed stakeholders to interact with the site and provide feedback on the design. After just one iteration, the design was approved for development.
Components
To streamline development and maintain consistency across the design system, I expanded upon the brand guidelines and created modular components in Figma. This approach ensured that key design elements could be easily reused and updated across multiple pages and frames, reducing the risk of discrepancies.
Building components is one of my preferred methods for tackling these challenges, as it enables scalability and efficiency throughout the design process. Changes made to a single component propagate automatically across all instances, allowing for quick iterations and alignment with evolving requirements. This approach not only saved time during the design phase but also supported a smoother handoff to developers by providing clear, reusable design assets.
Video Creation
I scripted the video’s core concept and enhanced it using AI tools like ChatGPT for persona modeling. Collaborating with the video team, I art-directed graphics, transitions, and voiceovers to align with the brand’s tone.
Setting Up Details
To expand Clark EcoEnergy’s digital presence, I set up a Google Business Profile and a YouTube channel. The YouTube channel was integral to the case study CMS, allowing clients to upload drone footage and embed videos directly. Also prepared the open graph image, favicon, and worked with SEO to write metadata for the site.
Development Collaboration
I worked closely with the full-stack developer to ensure accurate implementation of animations, micro-interactions, and responsiveness. Together, we streamlined the CMS to allow the client to add new case studies by uploading videos, images, and project details, which would automatically populate the gallery and project pages.
Measuring Success
The redesigned website successfully transformed Clark EcoEnergy’s online presence, providing a visually compelling and user-friendly platform. Mobile traffic increased by 4% within three months of launch, indicating improved accessibility. Despite not using paid advertising, the site achieved steady traffic through organic reach, demonstrating its effectiveness in engaging the target audience. The CMS allowed the client to add new case studies seamlessly, ensuring long-term sustainability and efficiency. Also, through heatmaps via Microsoft Clarity, we were able to validate our design decisions, and that our users were using the site as intended.
Learnings and Feedback
The project highlighted the challenges of working within WordPress’s technological limitations, particularly in balancing cost-effectiveness and advanced functionality. Additionally, delays in receiving necessary project assets early on created time pressures as the deadline approached, emphasizing the importance of thorough pre-planning and asset collection in future projects.
Next Steps
Moving forward, the site will be monitored for user behavior to gather insights and identify areas for further optimization. Efforts will also focus on ensuring the CMS remains functional and intuitive, allowing the client to maintain and expand their case study gallery effortlessly as new projects are completed.
Conclusion
The Clark EcoEnergy redesign successfully transformed an outdated website into a modern, visually compelling platform that aligns with the company’s goals and values. By creating a scalable CMS, the site is equipped for future growth, empowering the client to manage their content independently while showcasing their work to potential customers effectively.
