SSENSE

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

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.