Shopify Auction App
Auction app empowers sellers using the Shopify platform to conduct live auctions for their products directly within their online stores. Initially developed for a high-profile client, the auction app would eventually be released to all Shopify customers, living as a Shopify-owned app on the app store.
This project was created in collaboration with the Shopify Special Projects team over a 6 month period. Throughout this partnership, we worked closely with their team to identify user needs, establish project requirements, craft a seamless user experience, and develop the MVP.
-
Product Design
-
Knit Agency/Pixel Union
Shopify
-
E-commerce
-
Design Lead
UX/UI
Strategy
-
6 months
Problem Discovery
Defining the MVP & gaining alignment with stakeholders.
-
Shopify initially presented a specific use case to Pixel Union for the proof of concept, but scalability necessitated the exploration of future use-cases. In the agency environment, with time and financial constraints, a crucial lean UX approach was adopted for defining the Minimum Viable Product (MVP). This involved utilizing Shopify's internal Subject Matter Experts (SMEs) and Pixel Union's team to quickly develop proto-personas, focusing on understanding various user types, their goals, and pain points. This lean approach was particularly vital in the "skunkworks" Shopify project, where time directly translated to customer costs.
Shopify initially presented a specific use case to Pixel Union for the proof of concept, but scalability necessitated the exploration of future use-cases. In the agency environment, with time and financial constraints, a crucial lean UX approach was adopted for defining the Minimum Viable Product (MVP). This involved utilizing Shopify's internal Subject Matter Experts (SMEs) and Pixel Union's team to quickly develop proto-personas, focusing on understanding various user types, their goals, and pain points. This lean approach was particularly vital in the "skunkworks" Shopify project, where time directly translated to customer costs.
The consumers pain points, goals, needs, & behaviours don’t vary vastly based on the type of item(s) that are being auctioned. Where are team did see nuances is when it came to both their experience and commitment as it relates to the auction process. The team identified 3 proto-personas for the consumer, each with differing challenges to solve for: The seasoned participant, the newbie, & the browser.
-
As the design lead on this project, I spearheaded the thorough examination of Shopify's provided documentation, data from proto-personas workshops, and market research within the design team. Our collaborative efforts resulted in synthesizing insights into a comprehensive list of user stories categorized by Epic. This living document facilitated coordination with our engineering team and Shopify, allowing us to organize and prioritize stories, document technical discussions, and plan the necessary work for each user story.
-
User flow diagrams played a crucial role in fostering alignment early on in the process. By visually mapping out the journey, the team was able to identify potential challenges, streamline processes, and make informed decisions collaboratively, ultimately enhancing efficiency and coherence throughout the projects lifecycle. This visual representation became a powerful communication tool, facilitating alignment discussions with stakeholders, and ensuring a shared understanding among both front-end and back-end engineers.
Merchant proto-persona: Ecommerce Specialist
Merchant proto-persona: Artists & Musicians
Merchant proto-persona: Charitable Organization
Consumer proto-persona: Seasoned Participate
Consumer Proto-persona: New Auction Participant
Consumer proto-persona: Browser
Sample of user stories
User flow example
Iteration & Design
Collaboration cross-functionally with the Pixel Union/Knit team + Shopify.
-
As this was to be a Shopify native app, adhering to the Polaris design system was critical for the success of the project. My team and I worked closely with our internal FE engineers and external members of the Shopify special projects team to familiarize ourselves with the Polaris design patterns, use cases, and technical patterns to ensure we were able to execute swiftly with the high degree of consistency expected of a Shopify native product.
-
Our team met weekly with the Shopify special projects team to review milestones, gather feedback, and track progress. This team included a Shopify design consultant, solutions architect and Shopify engineers. To ensure this process went smoothly I created detailed documentation linking out to videos and Figma files that were provided prior to the calls to ensure all team members came prepared to have targeted discussions in an easy to follow format, but still go really deep when/as needed.
-
Setting up an auction
The merchant experience went through 3 phases of design & development: MVP (proof of concept), V1, and V1.1. You can view the detailed raw files which include the user flows by clicking on the associated links in the Merchant section below.
The primary final flow for creating and setting up an auction: Enter auction details, add products, specify betting parameters for each product, saving a draft, and once ready publishing the auction so that it could be embedded onto your store.
Running an auction
Once an auction was in progress the merchant could view the status of all auctions, cancel the auction, change the end date/time of the auction, and monitor and retract bids (in the case of “bad actors”) on the auction.
-
In addition to crafting the merchant-facing experience, our team was responsible for the delivery of a consumer-facing app that seamlessly integrates into a Shopify store to facilitate auctions.
The app is "white-labeled," allowing merchants to effortlessly apply their store's branding and styles to ensure a consistent bidding experience. For in-depth user flows and functionality details as the project evolved through design and development, refer to the Figma files for the MVP, V1, and V1.1 in the Consumer section below.
Merchant Experience
Empty State
Creating an Auction
Adding Products
Adding bidding rules
Draft Auction
Scheduled Auction List
Open Auction List
In progress Auction
Monitoring & retracting bids
Consumer Experience
Delivery
-
To ensure a seamless transition and clarity, all design files included detailed user flow diagrams, descriptions, prototypes and links to the corresponding Polaris components. This approach reduced friction and resulted in the figma file being the single source of truth for all members of the production team (system architects, front end and backend engineers, designers, and QA.
-
Recognizing that everyone works differently and figma can be difficult to follow if you are not used to it, I also created detailed hand-off documentation to assist QA with building their test cases and conducting their phase of the work. This process brought more clarity to the team and resulted in fewer issues being caught in Design Review/UAT.
-
The entire project was documented in detail in notion. This became our single source of truth that was eventually handed off to the Shopify team once we had completed the project. The approach I took for this project became the blueprint for all future projects.
If your interested in seeing the documentation template please reach out.
Preparing for handoff.
Example of dev handoff file in Figma
Design handoff documentation for QA
Project Documentation