Kohl's Experience Manager
KEM was the tool Merchants used to set up and manage the rules that ran the search/browse pages of Kohls.com.
This is a good example where I as the design leader, I changed the course of a program.
the challenge
The project presented several big challenges for the design team and me as the manager. The biggest being, this was a timeline driving project.
The yearly licensing fees were expensive, so it was decided to expire the old tool and replace it with a home-grown solution. To hit the timeline needed, engineering determined they would need X amount of time based upon the current templates and what was left would be for design; this was @2 weeks.
Design was asked to just re-style the current experience and change nothing. I knew this wouldn’t allow design to bring value to the project and ultimately leave the users with the same experience just with a new face lift.
The current tool was an out-of-box implementation and no updates had been done throughout the 10 years it had been in use.
my role
Kept leaders informed on progress of the program and worked with them on any changes necessary.
Worked to unblock issues such as timeline so design could come up with the best possible outcomes.
I worked with Business and Product to change from waterfall to sprint cycles, which allowed design to create user focused solutions through rapid UT.
Came up with a delivery schedule with Product, Design and Engineering that satisfied everyones timelines.
Had the team utilize a design system created for another internal application; this allowed the team to move faster and to stay focus on solving problems.
Worked with Leaders on the vision of what the new application could be to allow them to be comfortable with all the new changes.
I stepped in as a 3rd product designer when gaps needed to be filled.
I worked with the team to plan areas I could look-ahead, to create designs based upon our collective path forward and to test with users.
As the design manager, I had some decision to be made. Do I put designers on the project with the current ask, knowing zero value would be brought OR do I look for opportunities to change the project so design can bring value and deliver the outcomes I know we could for the users? Luckily I chose the latter.
How Rules Work
When customers browse or search for products on Kohls.com the Rules engine is called to know how and what to display on the results page.
Highlighted areas are some of the areas that are affected.
discovery
contextual inaquiry
We held a two day workshop early on, but sitting down directly with users was the best way to get insightful feedback.
Several themes pushed to the surface during the interviews leading to the conclusion; we had great opportunity to improve the user’s work experience.
They are so use to the tool they can’t imagine how it would work differently
They’ve created lots of “workarounds” to get their jobs done
audit
Complete audit of the tool was also done. Below is a small example of the templates from the old tool. This was an out-of-box implementation and users learned to ignore features that didn’t work and redundant elements.
top problems
During discovery, several top problems came to the surface and would become the goals we wanted to solve for, with time-on-task being top priority.
We didn't get a baseline for time-on-task due to the variations of how users went about doing their tasks, so we relied on discussions during the testing process to tease out how we were solving for a particular feature would reduce their task time or add to it.
Accomplishing tasks was time-consuming
Redundant features that weren’t used
No tracking of who added or updated rules
Lack of personalization work view
the solution
sketching & wireframing
The business/merchant teams were always resistant to change. Once they had learned something regardless of efficiency, implementing change came with a lot of hurdles.
The biggest obstacle the team needed to solve for was, how the rule templates were structured. The use of expand/collapse trees were a main way to select “nodes” and in the highlighted example below, selecting attribute values.
Beyond being a bad experience, the business areas weren’t filtered for the user, so every user saw every business area and all business areas were duplicated under each rule type.
We decoupled rule types from business area and applied the remainder of the required attributes and we saw that we could significantly design a simpler, more efficient rule template.
selling it to business
To move forward we needed business approval, to get this, I needed a compelling story where they could envision their work lives being easier.
The team was utilizing Material Design patterns and Kohl’s used Google Enterprise so I presented it to business as:
Adding a rule should be as easy as adding a Google calendar invite.
Business got very excited about what the team accomplished and started to let their minds expand on the potential of this new application; we got the approval to move forward.
Because we were using an established design system, wireframes were high fidelity; this helped speed sign-off with business.
The below example show what business wanted us originally to stay with (left) and what the team was able to accomplish by not fearing to push for change (right).
TIME-ON-TASK
Lack of experience design dug into “time on task” and even though business didn’t explicitly ask us to solve for this, it became the influencer when approaching a design challenge.
“How do we make this experience better, to allow the users to be more efficient, which in-tern saves them time doing the task?”
VISUAL CONTEXT
The design approach that really saved time was giving the users the visual context of how something would look on the website right in the template.
To create the above Visual Navigation section on a search/browse pages, the user would use a template similar to the one below.
IN AREA:
1. A node would be created (a node represents the individual elements).
2. Details for that node would be entered.
To reorder nodes, users had to right-click to get a menu, then click up or down.
To check how it would look the user would need to:
Create all the nodes => publish to staging => wait for it to process => view the page => repeat to make any changes.
One design approach I pushed to change was to reduce the use of modals and replace them with pop-overs where possible. Initially engineers pushed back on this because it was easier for them to code a modal, but once we showed them users preferred the popovers during UT and they saw the prototypes, they agreed with the change.
The solve for the above template would become very simple and save a tremendous time-on-task and used as a solve for multiple key rule types.
START & END DATE
Another small change, but a huge win for the team was implementing the Start and End date attribute.
Imagine you want to publish a new rule for Monday morning. Since rules were published once a day at 12am, you would need to work over the weekend. Imagine how many weekend hours were worked by users in the history of the old tool.
Now, with the redesigned templates, users can build their rules at any time and set the start date for publishing.
final mockups
The final templates were more consistent and efficient for the users to add and edit rules. Because we delivered in sprints, we had time to completely redesign KEM and add in additional features such as a personalized dashboard and a profile, which allowed users to customize their view.
conclusion
The team challenged themselves to solve big problems instead of delivering “just a face lift”. Because the team delivered in three week sprints it allowed for fast, incremental user testing.
We Identified areas of opportunity, such as automation and in 2020 a new product team was assigned and started to move forward with automating rules engine.
Reduction for time-on-task
Complete redesign of the application
In user satisfaction over the old tool