Creating an easier & more efficient way to manage multiple Stores

OSF Innovation Labs

About the project

Innovation Lab is a project where we can improve our internal Store which contains all available B2B and B2C Commerce Components ready to be directly installed on the customer’s environment, solving most common challenges for implementations in a faster way.
Most B2B Commerce projects need customisations built from scratch. Our B2B Commerce Portfolio can save consultants and developers several person-days by starting ahead with Custom components used and processes in previous projects. Based on that, the company can reduce both the cost and the time to market of the project, delivering a qualified solution for our customers.

Discovery

  • Risk Mapping
  • Backlog Grooming
  • Goals to Be Achieved
  • Communication Plan

Savings Opportunity

  • Less configuration time for custom Commerce Projects, reducing the time-to-market.
  • Components up-to-dated with Salesforce new trends that were created based on the design system.
  • Reusable independent components to be used in new projects, reducing implementation costs and risks.

Internal Research

Time spent on development, prototyping and idea validation: Up to 56 person days/implementation/component

With all the information clustered, we established a date: First MVP: 5 Sprints (Every Sprint 2 weeks time)

Misconception about Accessibility: color, contrast, keyboard navigation

Old and deprecated components

Responsive Issues on layouts

Limitations in: color palettes, header/footer, general styles and theme structure

My responsibility as UX/UI Designer

As a UX/UI Designer my responsibility was enhance the user experience of the stores through a consistent, simple design and with the necessary components for a successful user journey. I also had to refine all the research collected to categorize which components needed to be improved, the problems that users constantly have regarding limitations in the interface and also improve the usability of some components, the color palette and the responsive design.

Goals

Team Roles

Fronted Developers, UX/UI Designer, UX Research, Backend Developer, QA, Project Manager.

Color Definitions

First thing’s first!

Fix issues related to color/contrast in graphic objects and texts in the user interface. For this I relied on the WCAG Compliance – Accessibility Checker: WCAG AAA.

Enabled more flexibility in the color palette: more options for contrast and also a new palette; Root, for text, links and borders.

Improved features

  • Color enhanced: Buttons, Badges and Toast
  • Improved the Toggle component: it created confusion for users. In this case, we added an icon to communicate the status of the action
  • We created Badges: an extra possibility to customize the store’s products when there are promotions, discounts or just highlight something
  • Extra functionality in the Toast component: title + texts. More flexibility to communicate
  • Product, Login, Cart, Address cards ready to use
  • Product Card + Image gallery component
  • New component Tier Discounts: allowing users to set-up Min. Max quantities per orders and Discounts per Unit
  • New Illustrations for the Empty States: to avoid users uncertainty when they are lost in the store
  • Thank you for your order card + CTA to continue shopping

We also improved the theme because responsive issues: standard resolutions: 1400px, 768px and 375px and added a new feature: extra promo bar on top of the header.

Promo bar add flexibility to highlight promotions on the store or Shipping info.

Results

Because they are proof points of our innovation mindset, this update has helped make implementations better, faster, and easier.

The new updates empowered us with custom features, processes and components that have been tested and implemented in other successful eCommerce projects. So why build from scratch when you can use what’s already been built?

We’ve been working really hard to improve the tools through team, and stakeholders valuable feedbacks and market research. Our main objective is continue making the already available tools more efficient for project development and help teams go above and beyond on delivering high quality projects in less time, along with providing teams with new tools that would do the same trick.