Store Kit
Elastic Path Reference Storefront
Reference Storefront B2C | Reference Storefront B2B | Styleguide | Github Repo
Client
Elastic Path
Time
Sep 2019 - Apr 2020
Roles
Lead UX Designer
Team
Shaun, Petro, Dusan, Yulia, Andrej, Jennifer
Open Source Demo Reference Store for Elastic Path Developers and Learners
The Elastic Path Reference store is an open source demo that allows developers to demo the end to end store functionality available through middleware company Elastic Path. Developers can view demos from our Documentation resources or download Elastic Paths SDK to immediately start experimenting, adding integrations, and learning about Elastic Path API’s, and product.
This store can call all of its components, It is free to use and customize for developers and organizations.
Elastic Path developers and learners need a way to test out Elastic Path API’s in the Reference store as well as create POC’s and client websites for B2B customers.
Together designing the B2C Reference Store, my task was addressing the use cases and messaging that was specific to its B2B Reference Store.
Additionally the visual design and UX components needed to be standardized, to enable for a more polished Demos and easily theme-able for internal demo team and external partners to sell the product to specifically B2B customers.
Plans & Strategies
Componentize UI elements in react library, this allows for easy POC’s and theming
Update key screens and flows to optimize for B2B and B2C
Create reusable extensible UX patterns and elements, for easy re-use and theming
Create UI kit of individual components for developers as an inventory of elements for re-use in their stores
Enhance key B2B experiences - Landing Page, Accounts Section and PDP (Product detail page)
Develop a new brand for the reference storefront “BelleVie” that can easily be used to demo for both B2B and B2C
Give Storefront overall visual design refresh
Timeline
Sept 2019 Research and initial prototyping
Oct 2019 Prototyping & Feedback B2B Next Conference
November 2019 New Brand for Reference store exploration and ideation
Dec 2019 Wireframing and product requirements for design
Dec 2019 BelleVie brand developed for demo - B2B/B2C Kitchen appliance store (premium Espresso storefront)
January 2020 UX design flows for PDP and handoff for component library
February 2020 Requisition list enhancement
February 2020 Landing Page UX update B2C, new B2B landing page
March 2020 Enhancements for PDP to support AR/VR
March 2020 - current Account enhancements ongoing
April 2020 - upcoming quick view
Wireframes, Site Map & Prototyping
The UX exploration proceeded through review cycles that included where stakeholders were shown a demo version of the Reference Store to get feedback and enhancements.
Product Demo Page
Homepage for B2B
User Account of the Reference Store
B2B Commerce, Global, Navigation, and Logged in Site Map Planning
Insights and feedback gathered from Stakeholders
Feedback and insights are constantly gathered through iterations of works, here shows some data that I gathered through out the process.
The account section was well received and would be used for POC’s
Secondary side navigation for account validated by panel as integral to demo account API’s and functionality in system
Quotes and Requisition list (B2B wishlist) features were well received and fast tracked into development
Managing addresses for accounts highlighted as a feature needed
Quick view was highlighted as an area that was missing
Needed B2B specific enhanced landing page to highlight value props for B2B companies, legacy landing page was more retail focused
Products needed to be updated to reflect a B2B scenario
Navigation needs to be enhanced (breadcrumb)
Landing page needs flexible grid with reflow elements that could be easily put into a mobile layout
Value props and information about the company are more relevant to a B2B company vs. retail that focuses more on individual products and sales
Navigation of store needed to be standardized to support multiple levels of category pages (L1, L2, L3)
Functional Designs & Features
The design stage proceeded through weekly sprints. The close collaboration with the product team allowed us to build and iterate continuously and deliver the Reference Store on time in concert with the release date.
Product Detail Page
Searching of a Product
Quick View of a Product
B2B Home Page
In Reference when a B2B User is logged in, the Hero image is designed to provided the first promotion of the site via a CTA. Tout, double height vertical provided the business client the option for longer engagement of the promotional piece.
Product Detail Page
We have breadcrumbs to support many levels of categories. Thumbnails support image viewings, videos and 360 degree products. Add to cart button dropdown for the shopping experience. Specification accordion that can be opened and closed to accommodate for products with a lot of information.
Quick View of a Product
This gives the shopper a quick view of the product without go into product detail page for a quick specification. User can be triggered from a category, search and cart page, therefore a quick drop in to cart experience.
Customization of Storefront by Partner Agency
The following shows the designs that been used by our partner, under the their usage with Elastic Path Reference Store Template.
Customer skinning of PDP
Componentization of UI elements in Store
Front-end react library was chosen as this is the most common front-end library used by developers. This choice was a key strategy to allow for the ease of use of components by the developer community
Storybook was selected to enable developers to easily copy and paste components, understand API’s as well as preview easily the components CSS
Visual Design updates and Brand
Here showcases iteration and version of the site’s visual and brand updates. First store brand was created as a packaging store before becoming BellVie.
V1 B2B brand exploration and ideation of a packaging store
Final B2B brand BelleVie espresso and premium cookware brand

Accessibility Standards in the Storefront
Accessibility for Reference Storefront was highlighted by Client Zilker
The Reference storefront colour contrasts were updated to follow WCAG 2.0 AA Compliance standards https://www.w3.org/WAI/ER/tools/?q=wcag-21-w3c-web-content-accessibility-guidelines-21
The storefront was tested with React component colour contrast recommendations https://reactjs.org/docs/accessibility.html#color-contrast
Ongoing User Research and Feedback during Design and Development
Weekly clients calls with partners Zilker and wine.com
For client Zilker we had a monthly call to give advice an ask for feedback as they were developing a multi-site experience for manufacturer Goodman https://www.goodmanmfg.com/
Insights
Reference storefront components are easily turned into a template that Zilker can re-use for future applications
Multi-site for different languages is being used
Price should be limited to only logged in users for B2B
Location is key to show specific experiences depending on location origin
Requisition list feature UX patterns were very flexible and could be combined with account enhancements for B2B store
Wins
quick order and bulk order well received functionality
Req list detail page repurposed for saved orders, this component is very extensible
PDP specifications tabs used, information could be better ordered to allow for less hard coding of information
Reference storefront components are easily turned into a template that Zilker can re-use for future applications
Storefront UI's used
PDP
Cart
Bulk Order/Quick Order
Req list modified to be Saved Orders
B2B Big wins with execs were Bulk Order/Quick Order Ui's and functionality