Store Kit

Client
Elastic Path

Time
Sep 2019 - Apr 2020

Roles
Lead UX Designer

Team
Shaun, Petro, Dusan, Yulia, Andrej, Jennifer

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.

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.

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.

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.

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