Baker Bookhouse Split Shipment Feature
An Introduction of Baker Bookhouse
In 1925, fourteen-year-old Herman Baker, with his family, emigrated from the Netherlands to America, traveling by boat to Ellis Island and then by train to Grand Rapids, Michigan. Shortly after arrival, he began working part time in the bookstore owned by his uncle, Louis Kregel. Here, young Baker developed a love for religious classics, cultivated a knowledge of theology that would rival that of most ministers, and began to dream of beginning a book business of his own.
He went on to become a publisher and has published many books that are still in print and sells steadily today. In time, Baker would expand its publishing division to include other names like Revell, Brazos Press, Chosen, Bethany House, and most recently, the God's Word translation of the Bible. After 70 years, the retail division continues to thrive with a full selection of new books, music, gifts, and DVDs, and over 100,000 used and remainder books.
Baker Bookstore is a special one here in Grand Rapids. With its multi-use space, it's easy to find yourself sipping a delicious mocha in the cafe, admiring the imaginative and playful children's section, and finding community in the book signings and meetups that occur there. To top it off, management and staff is so friendly and welcoming from the moment you enter the store. They hire those who are most knowledgeable about the titles they sell and can make a great recommendation to whatever inquiry is thrown their way. It's easy to see the traditions and vision of Herman Baker are as alive now as they were when he started the bookstore in 1939.
1. The Problem
While Baker Bookhouse has a physical location in Greater Grand Rapids, they also have an e-commerce presence online. In fact, a former team of Elevator Up was responsible for bringing the first iteration of their online storefront to the web. As their online presence grew, as expected, their needs expanded. One of those needs was to allow for split shipments of online orders.
For those who are not aware, a split shipment is a delivery of product that is broken into two or more shipments. In Baker Bookhouse's instance, split shipments only applied to one very specific business case: pre-order items.
For those items that were out of stock, they were able to get that item into their store within a day or two from Baker Publishing, negating the need to apply the split shipment to out of stock items.
In addition to actually shipping the product, we also uncovered the communication of pre-order items throughout the discovery, cart, order, and shipment phases were not as clear as it could have been. In order to decrease the number of calls coming in from customers for clarification on shipment status, we wanted to be more proactive on the website and increase clarity around what it meant to order a pre-order item.
2. My Role
My role on this project was to work with our stakeholders to understand business needs and bring them to the team. Throughout the project, I brought our stakeholders together with the team and I for reviews and iteration on ideas. With my designer, we decided which exercises we would choose and work together through the competitive analysis and research phases to understand best practices. With my developer, we outlined development needs and wrote user stories together. We also tested this feature with the client and wrote unit tests before pushing it to production.
3. The Solution
We needed to bring clarity and definition around the idea of a pre-order item. This started by increasing communication around the meaning of this type of item throughout the customer's entire journey throughout the online shopping experience, including the discovery, cart, ordering, and shipment phases.
4. Our Approach
We began work on this feature by meeting with our stakeholders to understand the problem they were having from their perspective. They had explained that while the workflow for customers that ordered items that would come in a split shipment model didn't exist, they had created and were using this workflow out of necessity. This was causing confusion with customers and creating a lot of manual work in the administrative side to aid communication with customers.
As an example, when a customer placed an order that contained a pre-order item, the customer would receive the order acknowledgement and later a shipment receipt, which would show both the in-stock and the pre-order item. When the customer received the package and the pre-order item was not included, they would call the store asking about this item. As a bit of a stop gap solution, the online store manager would send emails to alert customers when the first part of their order would ship, communicating that the pre-order item would be shipped a day or two after it is received in the store. As you might imagine, this solution is not scalable nor is it efficient.
After the meeting and listening to these examples, we dug a little deeper and noticed there were a couple of gaps in the customer journey that didn't adequately explain what a pre-order item was and what the implications were for receiving this type of item. For example, while a release date was shown on the product page, it didn't stand out and sort of blended into the rest of the copy. Additionally, when this item was placed in the cart and throughout the checkout process, the release date was removed, making it easy for a customer to forget it was a pre-order item.
My designer and I decided to start our work using a competitive analysis. We looked at the split shipment process and best practices by walking through the customer journey of ordering a pre-order item from big brands like Target, Best Buy, Amazon, and a couple others. From this exercise, we learned these companies make various touchpoints to the customer over time to keep the customer informed about the status of their order. Below are a handful of key insights we gained by performing this work:
- The product's release date was called out and visible throughout the entire customer journey, including the product page, cart view, checkout flow, and finally the order acknowledgement and shipment emails.
- After the order is placed, an order acknowledgement is sent, calling out the estimated release date of the pre-ordered item and estimated shipment timeframe for the first order.
- Another correspondence is sent when the first part of the order is shipped. Information pertaining to subsequent shipments is included on the notice but there is a clear separation between the items that were shipped and the items that were not yet shipped.
- When the pre-ordered item is received in store, the next part of the order is ready to be shipped, and the customer receives the next correspondence. In this email, information pertaining to the subsequent order that is being shipped is located toward the top while the first part of the order, the part of the order that was already shipped, is included near the bottom.
- If there is another (in this case a third) part of an order that needs to be shipped at a later time, the information pertaining to the third part of the order would be found below the second shipment information. When the third part of the order is ready to be shipped, another notice would be sent and the shipment information for this third shipment would be located at the top, followed by the shipment information for the items already shipped in the first and second shipments, similar to the layout of the first subsequent shipment.
After connecting with our stakeholders to review these insights and ideas for next steps, we were able to confirm we were moving in the right direction. My designer began to sketch out specific pieces of the checkout process and wireframed the structure of information within each of these emails. These touchpoints were separated into the following pieces of work: order acknowledgement, first order shipped, and subsequent order shipped. After reviewing together and making some final tweaks, she moved straight into design. Because we already had styles available from the live site, it made sense to simply move into this phase and overlay design on top of the wires to present to the client.
We scheduled an in-person meeting with our main stakeholder and brought along printed designs. Having this meeting in person was extremely valuable because we were able to have a very in-depth conversation and discussion around the proposed workflow and procedure. During this time, we learned some new information around needs. We noted these changes directly on the pages and were able to refine the designs and make these tweaks more quickly.
As my designer worked through these final tweaks, my developer and I began to outline work for this feature together. The main pieces needed included adding "stand out styles" to call out pre-order items throughout the product, cart, checkout, and shipment processes, adding a workflow to the admin for administrators to complete pieces of orders, and creating and styling first and subsequent shipment emails.
While we were awaiting final approval for the pieces customers would see in the presentation view, we were able to get started on the back end needs of the feature. We started by creating a workflow in the admin that would allow an administrator to tell the system that a part of an order was ready to be shipped. By clicking a button, an admin could complete an order, charging the customer for the contents of the first shipment, and triggering an email to be sent to the customer that included those details.
Next, we worked through adding small styling enhancements to pre-order items. On product pages, pre-order styling was denoted as decorating both the release date and add to cart button as orange. Throughout other screens of the site, including the cart and checkout flow screens, we decorated only the release date text orange as a reminder that it was a pre-order item.
At this time, designs were officially approved, and we were able to complete the final portion of the project: the emails. Because we already had styles in place for current email communications, our back end developer was able to wear the hat of front end developer for the majority of the project. From time to time, if an issue was encountered, we were able to lean on the expertise of our front end developer when needed. After styling was completed, the emails were wired up to the system.
After working through final items from browser testing, we were ready to run end-to-end tests to make sure the feature was working as expected from start to finish. Once we ran a successful test internally, we asked our stakeholder to test as well. As she was testing, we wrote unit tests to ensure safe integration with the current code base. After tests passed and we got the thumbs up from our stakeholder, we scheduled this feature for release and pushed it to production, where it lives today.
5. Learnings
From working on this feature, I learned three key takeaways that I will implement on projects going forward.
- Tighten up the project timeline: Though we didn't have a specific timeline needed to complete this project, I do believe we could've been a bit more efficient and strategic around holding some of the other maintenance tasks we had in the product backlog to be able to focus on this work to get it to production more quickly.
- Bring in a developer earlier in the project: In retrospect, I think I could have brought my back-end developer into this project a little earlier to get started on the admin screens and the pre-order item styling earlier in the process. Those pieces didn't hinge on feedback we were awaiting, so we probably could have completed those quicker than they were.
- Know all the skills of all your developers: The front end developer we had initially earmarked time from to help with the receipt development and styling ended up being unavailable to help because she was needed on another project. Another teammate ended up stepping in to help work through the email development and did an amazing job working through this feature both quickly and efficiently.