work > shop.erinwong.design

shop.erinwong.design

Migrating off Etsy & into a storefront domain coded with HTML, CSS, and basic Javascript

#web development #UI design #e-commerce

I. INTRO

As a hobby on the side, I enjoy making handcrafted jewelry and art, and I like to list my wares for sale on Etsy.

As a seller, my biggest pain point is the limited customization that comes with Etsy’s storefront UI. Etsy store pages are all housed under its parent page templates and it can be difficult to strike a resonating and unique chord with users in an oversaturated market with so many sellers.

I’ve noticed that Etsy shoppers were more inclined to say “I bought this on Etsy” rather than name an individual storefront. I wanted to learn more about users in order to foster a more unique, memorable, and professional-feeling experience that held true to my artistic vision and the voice I wanted to convey to my store audience.

TOOLS

Adobe XD, VSCode, InVision

II. USER RESEARCH

I created two surveys, one for Etsy sellers and one for for buyers, and reached out to folks on Reddit for their input.

III. DEFINITION & IDEATION

Our users are motivated by unique and one-of-a-kind products. They are more inclined to shop locally and favor more personable interactions with a business. Buying from a local artist feels like supporting a neighbor or friend.

From the research I gathered, I was able to craft the following user persona:

USER NEEDS
Kasey finds it is easy to forget a specific Etsy shop name when all of the stores live under the same look & feel. It's hard to get a personalized feel for businesses that are on the standard Etsy model.

Furthermore, it can get overwhelming to see such a large volume of stores & products. On the stores themselves, each site is a one-pager and it can be tedious to browse and to process information visually.

Doom-scrolling can lead to user dissatisfaction & ambivalence.

STAKEHOLDER NEEDS
Using Etsy’s default storefront model and marketplace seemed to be watering down the specifically unique brand and voice I wanted to cultivate and communicate across to our audience. There is also the risk of higher bounce rates with the presence of so many competitors in the immediate visual vicinity of a specific shop.

How might I maneuver away from this standardized look & feel of the shop and strike a more resonating & memorable presence within target users?

PLAN ANALYSIS & RECOMMENDATION
To migrate into a standalone storefront website, I evaluated the following proposals: Etsy Pattern, Shopify, and a self-hosted domain.

Etsy

Run traditional storefront within Etsy's UI
Listing fee:
$.020 per item / 4 months.
5% on every purchase. 3% + $0.25 on every purchase
Limited storefront customization - stores are boxed into Etsy's overarching UI

Etsy Pattern exists for additional $15//month with ~10 more unique template options

Etsy Analytics (in-house)
~$122-245 a year*
Cost: LOW
Level of effort: LOW
Lowest seller fees. Low barrier of entry and learning curve.

Limited customization options for UI design.

Oversaturated marketplace can lead to larger competitor pools, higher bounce rates/abandoned shopping carts, and reduced brand impact

Shopify Basic

Host store within Shopify Basic plan, use domain + premade theme
Basic plan = $29 / month
More storefront UI customization: 100+ free/premium designed templates available.

Potential risk of looking too much like other shops built with Shopify

Shopify Analytics (in-house)
~ $348 a year
Cost: HIGHER
Level of effort: LOW
More customization, lots of professional looking themes. Can host on your own domain as a standalone website. Comes with Analytics

Still constrained to UI of templates. Higher costs.

Self-hosted site

Create entire store from scratch, including POS on backend
Hosting: ~$2-10/month + Addtl cost of externally resourcing POS system to be engineered on backend
(expensive, est. several thousand dollars)
Complete freedom with UI design - sky is the limit.

Need to outsource external dev work (very expensive!!)
Up to you - can use Google Analytics, HotJar, etc.
~ $120-240 a year + additional dev cost (high)
Cost: HIGHEST
Level of effort: HIGH
Full fledged freedom and ownership of UI design & analytics methodology.

Engineering work to build a POS from scratch will be very expensive and may be overkill & ineffective use of resources for what we are trying to accomplish.

*operating on premise that we sell 50-100 items in 1 year

I decided to move forward with a hybrid model of self-coding the front-end of the store and having the purchase touchpoints facilitated by Shopify Lite’s Buy Button plan.

Shopify Lite allows sellers to generate and embed a buy button code within the HTML of an external site or on social media.

At $9/month, this was significantly cheaper than opting for the full Shopify Basic plan that included a store site via its premade themes.

This way, I had full control of the general look & feel of the storefront and I would be able to adjust according to user needs without having to be held to the constraints of a predefined template or theme.

(I would also be able to flex my beginner coding muscles!)

IV. CODING THE SITE

By using jQuery load() or PHP to return data into a selected element, I was able to mimic 'component states' created in prototyping tools like Adobe XD or Figma. Changes to the root html file would reflect on all pages without having to manually edit each and every individual page.

I integrated products and full purchase functionality by generating the embed button code from Shopify Buy Button and injecting into the page layout with a similar method.

The result? A fully working e-commerce storefront.
MAKING IT RESPONSIVE WITH CSS MEDIA QUERIES

VI. FINAL PRODUCT: LIVE SITE

KPIS & PERFORMANCE BENCHMARKS
I installed Google Analytics to my site by manually embedding the tracking tag within the HTML. I ran a session in Charles Web Debugging Proxy to confirm that the tag was firing correctly on the page.
Moving forward, my focus will be on traffic acquisition and user device category, in order to better optimize towards user satisfaction. While I will use Google Analytics as my main tool to evaluate usability benchmarks, I also have access to Shopify Analytics for data surrounding specific e-commerce metrics.

THANK YOU FOR READING!

Questions, comments, or feedback? I'd love to hear it. Please drop me a line
here.

▲
BACK TO TOP