Rodrigo G Cardoso
User Experience Design Lead
Close
Multi-Brand National Supermarket
PROJECT: Marketplace Website
ROLE: UX/UI Design Lead
DURATION: 4 months
TOOLS: Sketch, simply.io, Jira, Microsoft tools, Magento
The Problem
Create an online marketplace for 3rd party sellers and allow customers to purchase online and have items shipped to their location.
​
Goals of the Marketplace:
​​
-
To become the go-to online destination in food & drug retail, with a focus in grocery, health & beauty, and household
-
To provide millions of digitally-fluent customers with the extended product assortment they desire
-
To offer a great end-to-end digital experience to customers
​
The Marketplace will be based on:
​
-
Merchandise authentically shipped from 3rd party sellers with great stories
-
Expanded category and product choices
-
Emphasis on categories where extended variety matters (NOSHE)
-
Under the trust of the Albertsons brand
-
Not a duplication of ABS merchandise, but a bridge to more
​
The Resolution
This site was built on the Magento eCommerce platform.
Client team consisted of a Delivery Lead, a PM, a BA, a Lead Developer, and myself as a UX/UI Design Lead. We worked with a Magento team and a Mirakl team that provided the third-party vendor platform that housed their catalogue.
​
This was an agile project with 4 sprints. The lead developer and myself broke down the website into the different sprints and epics and created PRD (product requirements document) to track the status of each. This activity helped organize and provide visibility to all teams involved.
Due to the small team, it was imperative that I take ownership and responsibility for moving the project along - making sure that I communicated with the client, Magento, and Mirakl teams often to make sure I was meeting expectations and delivering quality deliverables on time.
​
Designed all the catalogue pages, My Account pages and Checkout flow pages based on a hybrid approach – using an existing design system and adapting it to the Magento platform.
Created a general style guide for the developers and various email templates.
​
​
The Process
Worked with Delivery Lead to come up with a design approach. Decided that each marketplace category would have its own branding and design.
Example of Coffee category design exploration
Example of Household Products category design exploration
Example of Household category design exploration
Example of Health & Beauty category design exploration
Example of Specialty Products category design exploration
Example of Special Diets category design exploration
Example of Magento Sketch UI Kit
Met daily with the Magento team to ensure that I could design the marketplace pages utilizing the existing design system and design language used for the other supermarket's banners while utilizing the Magento information architecture and patterns.
Mirakl Catalog Manager
Met daily with the Mirakl team who was handling the onboarding and catalogue API for the vendors selling on the platform to ensure that the data I was including in my designs matched the data the Mirakl Catalog Manager platform housed.
Vendor page example
Met daily with the Product Manager and BA to help groom user stories and review design proposals.
For each sprint, reviewed wireframes with the Safeway team to get alignment before proceeding with high-fidelity comps.
Image inventory in Sketch
Once designs were complete, created an inventory of all the images needed for the marketplace.
Image inventory presentation deck
Hand-off to Engineering was handled via Sympli.io style guide tool.
The Deliverables
I created high-fidelity visual design comps in Sketch for Desktop, tablet and mobile viewports.
Design pages included; Marketplace landing, L1, L2, L3, PDP, catalog, My Account, Seller profile, Checkout flow pages. These were then added to our Box project and Sympli.io - as style guides for each page.
I was able to create all designs on schedule with low defects. I also created a general style guide for the project and a deck with all the image needs for the marketplace.
Marketplace landing page
Marketplace category page
Marketplace category page
Marketplace product details page
Examples of mobile designs
High-level Marketplace Seller Features
High-level Marketplace Features
​
The Marketplace homepage provides an introduction to the experience with clear messaging around seller listed merchandise
​
Category level messaging on seller fulfilment
Product detail page label that reinforces that each item is sold and shipped by a third party seller
Industry standard disclaimer message that puts product listing liability on supplier/manufacturer
In the shopping cart, and during check out, the seller is listed for each product
Each order confirmation lists the seller by item purchased
The shipping email lists the seller name so the concept of seller fulfilment is clear
Seller added to the order history page to make communication between sellers and buyers the default method for resolving disputes
Seller contact pages provide clear information on fulfillment and returns. Seller to buyer messaging facilitated through the platform to resolve any issue.