Website Redesign

Stunning Redesign for Sweet Earth

My Role
Software Developer
Jan-Feb 2021

I love good design.  

It’s not just about appearance. It's about perception and interactions.  It's about intersubjectivity (a fancy word for thoughts or feelings shared between two subjects or people).  

Intersubjectivity is a crucial concept for brands.  When a person interacts with a brand, they see colors, imagery, tone.  When those things are consistent and fine-tuned for your ideal clients, magic happens.  That’s how your brand becomes a part of someone’s identity – whether they see themselves reflected in it or feel it amplifies who they are.

I believe this redesign is right on point with the Sweet Earth brand.  All the new imagery includes a human, organic feel.  And those splashes of natural gold and orange in the earthtones!  Not to sound like a teenager, but it just vibes.  It’s consistent, cohesive, and ultimately strengthens the Sweet Earth brand and its relationship with the customer.

Implementation is everything.

Okay, well not everything.  A talented designer is key to a stand-out brand. Sweet Earth already had a stand-out brand, but it wasn't quite reflected in the website. For this project, I collaborated with Higley Designs to get this website on par with the Sweet Earth brand. John Higley provided the genius mockups, and I customized the code to bring it to life.

Sweet Earth Skincare Website - Before

The website, before the redesign, had some inconsistencies and felt like a template. The text over the busy images was difficult to read.

Sweet Earth Website - Before Redesign

Sweet Earth Skincare Website - After

The new website is user-friendly, consistent, and seamless. Every image communicates the mood and feeling behind the brand, and the nature of the products.

Sweet Earth Website - After Redesign

One of the tricky parts to a design like this is making sure it looks good no matter what device you're on. And a good reason to hire a seasoned developer like myself - I take the polish to the next level.

Making it responsive.

My goal when working with mockups is to match the designer’s original vision as closely as possible - pixel perfect.  In 2021, where we have screens of all shapes and sizes, it’s my job to make sure it looks great no matter where you view it.  

Even though it looks seamless, it takes planning, testing, and quite a bit of fiddling with the CSS to get things right. A good example of this is the homepage hero image. Here are three things: The gorgeous photo, the “Sustainably sourced” copy, and USDA Certified Organic seal. The seal is real HTML text and not an image. I went this route because it was great for SEO and it was flexible for different screen sizes.

Responsive Homepage Hero Image
Responsive homepage hero image

Another example is this graphic on the homepage.  It has two elements: the photo and the text.  I placed a white/opaque gradient background behind the text so that it would still stand out on a mobile device.

Homepage image responsive design

The Product Page - Before & After

Product pages are important to get right.  They can make or break a conversion!  And working with e-commerce platforms, sometimes getting it “the way you want” takes someone cleverness.  

The Product Page - Before Redesign

The old product page had a very basic layout - and felt off-balance with the amount of information in the column to the right of the product image. There were a few formatting issues as well, and the call-to-action (add to cart) felt a bit "drowned out" on the page.

The Sweet Earth Product Page - Before Redesign

The Product Page - After Redesign

To get those attribute icons under the product image (like Certified Cruelty-Free, Gluten Free, etc), I utilized product tags to dynamically display the icons relevant to the image.

The other thing I did for the product pages is to build a console app to convert the data in an excel document (like usage, key ingredients, all ingredients) to HTML.  This included an accordion section for the key ingredients, which helped showcase the product information without throwing off the balance of the page.

The Sweet Earth Product Page - After Redesign

Just Plain Fun.

The Sweet Earth Redesign project was so fun to work on!  Check it out here.  And if you happen to have a Shopify website that needs development, get in touch!  I’m a huge fan of Shopify and the Liquid templating language, so you won’t find anyone more enthusiastic than me! 😀🤓