Shopgate Solutions
Omnichannel technology solutions for retailers
2020
Challenge: Multichannel mid-market retailers need a faster and easier way to bridge online and in-store systems in order to provide their customers and staff with a seamless buy-online, checkout in-store shopping and fulfillment experience.
Solution: Provide a simple, scalable, and affordable end-to-end commerce solution to merchants via checkout extension and two interconnected clienteling and fulfillment apps called ‘Relate’ and ‘Deliver’.
Role: I functioned as the Product Designer and UI lead. My duties included researching and collaborating with the product team, exploring concepts and executions, wireframing, and designing high-fidelity comps and prototypes of the tablet solutions.
‘Relate’ clienteling app displays customer order data and information to assist in-store store associates to better serve shoppers
‘Deliver’ fulfillment app allows store associates to pick and pack buy-online-pickup-instore orders.
‘Deliver’ order details page
‘Relate’ & ‘Deliver’ analytics page
Deliver Workbox—a filtered view to see fulfillment orders in various stages of completion
User flows
I worked with the VP of Product and Product Manager to identify and map out user flows in the fulfillment journey, outlining the interaction points for the customer and store associates. Through this, we were able to identify the most common and expected fulfillment scenarios, as well as, a variety of edge cases that, while important, didn’t fit within the scope of the initial release.
“Happy path" flow for fulfilling an online order with ‘Deliver’
Wireframes & UX workflows
I collaborated with the product team to wireframe the core experiences of the solution in Balsamiq, refining and editing based on internal reviews, feature/functionality alignment, and heuristic evaluations. Working in mid-fidelity allowed us to keep the conversation grounded in the experience before applying too many style decisions. Additionally, I mapped essential processes, like the order status within the BOPIS fulfillment journey.
UI & Style & Prototyping
I led the effort in building a design system in Figma, adapting our brand colors and fonts into UI components, and designing high-fidelity comps and interactive prototypes.
Additional Context
At the time, few merchants in our target market had an optimized end-to-end solution for buy-online-pickup-in-store. Some had a front-end solution to provide pickup options to online shoppers but lacked logistical support and automation for in-store fulfillment. Our research found that connecting online and in-store systems is a desirable goal for these retailers, however, it’s slow, technically challenging, resource-intensive, and expensive.
Our goal was to address these challenges by crafting a solution that’s cheaper to implement than custom dev, could be rapidly deployed and scaled, and most importantly, delivers a smooth experience to both shoppers and retail associates.
We were able to launch a Beta version of the tablet apps in a little over 6 months. We broke up the work into phases, starting with proof of concept, MVP, and then Beta Release. Getting the Beta in front of our customers allowed us to gather valuable feedback for refinement and adjustments as we rolled out new features and functionality.
The compressed timeline meant a snowball of decisions that locked us in early. But all things considered, I’m pleased and proud of our accomplishment in bringing a new solution to market. We were able to adapt, respond, and produce a functional and powerful solution for our customers, as well as, drive new business and interest for Shopgate.