menu

Two women, each with a purse on their lap.Abstract. Grid of squares.

04

Bolivar Threads

Client

Bolivar Threads

Business Type

Monogram eCommerce Shop

Completed

2019

Status

Managed by client

In Houston, Texas, Bolivar Threads began as a passion project, personalizing bags and shirts for family and friends for their special events. Soon, demand began to grow and the owner realized she was in need of a streamlined process. Taking orders in person or over the phone became time-consuming and difficult to track.

Bolivar Threads reached out to me to design and develop an eCommerce store that would allow customers to quickly select a product, customize it, and place an order. It was also important for the client to be able to maintain and update the website on their own over time.

After several meetings with the client, I began setting up.

Grid of plus symbol.

Contributions

UX Research


UI Design


Wireframing


Website Design


WordPress Development


CSS


Environment & Tools

    CSSAdobe XDWordPressElementor

The Set Up

Once the domain was acquired and hosting established, I installed WordPress, a Content Management System. This CMS allows for growth and expansion, and because it's open-source, there are a plethora of compatible plugins, allowing the company to launch the website in a short period of time.

Based on the project requirements, I installed and configured several plugins that provided the needed built-in functionality. This included Elementor Pro Fancy Product Designer, WooCommerce, and more.

Bolivar word.

Starting from Scratch

To get a good feel for the clients' business, style, and goals, I visited her workspace. Though I am no photographer, I took a few pictures of her equipment for design inspiration.

Side view of thread spools. Colors: gold, pink, white.Top view of thread spools. Colors: red, pink, burgandy, yellow, white.Monogram machine.

Getting to know the Products

Good product images go a long way. With no photographer at hand, I took a few pictures of the products available for sale and photoshopped the background, to give them a clean, cohesive appearance.

Laptop back with the word computer and charger on the front.
Pouch with the words Wet Beach Stuff.
Pouch with the words My Toiletry.
Beauty box with a black bow.

Style Guide

For the color pallete, I went with colors that were both bold and soft. Typography and font styles were selected for simplicity and readability, but also for boldness.

Typeface

Screenshots of typeface.Screenshots of typeface.

Styles

Screenshots of font styles.

Colors

Screenshots of colors. Yellow, black, gray, and white.

Buttons

Screenshots of buttons.

Getting Organized

There was a long list of products available to be customized. I organized them into specific categories to make it easier for the User to find their next favorite item.

Website navigation, displaying list of products in specific categories.

Laying Down the UI

After sketching out a rough wireframe of the main pages, I used Adobe XD to design the website. Once the client was excited about the look, I got to work implementing the design and developing the website using the plugins I had installed and configured. Functionality was added to allow the User to search for products by name or category, filter by price, add an item to a wish list, and more.

Bolivar Threads home page.Bolivar Threads Shop page.Bolivar Threads single product page.Bolivar Threads About page.

Customizing Products

Not only are Users able to purchase products, they can add their own personal touches to them. After customizing the Fancy Product Designer plugin to fit the needs of the client, the User is easily able to place text on the item, select the font and thread color. An image of the customized product is then sent to Bolivar Threads to have the item monogrammed before being shipped off.

A view of the Fancy Product Designer interface, featuring a laptop case that is being customized.
Form that allows the User to enter text, select a font, and pick a thread color.
Abstract of grid with dashed lines.

Contact

Let's create something together...