Sensi Website
Kathleen Dye
UX/UI Designer
Made with

Sensi Website

Website Redesign // Pattern Library // Project Management

My Role

As the UX designer for this project, my role was to collaborate with various stakeholders and design the layout of the site. I worked closely with our teams to determine what content and ensure they would have the best tools to build and edit content on the site for our marketing and support teams. 

Each interface component was carefully designed. As the site was built I took each element and built a pattern library that our team could reuse across all our products. 

After the initial designs were done I took over as the project manager for the site and worked closely with our development team to complete the site. 

Project Goals

  • Showcase our new product at its launch
  • Built an e-commerce site to sell our products
  • Provide easy to find support for our products
  • Include a blog with useful resources for homeowners
Sensi Website

Sketching

I usually start the design process with paper sketches. I often ask the team to sketch with me. This often includes product managers and software engineers. Collecting their ideas helps me to align with the team and gain better knowledge about what things will work technically. 

This collaboration allows me to get my ideas laid out very quickly so I can get feedback from my team before getting too attached to a particular idea or layout.

Many times I'll create a number of sketches before I narrow it down to the direction that I want to go. After I feel like I have a direction I will hop into Sketch to quickly lay it out to get a better idea of how the images and text play together. 

Sensi Website

Wireframes

After my teammate, Julie, had determined the architecture for the site and I had laid out most of the necessary content I took my sketches and began to create wireframes. 

I was able to use the wireframes to review with the team and get feedback before the designs were finalized.

Sensi Website

Responsive Design

One of our main goals was to ensure that our site would look and function well on any size device. 

Each page element was designed with small screen sizes in mind- I determined how each element should flow and what design would work best on varying screen sizes.

Accessibility 

We built our site with web accessibility as a top priority. Following the WCAG contrast standards, Section 508 standards and other best practices, we aimed to optimize the site to provide the best possible experience for all of our users.

Pattern Library

Building Reusable Patterns

Our team decided that our site redesign gave us the perfect opportunity to build a pattern library or design system. Inspired by the Atomic Design Methodology we collected all the elements from the site to build a reusable library for our team to help carry a unified design language throughout our products. 

The Design System

Since our UX team all use Sketch we built the system within a Sketch document that could be easily shared and implemented into our projects.

We made sure to include some of our basic marketing guidelines such as colors and typeface in addition to all the UI elements for forms, buttons and other web elements we planned to reuse.

Sensi Website

After The Fact

Sensi Website

Learnings

This project had some great challenges but out of it our teams learned how to collaborate in a new way and we were able to build a website that met our objectives.

After the initial site launch, there were parts of the site that we had planned to build that were not completed for various business reasons and the management of the site was taken over by another team. Much of the carefully planned structure of the site allowed for the original designs to adapt well to new and changing content on the site. 

Dear Kathleen Dye,

Best,