6 steps on how to design rapidly (during these unprecedented times)

As I thought about how to share some highlights and lessons from my most recent work, I really wanted to avoid using words like COVID, or “these unprecedented times” but it’s the reality we’re all facing, so instead, I’m leaning in.

These have been ‘unprecedented times’ on a number of fronts for me — including my work to bring Staples School Tools to life. It’s now four weeks post-launch, most of which was spent “coordinating strategic improvements” and I now feel ready to shine a spotlight on it.

For Parents, Staples School Tools offers a way to quickly identify what school supplies they need for the educational success of their children, to save them time, money and to help their school through donations.

For Teachers, Staples School Tools is a way to quickly inform Parents what school supplies are critical to success, to standardize the education experience and get more from their relationship with Staples.

The most significant complexities come from how School Tools integrates and remains unique from the Staples.ca platform. It offers integrated sign in and products catalogue, and work with the existing cart and order process. The site lives outside of the traditional Staples.ca header and footer, adds “bundling” in cart, has a unique discount and donation program, introduces a new scheduled delivery order type, and offers program-specific products. All told, it is the largest single functional update to Staples.ca since its launch.

If you’re curious, check it out (staples.ca/schooltools). If you want to learn more about its creation process during these “unprecedented times”, read on.

Below you’ll find a high-level overview of my journey that started Feb 1st (with a target launch date of April 1st, read: an extremely aggressive timeline). The steps outlined below are relatively universal to the product development lifecycle, especially when timelines are tight.

Note that this is not the only way to design rapidly, anyone from the Lean UX world will likely have an opinion, but I’d suspect it’s quite difficult to be lean when you’re working with a big corporation — happy to discuss this and be proven wrong.

Step 0: Choose your tools, wisely

Before you tackle any complex project you must choose your tools. You likely have many in your toolbox, choose the ones you rely on the most and leverage them. For me that’s:

• Strategy / Decking
• Research, Interviews and synthesis
• Userflows
• Wireframes
• Prototypes
• Spreadsheets and lists

Step 1: Be an information sponge!

No matter the timeline, the first step is to develop the right context for your project by understanding the background, the competition, and most importantly, your audience. Boardroom meetings were had with store operators, internal folks who ran the former program, and the digital team who would inherit the new program. Surveys and interviews were done with teachers and parents. Explorative research was completed on the former system, the competitors, and the friends (Staples US existing product).

Step 2: Define your target users — their goals, motivations and frustrations

If this sounds familiar, that’s because it is and would be called a persona. It would typically be used to capture goals, motivations and pain points, it would critically help the designer develop empathy, and would help with corporate alignment. Rather than building formal Personas I developed 3 mindsets that would act as a lens to all of my future thinking. I tend to prefer this less formal approach: the UX designer’s version of method acting.

Step 3: Set your “North Star”

Next, turn your research into findings and use them to get further managerial alignment. Set your vision, define your strategy, and set your goal posts. In the case of School Tools we were going to build a “Teacher-based personal assistant for Parents”. Having a clear vision is important — particularly when timing is tight — it helps you focus on the right things, and justifies the things you don’t. For this exercise you’ll need powerpoint (or equivalent): write out your narrative, add your supporting research, keep slides low on text, and tell a compelling story. With your vision defined, you can move into design.

Step 4: Design your MVP (actually your MDP)

Firstly, I always prefer to design for the full vision, exploring all potential features (and I advise you to do the same). I may not fully explore all edge cases or work out the complexities, but I like having the full vision in front of me, then I can figure out what should launch first.

How to decide on your “MVP”?

Consider your HCD mindset (Viability, Feasibility and Desirability) and what MVP actually means, “Minimum Viable Product”. In other words, what minimal feature-set can we “get away” with, in order for the product to be viable for the business? I would suggest asking a different question, what features are most desired by your audience (and what supporting features do they need)? In other words, what do you need to build first to delivery the Most Desirable Product (MDP) for your audience? Figure that out, and you’ll know what you need for launch.

Once I’ve thought about my MDP, I get to designing. I’m a “pictures worth a thousand words” kinda person, so I like to start by creating a userflow. I use Omnigraffle for this for numerous reasons (I can discuss this separately if you have questions). I start by mapping out all the pages I would need. Parents would need a landing page to search from, they’d need a results page, and they’d need a teacher-created shopping list. What if they can’t find their class? What if they want more information about a product? Are all products equally important? What if they already have products on the list? Let the userflows… flow.

Once I knew what pages I needed, I started with some Crazy 8s to jump-start my creative juices and I opened Figma to start designing. Why Figma? I was leveraging the existing Staples Design System (SDS) which was Figma-based, and impressively comprehensive. I moved the mouse around, clicked on some things, watched a “How to Figma” video or two, looked at my Outlook Calendar to remind myself of the timing I was up against, and opened Sketch instead. While I know now that Figma would have likely been the right choice, I simply did not have time to waste fumbling around in a new platform, the clock was ticking and April 1st was not that far away — also I didn’t need the collaboration aspect of Figma as I’d be the only one working on the wires, and I liked Sketch! In short, use the tools you are most comfortable with, unless you have time to explore the new / better option.

Using assets from the SDS I quickly had a seemingly polished multi-page product — but I had yet to seek internal approval and buy-in on direction. I quickly installed a Sketch Plugin called “Rough”, it would take my nicely polished designs and make a version that looked drawn, it was perfect for demonstrating a few things:

• Leveraging the SDS was the fastest way to build a product that “felt” like Staples
• I could design in high fidelity right from the start, and just “Rough” my designs for feedback and approvals, I know some of you may think this would take more time, but I had all the building blocks, so I used them.

The key to this approach is to be open to any and all feedback and direction — no matter how polished your designs may appear. This process is not about “you” and how “perfect” or “right” you can design out of the gate. I deliberately “Rough” my designs to show that they are malleable. After all, the “U” in “UX” doesn’t stand for “You”, it’s about the “User” — yes they may sound similar.

Before I knew it, I’d stopped using “Rough” and I just had a polished set of wireframes and a few informal user tests. I didn’t have a functional spec. I didn’t have user stories. I had a vision, I had three mindsets.

For the record, I did actually start by creating some “traditional” UX assets like formal Personas, and an experience map but quickly abandoned them. I was in a fortunate scenario where I just needed to get to launch in whatever way possible, nobody asked me for any particular deliverables, so I only stuck to those that helped me get there and those that the other parties required. You may need, or may be asked to pull other tools from your toolbox, this depends on the organization and team you’re working with. If you need help figuring out which tools are right for you, I’m happy to help.

Step 5: Take a nice break — thanks to COVID

In the spirit of “leaning in” to the societal impact of COVID and in offering full visibility, things were on schedule for launch when all non-essential projects at Staples were put on hold, School Tools was one of them; ok this isn’t really a “Step” but it happened, and speed bumps may happen to you. I had no visibility into how this impacted other projects, but to me, it meant that my April 1st date which was 3 weeks away, was no longer, and that School Tools may never see the light of day — this happens, surprisingly often in a corporate setting, priorities change. All development stopped (we’d started building the foundation work for the parent experience). I switched focus to documenting functional specs and building a prioritized and phase-based product roadmap. I hoped that ‘one day’ the project might come back to life, and that when it did my vision could be realized in the way I’d planned.

I was sad, knowing that I might never get to see the impact of my work on this project come to life. This, above all, is my goal as a designer.

Step 5 (for real): Build your prioritized roadmap

Days passed. Functionality was documented. Priorities were set. I typically prioritize based on a three-score system:

1. How feasible and easy is the feature to build (1 = Very feasible and easy, 3 = Unimaginably difficult!)
2. What is the viability and usefulness of the feature to the business (1 = Critical to the business!, 3 = Basically useless to the business)
3. How desirable would this feature be to the target audience (1 = Absolutely essential!, 3 = Entirely useless)

The lower the score, the higher the priority. Is this subjective? Yes. Does it do the job? I believe so. These prioritization categories may look familiar because they are the same three pillars referenced earlier that make up Human Centered Design.

With a prioritized roadmap in hand and uncertainty around the future of the school year, Staples decided to reignite focus on School Tools. Now more than ever Teacher would need a tool that connected them with their students, ensuring everyone had the supplies needed for success. We re-engaged the development partners and re-started the build process. That said, the school year was impacted and parents’ heads were elsewhere, rightfully so.

We took the opportunity to assess our priorities and timeline and I proposed building a better and more robust product out of the gate vs our original plan. There were a couple other house-of-cards type decisions that encouraged a later launch date, but parents and teachers would ultimately benefit.

Step 6: Create lists of lists and just GSD

Once you have the full vision of your product on paper, and a prioritized roadmap, you just have to list everything you need, list all of the steps needed to do the things you need, and track progress as you tick them off your list. There are many tools that you can use for this that include Basecamp, Trello, ActiveCollab, any collaborative spreadsheet, or even a good To Do app (I’m liking Zenkit these days). Here are some of the elements I needed to accomplish for this project:

• Design all edge cases and every function, but stick to those only needed for launch, then design for your other viewports — Mobile in my case.
• Test, test, test, test, test. Refine. Repeat.
• Gather, update, and create the language for every page, every view port, every edge and error case, and the help centre — then edit it, then get approval from legal, then translate it.
• Design for additional languages — French is on average 20% longer than English, so you’ll likely need to make design considerations and tweaks.
• Ensure the Information Models for products on Staples were updated for the functionality — coordination was needed to add meta data to products on Staples for various reasons.
• Given the robust Staples catalogue, ensure Teachers can easily find the best products for them, and suppress the others — customizations to search.
• Ensure that standard Staples cart, checkout order process can accommodate the goal of the program, to save time and money for Parents — this manifested in numerous ways, like showing lists as bundles in cart, auto applying discounts to eligible products, boxing School Tools orders separately, introducing a new type of scheduled delivery.
• Support the operations team on the transition to the new program, through comms and training.
• Ensure analytics are properly planned for and set up.
• Update all email touchpoints to make sure the users experience is cohesive.
• Translate everything into “tech speak” (Jira, and User Stories — in this case, it meant working very closely with the dev partner)
• As functionality came to life, test it, and validate it was built to the vision.
• Prioritize and re-prioritize features, bugs and enhancements as needed — and be prepared to make compromises.
• Track everything that’s done, take detailed notes — this will likely come in handy.

I think it goes without saying, but this approach can only work if you’re good at juggling and if you have strong leadership, partners and supporting teams; I obviously was able to leverage the full team at Staples to make this happen — over 50 contributing individuals. YMMV.

Staples School Tools formally launched June 23rd in just under 5 months from drawing board to launch — a corporate project like this could easily take twice that or more. It was an amazing whirlwind journey and I loved every minute of it! Is this the only way to design rapidly? Certainly not, but it works for me.

If anything you’ve read today might work for you, use it. If you make anything rapidly as a result of this or you have any tips for next time, share it. And if you have any questions about any of this, ask it (here) — or connect with me.

Otherwise, if you’ve read this far and you’re curious about School Tools, check it (out).