SSENSE

Configurable UI components

Role: Full-stack Developer
Client: SSENSE
Team: ustwo
Technology: Vue.js, JavaScript, SCSS, Webpack, WordPress, WordPress REST API, Node.js, Express.js, Docker, Travis CI

Overview

SSENSE is a multi-brand, luxury fashion retailer with a unique editorial section, originally founded as an e-commerce platform.

Goal

Create a scalable and flexible system for content authors to easily create and manage articles, each with a unique layout.

Challenges

  • Systematize a plethora of layout variations into configurable UI components and an easy to use backend
  • Systematize a variety of typographic variations that utilize a custom font

Role and Team

My responsibilities included significant contributions to the frontend design system which consisted of a variety of sophisticated, reusable, Vue.js UI components. I also contributed to the WordPress backend to create custom fields for content authors to easily create and configure thousands of layout variations.

The ustwo team consisted of 3 developers, 1 QA engineer, 1 designer and 1 project manager collaborating closely with SSENSE’s product team.

Final Design

Configurable UI components
UI components in various configurations on the home page
Home page layout
UI components in various configurations on the home page
Home page layout
UI components in various configurations on the home page
Article page layout
UI components in various configurations in an article page
Article page layout
UI components in various configurations in an article page

Results and Learnings

  • The WordPress backend was well received by the editorial team and enabled them to amplify their productivity.
  • I quickly adopted new technologies and made contributions to optimizations for website performance via server-side rendering via a Node.js/Express.js backend-for-frontend. And automation via a build, test and deployment system via Webpack, Docker, Travis CI, GitHub and bash scripts.
  • I also made optimizations to speed up development by streamlining the usage of an overwhelming amount of properties shared by highly customizable UI components. I did this by creating a flexible way to distribute reusable functionality across components via Vue.js mixins and abstracting the properties into reusable and composable objects and mixins.
  • I was successful in partnering with designers to define component configurations, reusable typographic styles and systematizing designs into reusable components.
  • I also created a VuePlay UI component library to showcase the various configurations of components so that they can be easily adopted and reused in the future.