South Austin Gallery

 
 
 

Deliverables

Live e-commerce website

Project Goals

  • Redesign the e-commerce site for South Austin Gallery so visitors’ understand the company and products offered quicker and better

  • Include a page to highlight popular images that are not be seen by many visitors on the current website

  • Combine the retail website with the wholesale website to save time and money on website upkeep

  • Make the images easier to look through

Stakeholder Interview

South Austin Gallery (SAG) wanted to redesign their website because it was unclear to people online what the business did or sold. They received many calls from people on the site confused about products details or how to check out. I spoke primarily with the Director of Sales and got approval from the owners a few times. They left a lot of aspects of the project up to me to decide, simply wanting an updated small business e-commerce website.

Comparative Analysis

 
Screen Shot 2018-01-16 at 3.53.00 PM.png
 

One of the owner’s friends runs a similar business and they like his website and wanted their own to be similar.

Screen Shot 2018-01-03 at 12.58.04 PM.png
Screen Shot 2018-01-03 at 12.58.35 PM.png

Since SAG sells many images with various types of products for each, I looked to Society6, who uses a similar model, for how to organize the images and the user flow of looking at images first then selecting a product type vs product types first then selecting an image.

Website Platform

South Austin Gallery had a Squarespace retail website and a Bigcommerce wholesale website. To reduce the upkeep and cost of having two separate websites I set to combine these sites on one platform. Squarespace doesn’t have as powerful commerce features as Bigcommerce, such as applying wholesale discounts to certain accounts, so I decided to move the retail website to Bigcommerce. This involved creating new pages on the website and remapping the domain name of southaustingallery.com to the new site.

Screen Shot 2018-01-16 at 11.55.30 AM.png
Screen Shot 2018-01-16 at 10.59.11 AM.png

Creating Pages

 
Screen Shot 2018-01-16 at 2.45.45 PM.png
 

The South Austin Gallery website had no clear indications of what the company did or what their products were. To make it more clear what SAG offered, product descriptions were added to the home page and a few pages about the company and where to find them were added and changed.

Most of the work for the new pages was done in the WYSIWYG editor, with some changes needed to the HTML and CSS. I added product information and a built-in carousel to the homepage and created About Us, Contact Us, Find Us and Festivals pages.

For the homepage I used <flexbox> in the HTML to make the contents responsive, the images were shown at the same size on mobile by default. The images were default to fit the width of the desktop page so I also had to delete some CSS from the them to adjust their sizes.

The options on Bigcommerce for structure and visuals are very limited so I edited the HTML and CSS on the product pages, mostly removing unwanted elements. I also found and edited scripts online to insert into the HTML in order to change the copy on some buttons and to change a default selected radio button (Checkout as Guest instead of Create an Account) that I couldn’t find in the accessible code to change in the HTML.

Image Organization

In Squarespace all of the products are on one page with no pagination option and no options for sorting by the user. In some cities (how the images are categorized for SAG) there was over 100 images on a page, with some of the most popular towards the bottom, likely not seen by most visitors. In Bigcommerce the number per page could be set and users could change the way they are sorted. These two changes made for shorter load times, more manageable viewing and the most popular images were more likely to be seen.

I encouraged the owners to add a Universal Images category to increase the chances that people would see images they want to buy in another city. We discussed the name back and forth and eventually settled on Universal Images. I wanted to call them Bestsellers, Most Popular or something more engaging but since the website is also used by wholesale accounts, they worried about them ordering products that don’t sell very well and blaming the bad purchase on SAG. I also advocated for Murals & Statues since it fit the majority of the pictures and was more descriptive but it was turned down.

The most popular images on one page

The most popular images on one page

The Austin images in a random order

The Austin images in a random order

Bigcommerce Implementation

Since their wholesale website was on Bigcommerce I only needed to expand the website to include the necessary components for retail. This included creating the homepage, About page and similar pages with the limited WYSIWYG as explained above.

To have different products options for retail and wholesale customers (retail customers can order canvases and prints but because of the discount, wholesale accounts cannot order them) I had to duplicate all of images. I was able to copy and edit the information for them in a CSV file but the images would not link to duplicated products correctly. I tried to upload them all together but couldn’t get the suggested WebDAV client, CyberDuck, to allow me to import images. This led me to manually link over 1400 images, the most time consuming part of this process.

Retrospective

Working on an e-commerce platform for a client led to many compromises. The website didn’t end up looking how I wished in the beginning but it still serves its purpose well. When setting off, I envisioned a single product page with filters to select only one city or a certain type of image. After researching what that would require I found that Bigcommerce only has that feature on a plan that costs considerably more, beyond the client’s budget. The best solution was to have images kept on separate pages by city but they can be sorted by bestselling, which was not available on Squarespace. I also created the Universal page so that images people may want to purchase regardless of their location were one on page and would get more views.

This project required more HTML and CSS work than I had anticipated but I am grateful for having to write the code since I learned a few new things. With what I know now, I may have looked into creating the website from scratch on another e-commerce platform that allowed for more control. I found that products can be fairly easily imported and exported in a CSV format and since I had to link the images anyway, it would probably not have taken much longer.

Once the website was finished I created a reference guide for SAG so they would be able to add new images, change products, add events, etc.

 
 

Results

My main goals were to consolidate the website and increase the average order size by having the most popular images together so they are viewed more and therefore ordered more. Both of these goals were achieved with the new Bigcommerce website. South Austin Gallery is very happy with the website and expressed that it went beyond what they had envisioned.