Case Study:


Published on
July 8, 2022
Share this case study


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)
There were several UI/UX issues on the existing site when it scaled down to tablet and mobile screen sizes. The top navigation needed to transition to the mobile collapsed (hamburger) state at an earlier breakpoint to avoid being squished, hero section images were not scaling correctly, and the filtering fields for this Expert Directory page were too small and not aligned correctly.
There were section width inconsistencies like this on several pages. Every other section (besides these two-column features) was left-aligned where the black line is.


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.

The new and improved Expert Directory page at the same breakpoint shown above. The top navigation is collapsed and accessible, I completely reworked the top section (there's a new "Featured Expert" section in addition to the top hero section), and the filtering fields are stacked so they are more usable, accessible, and in line with the rest of the content

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!

My mockup of the Sustainability page in Figma showing the variations of the sun and wave vector graphics I created and tested on the left side of the page frame.

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.

The new MindfulCommerce Brand Directory page.


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.

The MindfulCommerce website analysis from (The Website Carbon Calculator) before the redesign.
The MindfulCommerce website analysis from (The Website Carbon Calculator) after the redesign.

"Jen and her team at Mercury Jane Media are an absolute DREAM to work with.

Jen is always full of ideas and enthusiasm and her coding skills are out of this world! Plus Figma designs are always very creative and fun!

She truly cares about the client experience and organises everything in Notion which is very efficient, she’s never late! Jen even spent the time recording Loom videos explaining how she coded certain things 😄

The best part? She cares about people and the planet and she very kindly donated some time to a charitable project outside of our working partnership.

We have worked with many developers and Jen is the best. Thank you, Jen!"

-Krissie Leyland: Co-founder, MindfulCommerce