Equinix

Equinix specilizes in internet connection and related services. It is the leading colocation data center provider by market share and it operates 175+ data centers in 44 major metropolitan areas in 22 countries on five continents.

Overview

In 2016, Equinix decided to do redesign their core product and bring it in line with latest design trends and technology. In order to keep a consistency among all the user portals Equinix design team had to design and build a Design System which was a major goal for the redesign effort. This included - 1. Redesign UI and UX of the current Customer Portals. 2. Designing and Building Design System. 3. Redesigning Email templates and 4. Building custom UI components with animations.

My Contributions

• Engineered custom UI Components using React and Ant D library.
• Redesigned 'Internet Exchange Product' landing page using Sketch and coded using HTML and CSS.
• Researched and developed a UI Styleguide of patterns and components for Equinix Design System.
• Learned efficient implementation of UI components using LESS and React components.
• Build redesigned HTML/CSS email templates in DOT CMS.
• Tested cross browser and multiple device compatibility for the Equinix Customer Portal and Internet Exchange Portal.
• Collected feedback from active users to improve application performance.


Quick Facts

My Role:
UI Developer/Designer
I am currently collaborating with designers and engineers to make sure we are building right UI components. I work directly with Design Team lead to prioritize and build component library, get hi-res specs from Visual UI Designer to customize the UI Components and the engineers to fix UI Bugs and write efficient LESS code.

Team:
Ray Snow-Shiva | Sr. UI Developer / Design Lead
Madeline Rogier | Visual UI Designer
Johannes Neumann | Frontend Engineer

Time:
Aug. 2017 - Current

Stack:
HTML, LESS, Ant Design, ReactJS, JavaScript

Tools:
Sketch, Adobe CC, InVision

UI Component Library : Design System
Building a stack agnostic component library to keep the UX consistent across the multiple portals of Equinix. Tech used: HTML, LESS, JavaScript. Images below show Styleguide Information architecture as well as some screenshots of the component library.


SVG Animations
I enjoy adding motion to the DOM, here are my attempts to add css animations to the svg elements in Equinix Customer Portal.


Equinix Customer Portal Loading SVG Animation



Equinix Customer Portal 404 Error page SVG animation (Hi-res designed by Madeline Rogier)



Internet Exchange Portal Product Landing Page re-design and development
Before and after product landing page design.

Equinix Customer Portal Email Template for DOT CMS.
Coded the responsove template using table elements and inline styles for multiple devices email clients.
UI Component Library - Frontify V2
-Took ownership of redesign of Component Library version 2, consolidated stack agnostic (HTML, CSS, JavaScript) UI components in Frontify, UI Component Section.
- Created downloadable resources for developers to fasten the UI development process.
- Maintained and updated 150+ svg icon library for Customer portal in Github Repo.

Introduced and implemented Design Tokens (Global CSS, JavaScript design variables) in React Codebase to improve design language consistency across the various UI Components in Customer Portal.
- Consolidated design variables in stylesheet and translated css variables in various formats (css, javascript and json).

Error Screen UI Design and Markup for Customer Portal
- Designed and coded (SVG markup) multiple screens for error scenarios that align with Equinix Branding guidelines.

Customer Resource Hierarchy - Coded Prototypes for various use cases (Billing, Customer Org, Parent Org, Resource Management inventory)