Senior Visual Designer | UX
I am a Sr. Visual Designer at Sears Holdings Corp, primarily working on product detail pages. I started in late August of 2016 and have enjoyed working on all parts of the product page from the hero image to the buy box, and ratings and reviews sections. Sometimes its difficult working within limitations of functionality, but that is the beauty of the challenge. Below are some examples of my best published work.
I am also leading efforts for our Patterns & Standards team. It’s been challenging to deal with losing team members, but I saw it as an opportunity to make some improvements. Before, we were mainly focused on maintaining and implementing new ideas (at a very slow pace). All of that is great, but I think it’s also important to become more of a design system that fully functions throughout all parts of the company.
In order to become more systematic, I conducted an entire audit of Sears and Kmart platforms. This was no small task, but it was achievable with the help of others. We are now able to identify where certain patterns are used, where patterns are used incorrectly or inconsistently, retire unused or uncommon patterns, and update and improve our current component library. Our biggest challenge is the lack of resources, and that is why I’m going above and beyond to build a business case to get the resources we need to be successful and accomplish a stable building environment across all platforms. You know, so things don’t change or break in other areas when you release new updates. I’ve been working with Sketch to build a robust library file and am using InVision’s Design System Manager to help organize and keep versions as the patterns evolve.
In the conception process for our design system, I’ve been leading our team in all sorts of brainstorming exercises to develop our brand. Ask me about “Pattern of the Month,” the Patterns Newsletter, or our weekly team meetings!
What I’m Working On
The next couple of projects I am about to talk about have been works in progress for just over a year now. The concept initiated with the UX Architect, and then I helped evolve the idea by collaborating with researchers and copywriters to implement standards and visual design.
Product Options Enhancement
Whenever the user would add a large appliance item to cart, a modal appears. The previous experience for the modal took the user through 7+ steps. Many times this would result in the user skipping important steps because the directions are lengthy or unclear, or abandoning the flow altogether. Studies showed that users dropped with every new screen of options, leaving us with a small percentage of people that actually made it to cart with all of the options successfully filled out. Our goal is to reduce the number of steps it takes to get the customer to cart and make it easier for the user to understand and quickly make a decision.
OLD EXPERIENCE
Our UXA was able to find ways to reduce the number of steps taken by creating a new enhanced experience. He came up with an “EZ-Install” strategy, which essentially is a quick-pick way to say “yes” to include all required and optional services and parts needed for installation. A secondary option would allow people to go through each option one by one, and a third option to allow users to just add the item to cart and come back to the options later. Also by working with our copywriters, we were able to clean up a lot of unnecessary content, making it easy to digest through every step of the process. If you select the EZ route, we reduced the number of steps from 7 to 3.
I took additional time to find various product types to figure out all of the different product option variables we would need to design for. see the various prototypes
NEW EXPERIENCE
We are already working on the next phase of this project which turns each step into a scrolling single-page design, which you can preview here.
Protection Agreement Optimization
During the design process for Product Option Enhancements, we discovered that Protection Agreements are our largest add-on item for appliance purchases, but the number of people that add them to their purchase is significantly low. Our UX team looked at the existing experience and found that it was difficult to understand what customers would be buying into. A standard 3-year agreement on average would cost about 25% of the item total, which is more expensive than other competitors. Unfortunately, the information we were providing our users wasn’t always relevant or clear.
OLD EXPERIENCE
Our research team did a study to figure out what people thought the benefits meant and ranked them in order of importance. After we got our results, our UX architect was able to group and list the benefits by order of importance to users. I read our Terms & Conditions to help define what each of the benefits meant, and our copywriters made it more easy to understand for consumers. With great teamwork, this is what we were able to come up with. view project
OPTIMIZED EXPERIENCE
Best Published Work
PDP Optimization
This project started when the Creative Director asked me to see if I could find subtle ways to decrease the height of the product page. In the example below, the original page height was 12,178px. I was able to reduce the page height by more than 20% by simply adjusting spacing to make sure that elements on the page are evenly distributed. Another 20% reduction just by re-evaluating the hierarchy of headline title styles. And another 20% of the height was reduced by adjusting the size of images in the Feature Highlights section and reordering more important parts of the page. For this particular page, the end result was 7,425px, giving us a 60% reduction in page height.
For all of the optimizations made on this page, I broke them down into smaller tasks by writing JIRA tickets to make it easy for our engineering team to accomplish. These changes were designed, developed, QAed and pushed live within 4 months. There are still some pending fixes and improvements to be made, but they are a work in progress.
see full-page examples
The Up-sell Module
The goal of the up-sell module on product detail pages is to increase conversion and ROI by comparing two similar items to the product of the page you are on. The first item being compared is better in ratings and features, and has a slightly higher price. The second item in comparison is out of the user’s price range, but has lower ratings and better features. Thus, putting the focus on the middle item and encouraging users to click on the button that leads them to more information on the middle item’s PDP.
The module was designed for desktop and mobile. Mobile had some design challenges in displaying a horizontal table within a vertical viewport, so we had to work with our engineers to solution an experience that would show the full width of the table when the user turned their device sideways with minimal scrolling.
We measured click-through rates, and conversion rates in a live A/B test where half of our users saw the up-sell module on only Washer or Dryer PDPs and the other half did not. The group that saw the up-sell module presented a 4% lift, or more than $4m if you want a dollar amount, which is HUGE in Sears history. Needless to say, this is being implemented fully across all of high-ticket items in Home Appliances and Lawn & Garden. This module is projected to bring in over $27m during it’s first year.
I provided some UX recommendations during the UXA / wireframing phase with Sam Higgins and Tom Elliott, and then I did the visual design with help/suggestions provided by Art Director – Carlos Torres, and Creative Director – Rich Gallo. We worked with local front-end developers and off-shore engineers to successfully deploy our product.
Desktop Full-screen Display Mobile Display
Apparel Template PDP
The Apparel template was one of the first projects I worked on to go live into production! This project was already well under way when I joined the team, so I am unable to talk about the early stages of the architecture. I was responsible for the visual design, making decisions like how large the font should be for the sale price, and the dimensions of the hero image and placement of the carousel arrows to view additional product images. I worked with my art director to finalize styles of the color swatches, and worked with the UXA and engineers to perfect the functionality of progressive reveal as the user makes their selections in the right rail. I also designed the style and functionality of the specials module at the bottom of the right rail.
Select a pair of jeans from this page to see how the apparel template page works in production today.
View Prototype
Syndicated Images with Ratings & Reviews
The Syndicated Images with Ratings & Reviews project initiated in March of 2017 and launched in November. This might be one of the most challenging projects I’ve ever worked on. We started with very clear initiatives and outlines, but the project grew over time (adding the gallery, see phasing further down) and the requirements kept changing.
I remember trying to collaborate with our UXA early on, and getting into a heated discussion about the placement of the image within the context for the review. He advocated for below the review. and I advocated for above. People are more visual, and don’t want to read; whereas, it detracts from the focus of the review. I wish we had more of an opportunity to user test it to validate the solution, but through reasoning and talking it out with the team we ultimately decided to lead with the image and then the review. Unfortunately, after a few months of working on the project, our UXA left the company. Which left me, the designer, to finalize and write many of the details and functionality requirements. We had another UXA filling in, but he was unfamiliar with the project, so I felt like I was carrying most of the weight for the remainder of development.
Engineers also had difficulty keeping track of updates. We also ran into several functionality limitations on mobile which required some redesign effort on my part. Of course you can never find these errors all at once when you are working in an agile method, and you are building and testing different parts at different stages/sprints. I would often need to go back to the drawing board and need to come up with an alternative solution within hours so our offshore team wouldn’t lose time in their day and can stay on schedule with development.
We ended up phasing this project as follows
- Implementing images into the individual reviews
- Implementing image gallery
- Ideal next phase would be to allow members to upload their own images
Prototypes
Desktop Phase 1 Desktop Phase 2
Mobile Phase 1 Mobile Phase 2
See it in production
