sears & kmart
UI/UX Design | Team Lead | User Research | Product Strategy | Engagement Planing | Content Strategy | Style Guide Creation | Roadmap/Prioritization Planning
The Enterprise Style Guide, one system to rule them all.
Our objective was to finally merge the visual language and patterns of the desktop and mobile experiences. Sears operated by having leads for each department, who sat in silos with motes around them, drawbridges up, portcullis down. This obviously created a lot of issues around consistency and the rate at which sections of the site updated to newer designs. This behavior was reinforced by each lead effectively fighting for their pool of the customer money, better numbers = better bonus.
The responsive handshake & the Atomic approach
My main responsibility was overseeing and leading the sears mobile experiences reporting directly to the Creative Director of Mobile. During the majority of this time the CD was also my manager, which contributed to the silo issue I mentioned above. About 2 years in we merged teams with sears.com (desktop) and the Art Director of sears.com became my new manager. This shift got us thinking about how we should be working together, not racing each other for the next design trophy.
The AD and I sequestered ourselves in the war room when we had time between projects or deliveries to comb through interactions, icons, type styles, IA, nomenclature, if you could see it we audited it. We both decided this was a great opportunity to break down the design systems to a “molecular level” and introduce the group to Atomic Design. Sears mobile was already following a version of material design, so we used this as a starting point for our atomic elements–the atoms.
We covered the walls in existing patterns, noting inconsistencies, element frequency, ADA issues, and more.
The fun begins, we got funding.
Sears operated internal projects by spending “blue dollars,” meaning someone up top had was funding your project in the hopes to see green dollars. We were able to establish funding for this project by convincing the mobile VP and the Desktop Creative Director that this would rapidly increase design output and reduce development time. This meant more time could be spent implementing new features on the already crowded roadmap. The kicker was we could only pull in 1 extra person, we chose the best front-end developer in the group and got started full time.
Some Atoms & Molecules
Icon Library Font
This gave designers access to every icon in one place. We eliminated the need for multiple sprites, and reduced page load weight by 39kb.
ADA - Fonts
Our older visual styles had a base font size of 12, this was much too small for our older customers–a rather large percent. We introduced a base font size of 15px. After introducing this size, complaints of text being too small nearly vanished.
Consistency Across Elements
One major proponent of this system was consistency, we had stress test new design system additions across multiple colors and combinations. This included hover opacity percentages seen on these CTAs.
Universal Padding
Spacing options were limited to 3 sizes, 10, 14, 20. Common combinations of these sizes were eventually introduced to accommodate future designs as this system was constantly evolving.
Variation Testing
We put our new visual systems through multiple user studies testing every “cool” form style available in 2015. What you see is the undefeated form champion.
We created over 20 psds with styles and guides, respecting your time I’ll stop with the atoms/molecules here.
Implementation, resistance is futile.
The visual team (myself and the other AD) worked 2 weeks ahead of the developer creating the new front-end system. The runway gave us enough time to create, stress test visually, fail, fix, and hand off. The developer created a system that mirrored our molecules and organisms 1:1, this was the secret sauce to speeding up the whole design to live flow.
Sears used a staging ground to QA the site before it is pushed into production. In order to get new products live, pages had to pass a QA checklist in staging. Each Vertical (sections of the site) had a 2 month runway to prepare their section for the new CSS/HTML otherwise they’d fail QA, and their section would become obsolete and fall behind on the roadmap. Every vertical complied but one, the product details page on sears.com. After this page looked dated and broken in production the lead had no choice but to pump the brakes and join the new styles.
tl;dr
We had created a system that matched from wireframes to production. We accomplished this by covering an entire room in page printouts and auditing the sites (desktop and mobile) against multiple categories in our spare time. We gained funding internally due to the fact our visual language was so broken and inconsistent, plus slowing dev cycles due to spaghetti code on the front-end.
The lead dev, Art Director (sears.com), and I (Art Director Sears Mobile) started to bring this to life by creating the atoms, molecules, organisms, templates and pages needed to support the sears ecosystem. The HTML/CSS mirrored our style guide rules 1:1, so someone would have to go out of their way to make one-off organisms.
In all, it took us 1.5 years to deploy across desktop and mobile.