Foundational E-Commerce Platform From Scratch

Product Design, Responsive UI Design, UX Design

I had the opportunity to work alongside a lean product delivery team to build a foundational, end-to-end e-commerce experience from the ground up in 16 weeks with accessibility in mind. We jumped in knowing there'd be some tough tradeoffs to pull it off, but we also knew that maintaining focus would be the key to success.

My Core Focus

Beyond helping establish our mobile first design system to enable consistent experiences and smooth collaboration with product and engineering, I had particular interest in designing for cart, checkout and account experiences. The ability to design for this thread of the customer journey had high appeal due to fun interaction opportunities and eventually going beyond the status quo for e-commerce experiences.

Although cart, checkout and account were my primary focus, I also contributed to early strategy for the category and product detail experiences.

Background: Design Process

In order to make progress without quantitative data while having enough confidence in our solutions, the design team and I relied heavily on each other for many impromptu walkthroughs and critiques to strengthen our approach and rationale, often including product and engineering to foster early alignment.

We also pooled many major marketplace and e-commerce experiences in the form of competitive analyses as both means of being instructive and inspirational. Our lead UX researcher provided crucial tactical insights anytime we were seeking additional clarity on a given topic in the form of synthesizing Baymard Institute studies and other secondary research.

An example of one of my competitive explorations for best in class checkout experiences.

A Brief Aside: Embracing the Unknown

With multiple threads moving forward at the same time, it was crucial to recognize and be comfortable with the fact that there would be no easy answers, and that stakeholders were often learning alongside the product delivery team. This brought a level of humility to all involved and created a sense of shared ownership.

Ready, Set, Cart!

One of Spreetail's core value propositions is speed. This can be interpreted as having 1 day standard shipping, but also manifest throughout the digital experience. After a sweeping review of larger marketplaces and e-commerce cart paradigms, I gravitated towards Glossier's cart approach.

The cart panel aligns well with allowing shoppers to quickly reference their cart without page load interruptions, and letting them focus on adding more items to their order / jump straight into checkout.

Inspired by the cart panel concept, I created a cart experience that fit Spreetail's needs. Knowing this cart paradigm is a point of differentiation from other established marketplaces, user behavior trends will be a useful first indicator of its effectiveness.

On mobile, tapping an "Add to cart" CTA / cart icon invokes an overlay without a page load, and on larger devices, a panel overlay appears partially on the page while dampening other visual distractions.

Streamlined Checkout

One large tradeoff with an aggressive timeline was to tackle guest checkout after our initial launch. This meant customers were required to make an account with Spreetail to place an order. Knowing we'd be fighting an uphill battle with lower than ideal conversion, the checkout experience needed to be focused, digestible and free of distraction as possible to move customers to placing an order.

Wireframe checkout exploration leveraging successful themes from other e-commerce marketplaces.

Based on usability findings from Baymard Institute and workshopping the checkout flow with design, product and engineering, I solidified a strategy for handling input field interactions which allowed me to move into high fidelity designs.

Something of note is placement of helper text labels, which is wedged between the primary input label and the field itself. This ensures visibility on mobile devices while the keyboard is invoked.

As I gained clarity from our selected payment integration solution Stripe, I was able to further streamline the credit card input process into a multi-step single input field and finish the remainder of the flow.

At a glance, reduced input fields creates a more approachable moment in the checkout flow. The multi-step credit card entry even passes e-commerce accessibility standards.
Review order and confirmation page.

Account Management

I partnered with another designer to explore two diverging concepts for handling account management. I volunteered to concept out a minimal, navigation-based paradigm for reaching relevant account information, while the other designer took on a card-based paradigm for achieving the same goal.

After walking through our first pass of wireframes, we agreed that the card-based approach felt more "Spreetail" in the spirits of giving you both contextual peeks of information and quick jumps to relevant areas. With this paradigm solidified, I built out the remaining account management experience and worked with product to ensure all use cases for launch would be covered.

The navigation-based paradigm that had some merits, but ultimately didn't fit in with the rest of the Spreetail experience.
The card-based paradigm built out in high fidelity, which was selected as the preferred approach.

Articulating a Design System

The design team and I leveraged the fact that we were operating without design debt or legacy environments. As we layered design rationales, finalized UI and established a cohesive system, we folded in product and engineering to integrate the efforts into the production environment.

On the design side, we maintained a master source of truth instance of all of our components and any relevant annotations to clearly articulate to product and engineering the purpose of any given element. The engineering team was able to pull directly from our design assets and create a reusable storybook in code.

Color and typography.
Spacing rules, product features, atoms and header.
Cards and buttons.
Inputs and filtering.
Hero and banners.