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.
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.
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.
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.
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.
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.
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.
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.
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.