Web Design for sustainable Tech
Conversion-boosting marketing website for a B2B climate tech startup.
Project description
Our team at Moment Studio collaborated with the founders of ESG Explorer to revamp key elements of their visual identity and marketing website. The goal was to create a cohesive brand identity rooted in their existing logo while enhancing conversion rates and facilitating lead acquisition for product demos and sign-ups. This website redesign was part of a partial rebrand that ultimately helped ESG Explorer secure funding from GSD Venture Studios.
Background
ESG Explorer is a B2B SaaS platform that utilizes AI-driven primary data and analytics to deliver real-time insights into sustainability goals.
Role
As the Lead Product Designer for the project, I worked closely with an Agile team that included a project manager and four UX/UI designers to oversee the entire design process, from testing to design and handoff.
Timeline
6-week sprint
Impact
Final deliverables included a new sitemap, content design, high-fidelity mockups, brand assets, and a UI style guide. The site is now live and driving conversion for product demo sign-ups.
Process
Working in collaboration with a project manager and an Agile team of four UX/UI designers, I led the process from discovery through handoff to redesign the ESG Explorer branding kit and marketing website.
Discovery
As the team lead, I managed all stakeholder communication. To kick off the project, I conducted discovery calls with the stakeholders (CEO & Chief of Staff). Our collaboration with the team and the founders was instrumental in conducting a heuristic evaluation to determine key pain points on the current website. As part of the discovery phase, we also conducted a competitor analysis to guide brand strategy for the partial rebrand based on the current ESG Explorer logo.
Discovery informed our decision to focus on the following design and business outcomes across the rebrand and new marketing website:
Improve lead generation and user engagement through improved UI and content design.
Increase conversion for demo and contact form submissions.
Enhance information architecture and navigation to showcase key product features and form submissions.
Ideation
I led the team through multiple iterations of user flows and sitemaps, collaborating closely with founders to restructure the information architecture around three key products: ESG Process Explorer, Manager, and Cockpit.
User Flows: We targeted six user stories related to learning about ESG Explorer and the SaaS products.
Wireframing: Our team created low and medium-fidelity wireframes for six essential pages and redesigned site navigation. The wireframing stage was helpful when refining the copy and content layouts.
Team & Stakeholder Collaboration: Throughout the process, I maintained project momentum by delegating tasks effectively, conducting regular design reviews, and facilitating collaborative sessions with both team members and stakeholders to ensure alignment with business objectives while optimizing the user experience.
Design & Rebrand
During the design phase, I oversaw the rebrand and web design from UI iterations to final high-fidelity designs.
The web redesign encompassed six pages of the website. My direct contributions included designing the Products page, refining Homepage sections, and maintaining the component library while supporting team members through component refinement and quality assurance.
Handoff
For the ESG Explorer project handoff, we prioritized comprehensive developer documentation. We used Figma's measure plug-in to annotate spacing, component specifications, and typography details to enable a smooth transition from the founder to the CTO.
Results
The final deliverable achieved a user-friendly, scalable website with a clear brand identity featuring streamlined navigation, updated copy, and intuitive product demonstrations—all supporting the client goals for improved user engagement and demo sign-ups.
Solution
Throughout the project, I managed stakeholder feedback and supported team members by refining various components, content design, and UI/UX design across one or more sections of all key landing pages. I designed the Products page and contributed to redesigning the Homepage. To ensure we delivered pixel-perfect scalable deliverables during handoff, I also led the design and maintenance of our component library and style guide, demonstrating our team's commitment to delivering high-quality work.
Revamped Homepage
The new homepage features clear CTAs in the header section encouraging demo sign-up. Engaging lush visuals emphasizing the beauty of the environment supports ESG Explorer's brand identity as a climate-focused startup with a mission to stop greenwashing in the ESG industry. The choice of these visuals and the placement of CTAs were made to create a seamless user journey and encourage users to explore the site further.
New Products Page
I worked with the stakeholders to identify three of their software products to feature for this website version. I updated copy and imagery and used a combination of lists and UI cards with simple warm neutrals to call product features in an easy-to-scan format.
Easy Demo & Contact Sign-Up
Collaborating with the team, I helped to design the new contact and demo sign-up pages.
Updated Visual Identity
The rebrand incorporated the existing logo. I lead the design of a new visual identity, including a new color palette channeling natural hues of green with orange accents to reference the logo colors. We chose clean and modern open-source sans-serif typography, using Poppins for headers and Source Sans Pro for body text. I lead the creation of a new UI style guide with everything from colors to typography and base components.
Results & Retrospective
Partnering with a mission-driven startup behind an impactful SaaS product striving to decrease our collective carbon footprint was rewarding. During this project, I deepened my industry knowledge about the fintech and sustainability space, and I'm excited to explore this further!
While the initial site launch was successful, future improvements could include prototyping core interactions, expanding the Resources page with FAQs and product demos, and tracking key metrics like demo sign-ups and engagement.
Agile Principles Deliver Results
In leading a team of four designers across various time zones, I embraced the challenge of project management and balancing momentum with cohesive teamwork. Implementing an agile approach allowed adaptability, daily synchronization through stand-ups, and a flexible project roadmap.
Collaboration During Handoff
Following the implementation of our redesign, I uncovered gaps between the approved designs and the live site despite careful planning and a detailed handoff file. In the future, I will prioritize frequent design reviews and open communication to keep stakeholders aligned pre-launch and proactively identify and resolve any discrepancies during the development phase.
