Problems

When I began talking with MindfulCommerce co-founders Krissie Leyland and Rich Bunker about their website, they were dealing with a variety of issues with their content management system (CMS) as well as the custom code for the frontend that caused a lot of bugs and made it difficult to update.

Their pledge to live and work sustainably led them to seek out the most performant, energy-efficient solutions for their website, so the original developers and designers created it with Jamstack architecture. The frontend code is powered by Gatsby, the CMS is integrated with Contentful, and it is hosted by Netlify. I was familiar with this architecture (which is why they sought me out!) and had used it for my own personal portfolio site (before making the switch to Webflow). It is certainly a powerful tech stack, but, as they say, with great power comes great responsibility. Maintaining the code is time-consuming/tedious and, although the CMS makes it easier to update content, it has to be organized and labeled correctly to be usable and effective.

The main problems I was tasked with tackling when I took over the site were:

• Bugs/errors where CMS content is not coming through correctly/links are not working
• New branding (logos, colors, typography) needs to be incorporated throughout the site
• Address UI inconsistencies (sections are different widths, don't follow a clear pattern) and responsive issues
• New sections need to be designed and built (in some cases, existing pages need complete redesign) 
• Make it easier for mobile users to access navigation
• Need an all-new Brand Directory to showcase environmentally-conscious brands/partners
• Need to reduce size and number of images on site (some are completely unnecessary and affecting energy consumption/load time)

Solutions

My first priority was to make sure everything on the current site in its current form was working as intended (i.e. all content that should be coming through the CMS was showing up on the page and links/buttons were all working correctly). After getting familiar with the codebase, I began isolating problems with querying the CMS content and debugged a lot with the GraphiQL IDE that makes it easier to see what is being queried from the CMS and tweak/test the queries as necessary.

After fixing these high-priority issues, I switched gears and began focusing on UI/UX design. This project was much more UI heavy (on my end) as Krissie & Rich are content marketers and had already done a lot of the heavy lifting on the UX and copywriting side themselves and through other partners. I first worked on addressing the inconsistencies with the current design. The main issue was that the sections were different widths (and didn't follow a clear pattern) and they didn't all scale to a mobile screen size effectively. There were also a lot of unnecessary stock images and illustrations that were plain and didn't add much to the design. So, together, we determined which images and illustrations should stay and go and came up with simpler layouts for all of the top sections of each page that were consistent and more responsive. I then tackled the other page sections and made sure they also had the same max-width and everything was aligned appropriately.

I mocked up prototypes for the new UI designs in Figma and came up with the idea to incorporate a sun and wave vector graphic background for secondary hero (top) sections on several pages to enhance their new branding. The great thing about vector graphics is they are scalable and very lightweight compared to high-resolution images!

As I added new sections and restructured content, I continually updated the CMS architecture. I added a lot more assistive labeling to the fields and enhanced the organizational structure to make the guidelines clearer.

To make it easier for all users (especially mobile) to access the navigation, I created made it "sticky" so that it is always visible at the top of the page while scrolling.

I created the Brand Directory and kept the layout and filtering functionality consistent with the existing Expert Directory.

Results

The site is now 37% more energy efficient and is easier to navigate, which is great for the planet, their customers, and SEO! Learn more about how this is calculated on Website Carbon Calculator's About page.

‍