Context

GelaSkins is an e-commerce company running on the Shopify platform. They manufacture made to order laptop skins and phone cases, printed with licensed artwork or customers' own images. They boast a collection of over 2000 pieces of unique artwork.

The goal for the project was to update and improve the site as a whole, both visually and functionally. This was achieved by constructing a new UI and new brand creative, improving user experience and navigation optimizations, and optimizing existing information architecture.

The finished site is currently live if you want a sneak peak at the final product.

I used Dan Brown's design discovery framework to inform the design process of the project. Below is his design discovery chart, which gives a kind of bird's eye view of the framework. I'll be generally following it's conventions for this case study.

*Footnotes for words, events or terms that may require more information will be notated with a superset numeral like this. Click it to view, click again to hide or hit the X.

Before diving into visualizations our team met with stakeholders to gather initial impressions on their goals for the project and any specific issues they had with the current site. We also interviewed customer service and production staff members regarding any problems they had encountered. These were our takeaways;

• Goals
  • Freshen up the site visually and make it more intuitive to use
  • Make the artwork the star of the site
  • Increase visibility of the Create your Own tool
• Problems
  • Customers were having difficulty finding products relevant to them
  • Customers were missing important navigational tools

We built a map of the current site to get a better grasp on the customer journey and any pitfalls they might be encountering. Taking into account what kind of products were being displayed and how they were being organized.

Our main takeaways from our sitemap and some initial assumptions were

1. Popular items were promoted on almost every page - we also noted these products were often the same on every page
2. After selecting a device there was no control for filtering artwork, forcing customers to browse a tabulated catalog
3. Curated collections were the only area that offered the customer some filtering control

Building upon our findings we wanted to see how customers were using the site first hand. Using the GelaSkins staff we gave members instructions to find certain types of products on the site as quickly as possible. We supervised these tests to see first hand what kind of problems they encountered.

1. Search was only returning results based on artist name and artwork title, Which was frequently inadequate and leading to frustration.
2. Navigation elements weren't clear enough, sometimes being missed entirely
3. Collections didn't cover enough of the potential interests

As a secondary task to try and elicit a less mechanical and spontaneous result we asked participants to find something they would buy. We noted that participants;

1. Resorted to browsing the tabulated popular products collection hoping to find something
2. Were Frustrated by limited filter options and that the filters available couldn't be used together
3. Missed the lack of previously viewed products they were accustom to on other e-commerce websites

We also took a look at unit sales. Based on our gathering efforts so far, we assumed products featured in the auto populated popular products (say that 5x fast) collections would be significantly outselling everything else.

*disclaimer Our assumptions were correct, artwork featured in the popular collections sold on average 100X more and products featured in other collections averaged around 18X more. There was also a surprising amount of artwork that had only sold between 0 to 3 units, these products were essentially buried never to be seen again due to the sites architecture. We also noted descriptive artwork titles would on average yield more sales. We attributed this to the fact these products would have been more “findable” with the current search implementation.

Pulling our research together we drew conclusions on the particular problems that were causing frustration and potentially lost revenue on the site.

GelaSkins was devoting a large portion of the site to the promotion of popular products. While heavily promoting popular items isn’t necessarily a bad thing, for GelaSkins it completely diminished one of their greatest assets, variety. To put things in perspective there were a potential 2000+ pieces of artwork that were rarely or never being seen by customers. This was unacceptable.

GelaSkins had a look. While in theory they provided artwork for everyone in reality thanks to the persistance and visibility of popular items combined with how difficult it was to find other artwork a certain look was being promoted and attributed to the brand. Potentially driving off customers. The site also felt stale, many of the same popular products had been on display for years.

These problems could be condensed into three particular areas of focus, nick-named F3.

Fixed

Customers were seeing the same products

Filtering

Customers were having trouble narrowing their search

Finding

Products were hidden and unsearchable

These areas represented the major hurtles that needed to be overcome to achieve the goals of the project.

When customers first entered the website, they were initially inundated with unnecessary information and no clear path to finding what they wanted. While improving search and collections was addressed we still needed to take a look at the sites navigation elements and bring the artwork to center stage. To ensure the artwork was the main focus, a minimalist approach to the design was taken. Originally the site was overly compact and there was a lack of information hierarchy, it felt busy and lacked direction. We introduced a simple design with minimal colour, so as not to compete with the the artwork, and a light, bright colour was reserved for navigational elements, making them easy to find and use. To further decrease the clutter of the page, the navigational elements were moved from the sidebar to the nav bar so more of the page could be dedicated to showcasing artwork.

We added collections and device selection to the NAV along with create your own and a link to the new help section

As well you'll notice we went with the bottom fixed nav for our mobile layout. With the increasing size of mobile phones and a large number of our customers sporting the latest tech it's just good UX.

One design element that contributed greatly to the business of the page was the original design of the artwork thumbnails. When customers buy a case or skin from the site they are also given a desktop wallpaper of the artwork they bought. The original thumbnails included both a picture of the artwork on the skin/case as well as an image of the artwork on the device as a wallpaper. This meant that there were two pictures of the same piece of artwork in a single thumbnail. This decreased the size of the artwork and made the thumbnail confusing and busy. We decided to remove the front of the device displaying the wallpaper and simply showcase the artwork as a skin/case, the real product the customer was purchasing. By removing the wallpaper image we were able to enlarge the artwork and highlight the real beauty of the piece, concept being to give the feeling of a gallery with artwork framed on a white wall.

The GelaSkins brand update ended up being influenced heavily by our design discovery and UX improvements, we were able to create a meaningful holistic aesthetic that directly tied into the new search focused navigation.