Seth Callister
UX/UI Designer

Eli Joe's Workshop

an eCommerce design by Seth Callister

Eli Joe's Workshop Logo

Project Overview

What is Eli Joe's Workshop?

Eli Joe’s Workshop is the startup workshop of Eli Stringham, a local craftsman and artisan who specializes in Table Top Roleplaying Game (TTRPG) aides and fantasy crafts. His primary market is for people who are fans of fantasy and SciFi, ranging from Star Wars to Dungeons & Dragons.

Problem Statement

The client, a small business owner, sought to create a website to improve user engagement and drive conversions. With a limited budget and timeframe, the challenge was to leverage the capabilities of WordPress and WooCommerce to design an intuitive and visually appealing e-commerce platform.

Goals for Eli Joe’s Workshop

Showcase Eli's unique and eclectic range of products, presenting them in a portfolio-style setting that highlights his diverse creations and encourages exploration and engagement with his brand.

Proposed Solution

Create a dedicated portfolio section, eCommerce flows, user-friendly navigation, mobile responsiveness, and secure payment processing.

Eli Joe's Workshop Logo

Stakeholder Interview

Research and Familiarization

The very first step of the project was to learn what Eli had in mind. His main requirements was a way to display his projects in a portfolio setting and a shop to sell his items online. After exploring options for selling, including Amazon, Etsy, Shopify, we eventually settled on WordPress using the WooCommerce plugin for sales. This was because Stripe, the service handling payments for WooCommerce, charges significantly less than any of the other options we explored.

A few quick notes from the interview with Eli

Eli’s number one priority is to have a simple procedure for uploading and editing his shop and portfolio items after handoff

His second priority is to avoid payment processing fees as much as possible (this is why we chose Stripe over Etsy, for example: Etsy charges 6% commission while Stripe is about 2.9%)

His average customer is already familiar with TTRPG and Sci-Fi elements: in Eli’s words, his target demographic is the nerds.

Eli wants his website to evoke a sense of rustic mysticism

Eli Joe's Workshop Logo

Proto-persona

User-Centric Design

After synthesizing Eli's needs with the data of my user testing, I created user personas and a flow chart to explore touchpoints and pain points in the user experience. By aligning the design decisions with both Eli's objectives and the needs of the target audience, the resulting design would not only meet Eli's expectations but also resonate with end-users, ultimately driving higher engagement and conversions.

Eli Joe's Workshop Proto-Persona
Eli Joe's Workshop Logo

Wireframing

Ideation

Before delving any further into WordPress, I created wireframes to refine layout, navigation, user interface elements, and e-Commerce flows. One of my primary inspirations was the website for Cloverdale Forge, an artisan blacksmith studio based in Canada.

Eli Joe's Workshop Wireframes Cloverdale Forge Website
Eli Joe's Workshop Logo

Styling

WordPress Setup

The hardest part of this process was learning the ins and outs of WordPress. I spent hours watching tutorials and troubleshooting to understand how to design using WordPress. After this struggle, the process of applying medieval typography and earth tones for styling seemed relatively simple.

Eli Joe's Workshop Styling
Eli Joe's Workshop Logo

Technical Setup

WooCommerce Setup

This was followed by a lengthy learning process of delving into security plugins and payment options. I configured product types, payment gateways, shipping options, and tax rates based on the client's requirements. I added product categories, attributes, and variations as needed.

Eli Joe's Workshop WooCommerce Setup
Eli Joe's Workshop Logo

Handoff

Documentation and Handoff

At the end of the design process, I created multiple short videos for Eli to reference when updating his shop or portfolio. This included technical details about payment and shipping processing, data storage, and plugins.

Eli Joe's Workshop Logo

Takeaways

When I made the website for Eli Joe’s Workshop, it was my biggest project by myself I had done. I also had to learn WordPress and the various plugins required at the same time. I focused most on meeting Eli's needs: avoiding high payment processing fees, payment security, and ease of access for him to change his shop and portfolio items.

Now that I know WordPress and its limitations, I would likely search other platforms or methods of payment processing in the future instead. The unintuitive nature of WordPress made for a lengthy process of describing everything to Eli over video, which I don’t think I would have been able to do without the documentation I kept.

Link to the website