Eli Joe's WorkshopEli Joe's Workshop

Eli Joe's Workshop eCommerce Site

OVERVIEW

Eli Joe's Workshop specializes in custom fantasy crafts and table-top role-playing game aides.

The goal of this eCommerce project was to highlight Eli's eccentric products and present a portfolio of his various creations in a portfolio setting.

ROLE

Web Designer: User Research, Usability Testing, Visual Design

February - March, 2023

Check out the website here!

BACKGROUND

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.

APPROACH

1. Research and Familiarization:

After chatting with Eli, it was clear we needed an easy way to manage shop and portfolio items. We looked at a few systems and settled on WordPress with WooCommerce and Jetpack for smooth purchases. I then dove into learning WordPress and WooCommerce, reading docs, watching tutorials, and doing user testing to make sure it fit what Eli's audience wanted.

Stakeholder Interview

2. 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.

Proto Persona: Brian Stafford

3. Wireframing

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.

Wireframe of Eli Joe's Workshop Home Page

4. Styling and WordPress-ifying

Going forward, I created a style guide focused on evoking the emotions of fantasy and whimsy with earth tones and medieval aesthetic. To finalize the design, I created the elements in WordPress, and edited the HTML and CSS to fit the needs of the design.

Mood Board, Color Scheme, and Typography

5. 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.

Proto Persona: Brian Stafford

6. 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.

Proto Persona: Brian Stafford

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.