True J1 Arts

E-commerce for a High-End Neon Artist

E-commerce for the Artist, True J1

Jewan Herbert, the artist behind the brand True J1, requested my services for an e-commerce solution after his art business began to grow. He had never managed a website, only selling his pieces in person, so I eased him in using a managed e-commerce experience. I had several considerations for this project:

  • Creating a website for Jewan to easily sell his artwork

  • Portray the numerous offerings of the True J1 brand

  • Rebuilding the J1 Brand to incorporate a "Neon" aesthetic

  • Finding an easy-to-use CMS with automatic integrations to the commerce site

  • Map out the customer journey to help Jewan seamlessly ship his artwork

Who is True J1?
Site Map

Site Map

Scoping Out the Project

During our preliminary interview, I asked the client to categorize their artwork how they would like it on the site. While this didn't end up being the final layout, it helped start a conversation about what his audience usually bought from him. I constructed a sitemap to guide subsequent development. I used Miller's Law, which states that people can keep 5-9 items in their minds at a time, to limit the menu choices to less than 7 per page.

Types of Artwork(Ranked By Importance)

  • Paintings

  • Logos

  • Glow Box Paintings

  • Murals

  • Stickers

Data Input for Everyone
Potential CMS Solutions

Potential CMS Solutions

A CMS for an Artist

To start, I made a list of everything the client wanted, regardless of the practicality. Organizing the list, I found out what J1 needed which influenced the project's scope.

Potential SaaS Solutions:

  • Big Cartel

    • Within Client's Budget

    • Custom Code (HTML, CSS, Ruby-on-Rails)

    • Easy to use CMS for adding Artwork

    • No Transaction Fees

  • Squarespace

    • Out of Client's Budget

    • Easy to Edit

    • Lots of Simple Design Solutions

    • Not Inherently for Ecommerce

  • BigCommerce

    • Intermediate CMS

    • Expensive

    • Made for Physical Retail Shops

  • Wix

    • Fully Customizable

    • Drag-and-Drop Interface

    • Most Expensive

  • Weebly

    • Ridgid Themes

    • Ecommerce-First Solution

    • Cheapest Solution

  • Spotify

    • Most Popular Solution (Good Tutorials/Plugins)

    • Expensive to Upkeep

    • Easy for Client to Use

Branding the Client

The client needed a brand refresh to fit his artwork. We worked together to make his neon aesthetic.

The J1 Brand Upgraded to the Neon Aesthetic

The J1 Brand Upgraded to the Neon Aesthetic

Since I was working with an artist, I was lucky to have a preliminary logo to base my style guide off. Even so, I felt like the logo didn't fully capture the essence of J1's art style. As shown above, I updated the logo with my favorite vector program to pop with neon.

This saved a vast amount of conceptualization and iteration, allowing me to quickly A/B test brand elements with the client. I find that giving the client two options can help them decide based on comparison, where three or more options can obscure the client's desires.

UI Design
Style Guide

Style Guide

Styles

I usually start the design process with defining the basic styles, including colors and fonts.

True J1 Branding Options:

  • I focused on a blue-purple color scheme with an emphasis on a neon aesthetic

  • I also experimented with neon borders using the Figma plugin "Morph"

  • I used three typefaces: Gill Sans, Raleway, and Ramaraja

Home Page Wireframe

Home Page Wireframe

Wireframes

To create a solid structure, I created several wireframes. This guided all future UI design; by combining this with the style guide, I was able to quickly create the user interface.

I made the wireframes in a low fidelity, where I could rapidly iterate my concepts. This exercise was useful to express the information architecture of the project and quickly test any usability errors.

Home Page

Home Page

UI Design

I built out the design in Figma, which was easy to share with the client and further test for usability before finalization.

Guiding Principles:

  • Since the neon aesthetic is known for poor visibility, I focused on the accessibility of the text

  • I went with mobile-first design, which allowed me to focus on how J1's customers would be using the site

  • The categories of art are prominently shown on the home page for ease of access

  • The design is loosely based on several artist's websites, which the client provided for inspiration

  • My pride comes from the cohesive UI design which was made possible through a thorough audit and rebrand of True J1

Customer Journey

After launching the client's website, it was imperative that he understood how his audience would get the artwork. I had to consider the client's perspective from buyer checkout to delivery. The easiest way to show this off was a simple User Flow, which is laid out below.

I had to answer a few questions in this user flow for J1 to optimize his business and focus on making art:

  • How does the user buy a piece?

  • How does J1 get notified that a piece is bought?

  • How does J1 get paid for a piece?

  • How does J1 ship the piece?

Some pain points I ran into:

  • How does the customer know their piece is on it's way?

  • Where should shipping be calculated?

  • How should the customer's address be securely communicated?

How Customers Buys Artwork From True j1

How Customers Buys Artwork From True j1

Releasing to the Public
Mockups of the Complete Product

Mockups of the Complete Product

True J1 Arts is Out Now!
J1 Arts Launched November 2021

Conclusion Time!

True J1 was one of my first end-to-end clients, which in many ways is simpler than managing a full team, but also presented the challenge of independence. I learned through trial and error, the do-it-yourself method. I did have a few difficulties in this project, which I've detailed below:

  • After the website was complete, I had to onboard Jewan in both the CMS and in proper shipping procedures.

  • Jewan had never used a CMS before, so I had to make sure that he could use the service that runs his website

  • While developing the site in BigCartel, I had to learn Ruby on Rails to customize certain interactions

+7
Pieces Sold
>$3000
Revenue
50
Hours of Design