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
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)
Glow Box Paintings
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:
Within Client's Budget
Custom Code (HTML, CSS, Ruby-on-Rails)
Easy to use CMS for adding Artwork
No Transaction Fees
Out of Client's Budget
Easy to Edit
Lots of Simple Design Solutions
Not Inherently for Ecommerce
Made for Physical Retail Shops
Most Popular Solution (Good Tutorials/Plugins)
Expensive to Upkeep
Easy for Client to Use
The client needed a brand refresh to fit his artwork. We worked together to make his 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.
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
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.
I built out the design in Figma, which was easy to share with the client and further test for usability before finalization.
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
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?
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