Manage Scheduled Items
Subscription management interface for major retailer e-commerce sites.
The MSI is Replenium's core platform. It's a robust application that allows users to set up replenishments from the main product detail page and their cart, then manage those replenishments on an item level. It allows for multiple wallets and delivery addresses, give the user the ability to change the items' quantity and frequency, and the ability to pull items forward or delay their delivery.
Competitive Analysis
In the beginning, there weren't a whole lot of companies doing what we were. Order Groove was our biggest competitor. Amazon was definitely a factor, but they weren't going after the same market as Replenium. ReCharge and ReCurly come on the market a little later.
We were in indirect competition with companies like Chewy, Grove, and the subscription boxes such as Birchbox. But they are one type of item, like pet food, or cleaning supplies. No one was setting out to try to automate grocery shopping.
The Customer Journey
After looking at our competition, I sat down with our CTO/product owner and discussed his vision for the MSI. He asked that I base it on a prototype application they were using for Jacked Pack, a subscription box we were using to test out our backend capabilities in a production environment.
One of the things I focused on during our planning sessions was the customer journey. What were the main things our competitors (including Amazon!) did NOT do? Why? What was some of the feedback they'd gotten from Jacked Pack users? What did we, as consumers ourselves, want to see in a replenishment management interface?
We came up with the journey below, which formed the basis for MSI 1.0.
UI Design
Once we had the basic questions answered, we started laying out the different components.
Initially we decided on BootStrap as our CSS framework. Our lead developer was very comfortable in it. My CTO requested I iterate on the visual design they were using for Jacked Pack. It was a mobile first design, mainly used for the web.
One of the big things we focused on was testing our functionality. We had almost no data to work from, aside form a few user interviews we were able to conduct. A lot of our UX was a clunky, even confusing at times. However, our partners liked it and decided to go live with it in June 2019.
All the issues aside, one of the things I am really proud of is how well the themes blend into the partner site. Just about everyone who used it didn't realize it was 3rd party widget living within the site. BootStrap itself was a huge issue, but the theming (which you can read more about in the Effortless Theming case study) worked flawlessly.
Visual Design
The visual design was... bad. Like I'm sorry you have to look at it bad. The experience was clunky, as well. It needed a complete overhaul.
BootStrap was terrible
Using BootStrap, and really any library, was a disaster. When we integrated the app into our first client, the entire CSS structure broke. Additionally, it severely restricted our ability to be fully custom, as layout changes were extremely difficult to do without changing the entire HTML structure.
Theming worked great
The theming worked perfectly! CSS custom properties allowed us to use a single code base. We were able to match our clients colors, fonts, and general look and feel. You can read more about how it works in the Effortless Theming case study.
MSI 1.0 was in production for about a year. In that time, we worked on refining and iterating the design, moving us to MSI 2.0. MSI 2.0 was a complete redesign, from design to functional code. We took all of the lessons learned from MSI 1.0, combined them with the data we collected, and worked with the designers of our next partner to create a UI that was the complete opposite of its predecessor.
2.0 is currently being used for two large partners, Albertsons (Safeway) and Woodmans grocery stores.
One of my favorite parts of MSI 2.0 is the flexibility. We designed 2.0 to give partners the choice of an easily customizable UI or using what we have right out of the box. I feel like we completely succeeded at that, as shown by the UI examples below.
Visual (Re)Design
After a long study of the issues we had with the first version of the MSI, we made some big changes when building this one.
Visually, we went for a much more minimal, clean look. Lots of whitespace, thinner borders, flatter design. Buttons were small and clean. I worked with the Woodmans designer to make sure all of the UI elements were smoother and more elegant.
Major UX Changes
We made two big UX changes in 2.0. The first was changing the way a user set up a replenishment. In 1.0, there were radio buttons combined with dropdowns, combined with CTAs. It was confusing even for us at times! We simplified the experience to a checkbox and a dropdown for the frequency, using the partner's quantity stepper for how many items the user wanted.
The second change was moving the ability to cancel a replenishment to the main page. In the previous iteration, a user had to go into the Manage screen to cancel a replenishment. Now the button has been moved into the Items List, making it a much easier process.
Big UI Change
The biggest UI change in 2.0 was the underlying HTML and CSS structure. One of the lessons learned from the from 1.0 was how awful BootStrap was. It broke in all sorts of terrible ways when embedded in a partner site.
2.0 is built on CSS Grid and uses BEM namespacing to encapsulate the styling. We've also implemented shadow DOM to further separate our widgets from our partner, but still maintain functionality. This was one of the best decisions we made, because when we add in the CSS custom properties, the UI is practically bulletproof. We've had very few issues with it once embedded, and those are easily addressed with adjusting or adding custom properties.
Always iterating!
As I learn and gather more data, and am able to talk to more users, we're always improving! I recently led the redesign of the MSI to incorporate user feedback and make some UX improvements. We've broken out functions that were embedded in other screens, as well as combined some screens that used to be separate. Feedback has been excellent so far. I'm looking forward to getting it into production!