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.
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.
The website, before the redesign, had some inconsistencies and felt like a template. The text over the busy images was difficult to read.
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.
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.
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.
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.
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 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.
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 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! 😀🤓
