Foundation Repair (Fix the site)

UI/UX Design, Prototyping, Web Development, CSS Design System
blinds.com

Project Overview

Establish a set of UI Standards and Style Guide for Blinds.com to reduce friction for users throughout the funnel. Update layout to a more modern look and feel and enhance mobile experience. Implement the new standards through the use of a CSS framework.

My Contributions

As part of a small team I contributed to the design, development, testing and implementation of agreed upon UI Standards and refreshed design leveraging the CSS framework, Tachyons.

A birds eye view of the funnel

Blinds.com (GCC)

Manager, Interaction Design

Aug 2017 - Present

In 2017 there was no established set of UI Standards for Blinds.com so there were lots of inconsistencies throughout the site. Additionally, the layout was a little dated and the mobile experience needed a major overhaul.

A group of frontend developers and UX Designers were selected for a team that was tasked with giving the site a more modern design, establishing a set of UI Standards and creating a style guide for all of the visual elements and components used throughout the site.

In the initial phases of the project I was responsible for identifying inconsistencies in language, UI elements, page layouts and visual components present throughout the site. I then gave recommendations as to how we could address the issues and establish a more consistent look and feel across the site.

As the project moved from the design phase into development it was my job to help implement the design changes and new CSS framework, Tachyons. Basically I worked on converting our existing page layouts and components over to the new design system and UI Standards.

Home Page

Noticable Differences

  • Title Font Consistency
  • Font Sizes & Weight
  • Icon Style Consistency
  • Popular Categories
  • Padding & Margins
Before
After

Category Page

Noticable Differences

  • Category Title
  • Font Sizes & Weight
  • Measurement Controls
  • Primary Shop CTA
  • Favorite Icon/Placement
  • Badging
  • Left Filters
  • Card Styles
  • Vista Improvements
Before
After

Product Page

Noticable Differences

  • Title Font Consistency
  • Font Sizes & Weight
  • Boxed Layout
  • Consistent CTA Message
  • Primary Shop CTA
  • Measurement UI
  • Color Selection UI
Before
After

Configurator Page

Noticable Differences

  • Title Font Consistency
  • Font Sizes & Weight
  • Boxed Layout
  • Primary Shop CTA
  • Measurement UI
  • Color Selection UI
  • Preview/Summary
Before
After

Cart Page

Noticable Differences

  • Title Font Consistency
  • Font Sizes & Weight
  • Boxed Layout
  • Primary Shop CTA
  • Product Preview
Before
After

UI Standards

typographylogos and colorsui elements