Overview

The goal of Order Entry was to tie together all the complexity Postmedia's digital marketing services order process in a simple, clear series of screens and notifications, allowing Sales to order services for SMB clients like SEO, local search, display ads, and social ads.

The Challenge

Create a more cohesive order flow that connects clients, sales, strategy and fulfillment users as a digital marketing order progresses. Build a platform that can grow with product additions to meet the business goals of decreasing customer churn and increasing digital products per order.

Current state before the work started

There were a series of form and email tools already, but they were a mess and led to confusion and lost business. Here's the key take aways:

  • Slow overall entry time. Just to order two products, Sales and Media Strategy took approximately one hour.
  • Hard to follow emails and notifications after the initial order entry.

Analysis

01 Mapping existing flows

We gathered and mapped existing workflows from interviews, decks and Word docs. To map inputs, outputs and feedback we took a systems approach. Through working with users, the user journey became clearer to expose pain-points and communicate to stakeholders.

order map

We then worked to build out a generalized service blueprint that took a holistic-view to place “ordering” in a larger context.

blueprint

This helped situate the problem space, and start to shape an MVP from a more expansive future experience vision. Which included:

  1. Assessment
  2. Proposal
  3. Commitment (from the Client)
  4. Order
  5. Fulfill
  6. Analysis

Using the overall service blueprint allowed for more focused conversations with Product as we looked to develop the scope of the MVP and trade-offs.

For the MVP, we would focus only on:

  1. Order
  2. Fulfill

02 User discovery interviews

We launched a series of research engagements on the current state to discover the pains (and delights) around the existing product for Sales, Strategy, Fulfillment and Operations. We found that:

  • Users left multiple forms open in the browser at one time.
  • Users would fill in fake information, and then directly email other members in team to gather updates.
  • Essential information for one user group wasn’t seen as important to others.
  • Anything remotely complex in-terms of ordering required multiple calls and emails.
  • We heard the phrase “But, my situation is unique,” enough to start to piece together how the situations were alike more than not.

It became apparent that in order to solve for the contextual problems, the product would have to let go of linearity as a principle at certain key phases. This meant collaborating around how might we allow for automatic saving and status identification to allow for natural chaos to occur in the sales flows.

03 Identify design principles

As we finished the discovery phase, working with product and engineering stakeholders, we solidified the findings into design principles in order to help build the experience scope.

Seamless Understanding Responsive
Seamless means striving to account for integrating and enhancing current processes. Be useful without being noisy about it. Be intentional when connecting complex pieces together. Understanding means that the product aims to have users understand the complex. Our experiences are built around understanding our users are busy and can’t waste time. Responsive means that the product supports the user and helps them. When responsive the product is engaged with the success and day-to-day experiences of our users.
Seamless feels like: effortless workflows, a sense of well-thought out process, highly usable. Understanding feels like: clear message, clear path, focus on what matters. Responsive feels like: prompt feedback, less waiting, taking care of the details.

Experience building

01 Realistic scope

Though we had mapped a larger flow stemming from discovery, for the MVP we focused on ordering and fulfilling use-cases.

sticky story map

Through collaborative sessions with design, product and engineering partners, the phases were broken down into key experiences:

  • Orders View - Users could review all orders, their orders and order status at a high-level.
  • Create Order - How might a user start to create their order?
  • Add Products - How might a user add products, and multiple products in one order?
  • Upload Supporting Documents - The signed contract, creatives and client logos
  • Save Order - How might the user/system save orders?
  • Order Status - How might the system automatically display the status of the order?
  • Review Order - How might users review the order at different stages and for different reasons?
  • Submit Order - How might submitting an order be simple and consolidate multiple background processes?
  • User Profile - How might this product connect with existing profile data for users and clients?

02 Continuous feedback loops

As the design team worked through the core epics, prototypes were created and tested to complete the feedback loop.

concept testing

Things the team learned from the sessions:

  1. Our initial attempts at auto-save interactions and states missed constantly Usability Error!
  2. Users were not used to switching back and forth between order details and product details Managing new behaviour!
  3. Keeping an on-going receipt that grew with the order was effective Validation that an expensive feature would pay off!

We had multiple rounds with user groups to help us hone in on these three high-value areas. We examined the sessions solution quality via usability heuristics. stakeholders assisting in observing research participants helped further to assess design quality.

03 Collaborate with development through shared documents

With the senior product designer, we grew a component pattern library of maps, user insights and component specs as the project moved closer to release.

rio patterns

Because the app was built on React, it was easier to collaborate with engineers to grow the component pattern library into a functioning design system. We can now quickly prototype and iterate around problems and develop solutions quickly.

The result

An ordering platform to scale multiple programs, including better order status and discoverability. The product and design team was able to streamline the Sales order process that co-existed with tools like Outlook.

rio flow

Optimizing on time-saving features like autosave, we formalized how a team actions an order and makes their actions visible through a history feed for tracking, and we worked to create general, holistic experiences so that new marketing products could be added as the strategy scaled-up.

  • ⏲ Reducing the order entry process from 1 hour down to 20 minutes and saving users about 70% time. This progress continues to influence other KPIs in the value-chain.
  • 🦉 The creation and adoption of the Minerva pattern library, allowing for quicker prototyping and collaboration with development team members.

Team details

Roles Team members
Product Design: Matt Neill
Development: Ben Lorantfy
Product Management: Steve Moore
Research: Wendy Gordon, Nicole Hu