Eclipse Online Store Project:

A responsive ecommerce website design case study

Introduction

Project scope | April 2020 – July 2021

Photography | Roy Manniquil, Kristin Ellis, Becca Ruvalcaba

Design and Project Lead | Becca Ruvalcaba

Backend | Dan Foley

After the successful launch of Eclipse in the wholesale market, I was tasked with establishing an additional revenue stream through an e-commerce website. We first tried Shopify, but the cost of the base service and addons wasn’t worth it. We transitioned to WooCommerce on the WordPress CMS, since it had more flexibility, far more affordable options for plugins, and was open-source. 

The original website only lasted a couple of months before we switched platforms and decided I would build the new version.

The Team

Dan and I were the only two people fully on this project. We walked management through major design and technical decisions via video calls, Slack, and email, as Dan and I were both fully remote employees. We used Google Docs with annotations when developing certain infrastructures, like the sitemap, navigation, product page skeletons, and other uses.

ProcessEvaluate and anticipate

The Problem

We wanted a robust e-commerce website that was accessible by adults of all ages. Legally selling CBD carries certain levels of information disclosure requirements. We wanted to make something that would make this information easy to find and digest and leave the user feeling confident about their purchase. Information architecture was a core focus. Initially, I wanted to replace a lot of written content with visuals and icons to reduce the amount of time spent reading. Instead, I pivoted to a hybrid model of icons/imagery with words and toggleable accordions branching out information. I anticipated that older users wouldn’t understand CBD visuals without additional context, so I used short phrases and keywords as aids.

Building structure

I put a lot of effort into making sure our front page had structure. I designed it to gradually build trust, going so far as putting value propositions at the beginning and end. The goal was to ease customers into the checkout pipeline by not bombarding them with a fistful of products, but instead showing social proof, individual product spotlights, and the company mission statement.

ProcessName your obstacles

Challenges

We had limited resources, and I’d never done web work on this scale. Many of the ecommerce elements I wanted required CSS and other code. Our large product catalog meant we needed structured information and hierarchies to create a smooth checkout pipeline. Since CBD was so new, it was important to provide as much information as possible without maxing out cognitive load and overwhelming people with too many choices. I broke this core issue into multiple challenges and ways I planned to tackle them.

Limited Resources

Work within my resources and knowledge base to develop scalable long-term solutions

Create Visual Language

Create a consistent visual language that enhances form and function of UX from landing to checkout

Information Heirarchy

Make sure users see the information they need based on the information they purposely seek out and vice versa

FeedbackObserve, adapt, repeat

A temporary solution

Version B of the Eclipse store seemed like a hit at first: our customers liked it, management liked it, and I liked it. After a few weeks, I revisited the project. Based on incoming customer feedback, we determined that this menu system was too vague and didn’t place much emphasis on products. The opening hero section also confused customers: is this a CBD store, or something else? Where’s the product?

I proposed my desired changes and Dan prepared a second staging site for me to implement and test new menus and layouts. I redid the sitemap and navigation tree, focusing more on the shopping experience itself, and strengthening connections between hero sections and products.

AnalysisDiagnose the problem

Ideate potential solutions

Our previous menu was a simple navy blue bar with broad categories at the top. While I thought it was fairly easy to navigate, it was not as obvious for customers. My new focus was to make a simple navigation system to ease the decision-making process by leveraging our existing product category organization.
The new menu needed to highlight our products without needing to leave the page. Our most frequent customers were older adults, which is why each menu item had to be straightforward, with high visual presence and contrast especially for vision accessibility. It needed to feel like any destination was one click away without being overwhelmed with too many options.
Structuring this menu wasn’t without its own set of challenges. The amount of products presented seemed overwhelming until I decided to insert lifestyle product imagery into the menu itself to mitigate some the pressure that comes with decision making. Featuring a specific product photo or blog post can aid users with indecision. I kept the mobile menu simple, as a smaller screen means you need to be more deliberate with your focus or else things get overwhelming.
Similarly, the old home page didn’t have as much cohesion other than displaying products and some things about the company. There was little to no opportunity for connection between the brand and customer, further exacerbated by the fact that, more often than not, people turn to CBD for a specific problem when other solutions have failed. The home page never capitalized on this until further down, which is too late in the attention economy. The wireframing below shows how a revised home page skeletal structure, but some of the original problems persist.

ExecuteDeliberate problem solving

Solutions

From feedback and multiple rounds of revisions, I came up with user-centered solutions. These solutions focused on user navigation and end goals, and making crucial information easy to find and read.

This video is a brief example of a typical browsing flow on Eclipse. Adding a product to the cart is simple and instant; variation swatches allow the user to flip between product variants with ease. Important elements on the product page have default and hover states to emphasize its content without demanding too much attention.

Mega menu for straightforward navigation

I replaced it with a properly structured mega menu with bolded, navy blue typography and obvious hierarchy. Before, product categories were lumped into a single ‘Shop’ dropdown menu, with limited phrases and lack of context. This created friction between where the customer was and where they wanted to be: it was like presenting a single road with multiple forks and vague signage as opposed to orderly cross streets that give clear and concise, and therefore efficient, direction.

I solved this issue by using product categories as metaphorical street signage. Hovering over menu tabs triggers a dropdown menu with the name of individual items, like ‘Recovery Lotion’, respective to their category. Users now have clear choices: they can click the category to browse everything within that category, or they can click a specific product. Eliminating ambiguity and presenting these clear choices gives users control and turns into decision making power.

I met each one of my own criteria for our site navigation, and was immediately told that it was a game changer.

Using the home page to ease decision paralysis

Our previous hero section was aesthetically pleasing but irrelevant to the consumer and didn’t translate into meaningful results. I A/B tested two hero sections and the one that won was a split-screen display of two products with subtle calls to action. I drafted new concepts and restructured the rest of the page to showcase our products as beneficial additions to a high quality of life.

We put together a list of our best-selling products and then highlighted the things that people liked most about them. I then turned each product instance on our home page into bite-sized presentations to create intrigue and bring the customer to the product page. Highlighting products in this way allowed us to help the customer by pointing them in a direction that’s already been validated by customers themselves. It allows the decision to come from a place of empathy and alleviates decision paralysis.

Product cards for grouped information

The old shop presented products in containers with a simple image, product title, and price tag. It was simple and functional but failed in terms of drawing and keeping attention. To make things interesting, I focused on presenting our products like a playing card, with a main image and accompanying information to make it a self-contained unit. Creating consolidated information units reduces room for confusion, takes the burden of sorting off the user, and allows for efficient decision making.

Each product card and its button animates on hover. In its hover state the product card gets a bright blue glow around it and scales up to separate itself from the others. Letting the user know exactly where they are clears any sense of confusion and keeps their focus on browsing and purchasing. It also adds a touch of reality, like when people focus on a specific object or area and the brain blurs out irrelevant information. The ‘add to cart’ grows on hover to draw attention and elicit a potential follow-up response.

Easing cognitive load on product pages

Each product page is simple and easy to navigate. Instead of long product descriptions and a section of bullet points, I used toggleable accordions to categorize information. The customer can click and view the information of their choice, and any other open accordions will close so the user can concentrate on where they clicked. This shifts focus where it needs to be and allows users to absorb a river of information in smaller chunks.

I created a custom set of icons relevant to the characteristics and benefits of our products. The icons below attract the user’s attention to make an additional product pitch using its key features as text labels.

ReflectRetrospect

Project debrief

In retrospect, the first thing I would have done is put way more emphasis on the mobile side of the website. As this was my first full web project, I failed to take into account that most ecommerce traffic comes through mobile. Platforms without mobile-ready user interfaces risk alienating customers in droves. I focused on the desktop site mainly because I made a generalization: I assumed the older crowd would be more privy to seeing information on a larger screen, one more readily suitable to their visual needs, as opposed to a small mobile screen.

If I could go back and change my approach, I would pour more time into researching web traffic flows and looking into the browsing preferences of different demographics and categories of users. Using this information, I would build a framework around the group of users I’m most likely to expect to use our product. Applying these steps first would have saved me a lot of back and forth and allowed me to build out a more consistent user experience from the beginning.