How an outdated platform led to the redesign of Staples' online document printing service
Since 2007, Staples decided to use a third-party platform to offer an online document printing called EFI. This tool allowed their customers to upload their files and customize them by adding multiple finishing options, paper types, and accessories.
However, the lack of EFI’s customization options and optimizations was affecting the overall performance of the document printing service. It was too complicated and technical for some users to customize their document and place an order. Still, EFI sales represented a 23% overall conversion to the company.
Throughout the years, Staples was struggling to improve this old platform due to its limitations and additional costs that it represented to the company to increase its sales and performance metrics.
By 2017, ten years had passed, and EFI was still running the same old and complicated experience that represented a high cost to Staples. Now it was the time to take action and reimagined how people could print their documents online.
Our Goal
The team had a clear idea of what was the next chapter for the online document printing service. This initiative focused on replacing the EFI tool and building a Staples owned platform that could represent a 24% conversion rate and a business value of $2M in savings. As part of the planning stage, the project was divided into three release phases, starting in 2017 and estimated to be completed by 2020.
Discovery
After defining our goal and objectives, it was time to become a document printing master and understand how this service operates. It was essential to know how all the products, accessories, and finishing options look, feel, and work together. By talking to store associates, business managers and merchants, I was able to understand how these products were categorized, and the ideal use cases for each of them. This information was crucial to map out the first content diagram and categorize the new product assortment of the new platform.
Competitive Analysis
After understanding the product assortment, it was time to know what the market competition was offering in terms of online printing services. At the same time, I was able to compile some inspiration, references, and ideas from other competitors, allowing me to compare which tools and products could be part of future releases. As a collaborative project, I make sure to involve key stakeholders, including people from management, leadership, marketing, graphics, front-end, and back-end, into different activities such as lightning demo workshops. From a design perspective, it was crucial to review different competitors' approaches, analyze the latest UX/UI trends, guidelines, and design principles before creating the first round of sketches and wireframes.
User Experience
From the beginning, as a team, we defined that this project was all about creating a user-centred design. The customers should be able to understand and interact with this colossal product assortment, even if they've never heard of a particular product type, finishing or technical material. I make sure to involve our potential customers to define how this platform will operate and how the content will be displayed and organized. One of the biggest challenges was to showcase all the products but at the same time, offer a simple and intuitive experience to the users.
Card Sorting
After requesting product samples, it was time to have some fun and play around with all the materials, paper types and accessories that the team received. As part of my UX duties, I questioned if people understood the categories that were created by the merchants and business teams at Staples. The short answer - no. By running a card sorting activity, our participants had some fun grouping the paper and naming their categories to keep this content organized more simply and clearly.
Affinity Diagram
Now it was my opportunity to find some patterns and figure out how people named their categories and how they grouped their paper samples. This activity was beneficial to define the final paper categories before the project phase one was released.
Information Architecture
Now that I knew every single product, including the different staple colours that you can purchase, it was time to put together the information architecture map. This document, in particular, allowed me to understand where each feature, material, accessory and finishing option will live after defining the customization sections that will be part of this tool.
User Flows
For all the new document printing services, I considered how it would impact the rest of the website and its content. I make sure to map out all the user flows and highlight how people could navigate through a particular use case to complete a specific task.
Sketching
Let's get creative. During this activity, I make sure to run some brainstorming sessions with all the product designers to get new ideas and discuss how each design and its components could improve the overall user experience on each stage of the purchase flow.
Wireframes
When I had a clear vision of which elements could work for each section of the flow, I combined them. I designed all screens simultaneously to capture the whole cross-platform experience and share it with the team stakeholders for further discussion. From LoFi to HiFi wireframes, I was able to communicate how the interface and the images should look like to offer a better user experience with inspirational content.
Usability Tests
To make sure that I covered all the aspects and questions that I had about a particular flow and design, I run multiple usability tests and create a test plan that compiles the users' profile, scenarios, tasks, and wrap-up questions to analyze the results later on.
Prototype Development
From each test plan, I had to consider different flows, functionalities and tasks that each participant will perform. That's why I make sure to build various prototypes, from LoFi sketch versions to HiFi iterations with a cleaner UI style.
Prototype Demos
While I was working on different iterations during each release phase, I noticed that the document configuration tool was getting too complex to test. That's why I decided to create multiple prototypes by using different tools such as InVision, Axure, Sketch Craft, and Adobe XD.
User Testing Sessions
I find people's feedback very valuable. That's why I make sure to test different solutions by running pilot tests, online live interviews, unmoderated tests, and validation tests for both desktop and mobile devices.
User Testing Insights
There are a lot of interesting comments and ideas that the participants shared during the online interviews. Once I concluded with the user tests, I shared my findings and recommendations with the rest of the teams before moving on to the next design stage.
UI Design
Another essential part of the project was building the UI web breakpoints for each section of the entire purchase flow. I designed desktop and mobile interfaces, including 1440, 1024, 768, and 320 breakpoints. There were a lot of nice details in this part of the design process. I designed the interfaces for the document printing landing pages, file uploader modal, and document printing configurator using the Sketch and Abstract software. This new process allowed me to commit all the design changes and share all the files with the rest of the product design team in a more convenient way.
Interface Architecture& Interactive States
For each phase release, I documented all the visual elements and interactive states to keep the information organized and accessible for the Front-End team. Each element included a short description to explain how it would work and how the object would look like on hover, pressed, selected, disabled, while loading, and default states. As a Product Designer, I know how important it is to keep a process simple; that's why I optimized all the objects and .svg icons to be inspected by the developers.
UX Copywriting
For the past couple of years, this role has become more popular and shared across the design industry. I always try to learn new skills and challenge myself. This project was ideal for collaborating with the Marketing team and together coming up with the best solution in terms of SEO content. By knowing the products and talking to potential customers, I was able to understand what people were looking for while printing an online document. This knowledge allowed me to define which type of content provided more value from a user experience perspective.
UX Interaction Specifications
After completing all the UI web breakpoints, I had to capture how each element would work interactively. At this point, I explained to the Front-End, and Back-End teams the dependencies and actions when a user clicks on a particular object.
Accessibility
I know very few people probably realize how important this design element is when they look at a site. Still, I like to appreciate the importance of working with an inclusive design approach. Besides verifying that the colour contrast, font sizes, and spacing offer a readable and clean layout, I also defined how the users will interact with the platform through the tab navigation or other assistive technology such as a browser or local OS screen readers.
Development
Great, so now we have a sharp and robust overall design. Now, it's time to review it and assist the Front-End and Back-End teams in implementing and releasing each section properly. As part of my responsibilities, I had open communication with the key stakeholders and teams if there's a bug, error, or update that requires our attention.
Going Live!
People went happy and super excited when the new document printing service finally went 100% live this year. The results have been positive and are above the original team estimates, reaching out an overall conversion rate between 27% to 30%, which means good-bye to EFI and welcome Staples Hercules to the document printing business. It's been great hearing positive comments about the work that took more than two years to complete, but when you work with such a fantastic team, friends, and lovely people, it's even nicer.
Check It Out
