Project Overview
Edgecom Energy is a SaaS company that builds energy management software for industrial clients. As the company prepares to expand into the U.S. market, it became clear that the existing website could not support the business goals. The website felt outdated, lacked clarity, and didn’t position Edgecom as the technology-first company it was becoming.
I was responsible for leading the redesign from start to finish. This included setting the design direction, mapping out the information architecture, coordinating with stakeholders, and developing the site on WordPress. I also worked closely with a third-party animation studio to bring high quality animations to life. My goal was not only to modernize the brand visually, but to build a scalable, user-friendly site that the marketing team could maintain without relying on developers.
We focused on four key objectives:
Modernize Edgecom's digital presence to reflect a technology-first brand
Stand out from slow-moving competitors in the energy industry
Build a flexible foundation to support ongoing content growth
Improve usability for a non-technical, industrial audience
Six months after launch, we saw strong engagement gains when compared to the same period from the year before:
40% increase in engaged sessions
63% increase in average engagement time
156% increase in average session duration
These results confirmed that the new site wasn’t just better looking, it helped users stay longer, interact more, and understand the value Edgecom brings to their operations.
Results:
Explore live website here: https://www.edgecom.ai/
The Challenge
Edgecom Energy is entering a growth and expansion phase that requires a modern website to support its needs. The primary goal is to revitalize the company's branding as a technology-first company. Secondly, the website needed to be scalable to support various digital marketing efforts, including blogs, ROI tools, an expanding product line, as well as region-specific pages.
1. Discovery & Research
I began by auditing local competitors’ websites within our region and quickly found a common theme: dated visuals, clunky UX, and a generic corporate feel. Given our new positioning as a technology-first company, it was clear we needed to break from industry norms.
Instead of looking to other energy companies, I pulled inspiration from modern SaaS brands. Sites like Linear and Stripe, which stood out for their clean layouts, structured messaging, and effective use of motion. The "Linear-Design" was gaining immense popularity within the SaaS space and this style would provide us with the needed "SaaS Look". Prioritizing clarity, simplicity, and ease of use became central to the design direction. I extracted elements that made these websites good including some of the following:
Information Flow of: Value -> Benefits -> Features -> Social Proof
Minimalistic (Proper use of white space)
Modern Sans typography with proper hierarchy
Subtle motion (Hover, scroll effects)
High quality mockups
Dark Mode
The screenshot below shows a summary of the results of the research:
The screenshot below shows some of the website inspirations we found:
I presented these ideas to the stakeholders and was approved for this design direction. We further discussed other technical requirements such as integrations with Google Analytics, Microsoft Clarity, HubSpot CRM, and other tools. With a full requirement list and design direction, I proceeded to the next step.
2. Information Architecture
Information architecture was one of the first things I tackled, since the main goal of this project was to build a scalable foundation. I started by auditing our existing site and speaking with key stakeholders to identify what content needed to stay, what was missing, and what we might need to support in the future.
One major challenge came up early in the process. While we were designing for future growth, many of the new products and resources wouldn’t be ready by the time we launched. We still needed to account for them in the structure. The solution we came up with was to keep our current drop-down style navigation and also design a separate mega-menu navigation system for when our content will expand.
We ended up with the following information hierarchy:
We also created one for when we transition into a mega-menu with alot more content 1-2 years down the line. I won't share that version here as it's not live on the website and is not public information as of this case study.
Wireframing
Once the design direction and site architecture were in place, I started creating lo-fi wireframes of the key pages. The goal was to stay true to the Linear-inspired principles we had outlined earlier: clean layout, strong hierarchy, and a clear narrative through each page.
We elected to skip hi-fi wireframing for a few reasons. First and foremost, the business timeline for entering our first USA market was quickly approaching and we needed to get the website up and running so marketing could get accustomed to Wordpress and start building out content. Secondly, we had a fairly clear vision with our lo-fi wireframes and inspirations, and decided we could always iterate on things that needed tweaking without slowing down our momentum.
Samples of the wireframes made for the website:
 |  |
 |  |
Animations & Graphics
One of the key features we wanted for our website was high-quality animations and graphics. Since we lacked in-house expertise, I took the lead on sourcing and vetting external studios. After reviewing several candidates, I found a team whose style aligned with our vision and negotiated a scope and budget that worked for us.
We were looking for 3 key animations:
Hero Aniamtion that quickly communicates what Edgecom Energy does.
Data Unification Animation to illustrate how we centralize energy data sources.
AI Capabilities Animation to showcase our AI Analysis Engine.
For each animation, we held concepting sessions to align on narrative goals. I then translated those ideas into rough storyboards and motion notes to help guide the creative direction. After several rounds of iteration and feedback, we arrived at polished animations that brought our message to life in a visually engaging way.
Below are screenshots of my animation concepts:
The final results of the animations:
5. Dark Mode, Color, and Typography
One of the first design decisions I made was to update the color system. The previous site relied heavily on a combination of blue and yellow, which I thought clashed together. A blue and yellow color combination could work for a playful website if one of the colors was used sparingly for accents. However, to align with our direction as a professional SaaS company, I opted to use Blue as the primary color and shifted to whites and neutrals for the rest of the color palette. This gave us a more minimal and clean foundation that better supported clarity and visual hierarchy.
Another key consideration was dark mode support. Many SaaS websites now offer it as a standard, and in our user research, we found that energy managers were already accustomed to dark UIs through SCADA systems.
Finally, we wanted to pick a font that was modern, scalable, and impactful. Although it wasn't the most unique choice, we went with Inter, which is well tested across many platforms, especially within the SaaS space. To establish clear visual rhythm and hierarchy, we used a Major Third typescale (1.25 X with a 16px base). We chose this for its bolder effect and strong visual hierarchy emphasis, perfect for making a statement on a marketing website.
Wordpress Development
The next phase was development, which I handled entirely in-house using WordPress. We chose WordPress because it was already integrated into our workflow and offered a flexible CMS with a wide range of plugins, which was ideal for enabling the marketing team to take over the website and create content without involving developers.
Our tool stack included WordPress, Elementor, UICore, and GoDaddy Hosting (which we later migrated to AWS as we had credits from funding). Development was straightforward, as the design direction was already well-defined through earlier planning and wireframes. Having a clear vision allowed for efficient execution.
I also collaborated closely with the marketing team on SEO, ensuring that page copy aligned with our content strategy and keyword goals across the site.
With the site fully built, mobile-optimized, and thoroughly tested, we were ready to launch.
Launch and Results
We successfully launched the redesigned site and received positive feedback from both customers and industry peers. In the six months following the launch, we saw a significant uplift in user engagement: a 40% increase in engaged sessions, a 63% increase in average engagement time, and a 156% increase in average session duration.
These results showed that users were not only spending more time on the site but engaging with it in more meaningful ways (scrolling, navigating, and interacting with content more deeply). This confirmed that our improvements to messaging clarity, page structure, and overall usability were effective in both capturing and retaining user attention.
The data strongly validated our approach to information architecture, interaction design, and content strategy.
This project was a rare opportunity to take full ownership of a website redesign from concept to launch. By leading the design, development, and coordination with third-party vendors, I was able to ensure a cohesive vision throughout every stage of the process.
The results speak for themselves: the redesign not only modernized Edgecom Energy’s digital presence but also drove measurable improvements in user engagement. Most importantly, it positioned the company as a technology-forward leader in a traditionally slow-moving industry.
This case reinforced the value of user-centered design, strong collaboration with stakeholders, and the impact of thoughtful UX on business outcomes.
35%
Engaged Sessions
25%
Avg Session Time
84%
Avg Session Duration
Role
Project Lead
Project Type
Website Redesign
Duration:
5-6 Months
