Creating a web experience for an eco brand.

Brand goals:

To change consumers perception of shopping.
‍
To educate consumers to live a more environmentally friendly lifestyle through mindful shopping that will, in turn, help care for our health and earth.
‍
To build a community of women with safe & fair working wage jobs.

What I did:

Conducted user research to discover who the customer was.
‍
Strategized how to best meet user needs.
‍
Designed wireframes & prototype to be implemented for online e-commerce and an eco-educational site.

Learned A LOT and built website via Shopify Template.

Defining the Problem

The research:

I conducted user research to help with my analysis of what the customer needs were for Dusted Gold. I then used that data to configure the architecture of the site to meet those needs.

This story I'm about to tell will discuss my journey of designing this website and my constant knock-down- drag-out with Shopify.

To view my research for this project you can view that process here.

My problem:

First, I should preface some MAJOR roadblocks I encountered, as a designer, trying to implement my design work into Shopify without any coding.
‍
For anyone familiar with Shopify, customizing your site outside the confines of the templates provided means outsourcing. Shopify offers this, but the price was too high for what my client was looking to spend.
‍
Being that this was a project for a friend, and that this was a big learning experience for me, I sought a solution that could do what she wanted - and that solution had to be something I could accomplish.

The (web) problem:

There are many templates Shopify provides ranging $70-200. For the design vision my client had, there was not a perfect template that had all of these features in one.

Somehow while surfing through the blackhole of YouTube, I came across Udesly.

Long story short: Udesly is a converter that will convert your Webflow design into a Shopify template. It sounds like the perfect solution.

Through trial and error and for the sake of what was best for the brand, we decided to stick with a template to best meet consumer needs.
‍

Product Strategy

Taking apart sections from Shopify and designing them in Webflow:

Another faux pas I made: NOT designing my wireframes with Shopify constrictions in mind.

Considering the time I was spending working on this project, and given that my client had already called out certain web design styles she liked, I used those as inspiration to recreate that look directly in Webflow.

I also did this with the aid of a pre-made template provided by Udesly and modified the elements to fit my goals.

End result and ultimate decision to use a premade template:

For the sake of web speed and a slew of other issues, the conversion technique was proving not the best use of my time or my clients.

We decided to purchase a template and work off of that, while still creating a visual home page that aligns with some of her previous requirements.

Webflow <> Udesly

Testing the converter 😳:

Initially, assigning the attributes to my design and converting them to the template was working swimmingly.

Then the issues started to pile up.

Knowing when I'm out of my element:

There were many small errors I faced while trying to make the conversion work. The two big ones were:

1. Page speed went down by 30%

2. Minute errors that overall appeared to be glitches or mis-steps in my design.

In the end, it wasn't worth losing the integrity of the site function to continue down this path. It was time to pivot.

Shopify Template

Creating an online shop with e-commerce strategies in mind:

I consulted with my client and we found a template that had a similar styling to what she was looking for.

Currently working on completing site for launch in mid-October.

‍

Next Steps

Going public:

Once the site is ready to be published I will make sure that the internal workings of the Shopify site are all in order.

Aside from that, the shop will be ready and Dusted Gold is open for business!