← Home

- Online stationery experience

Tearing it up and starting over

My role:

  1. Workshop facilitation
  2. Usability testing
  3. Requirements definition
  4. Wireframing
  5. Information architecture
  6. UX writing

The team:

  1. Me (UX and Content)
  2. Abe (UX Analyst)
  3. Matt (Front End Development)
  4. Marie (Producer)
  5. Sam (Managing Director)

This project was completed under strict NDA. Screenshots, images and identifying information have been intentionally omitted. If you'd like to know more about my work on this project, please email me.

The problem

A preference for speed-to-market over careful and customer-led design resulted in a bloated, buggy and baffling online stationery customisation experience for our client. Having identified this problem against a growing shift in customer buying behaviour, they rightly decided to start again from scratch before losing out to their competitors.

The plan

To fix the issues not just in the online experience, but also those found in their supply chain, back-of-house processes and more, the client embarked on a years-long project to rebuild the experience from the ground up.

We were called in thanks to our reputation in user experience and interaction design, and a close, multi-year history working with the client. We also worked alongside a large team from a digital consulting firm, who were engaged to plan the broader CX and technical implementation pieces.

We broke the project down into multiple stages to make sure no stone was left unturned, and so we could explore and validate a wider range of potential solutions with users before rushing into development.

1.0

Discover

Problems to be solved

2.0

Define

Appropriate solutions

3.0

Test

Ideas with users

4.0

Deliver

A working product

Discover

Our discovery process was all about understanding as much as we could — about the business, its operations, its offering, its audiences and their current experience both on and offline.

Stakeholder workshops

I helped to facilitate 6 two-hour workshops with a range of business units to learn more about the clients' products, suppliers, fulfilment processes, marketing strategies and more. This thorough exploration, as well as extensive collaborative ideation activities helped to facilitate buy-in from the large range of stakeholders, establish ourselves as an extension of their business, and explore new ideas for the future solution.

Usability testing

I also conducted usability testing of the current website experience with real customers to observe and gather first-hand evidence of the pains, frustrations and roadblocks they experienced when attempting to order simple products.

Ethnographic research

After learning that in-store stationery services significantly out-performed online, I decided to explore this further by doing some ethnographic fieldwork. I spent a few days in-store, watching and speaking to customers and sales team staff. This resulted in a treasure trove of useful information I could take back to the team and the wider business.

Product audit and heuristic analysis

Our UX Analyst Abe performed an incredibly thorough audit of every single product available, documenting their configuration options, user journeys and usability problems. This gave our team an intricate understanding of every single option our solution needed to consider, as well as the problems that existed within the current interface.

Insights from Discovery

  • The client's processes for taking and fulfilling orders was often very manual, meaning there was a significant amount of work to be done in finding the right platforms and processes to improve their back-of-house operations. The decisions made in some of these areas would go on to effect our front-end solution.
  • Customers overwhelmingly chose in-store stationery services instead of doing it themselves online because they lacked confidence and wanted someone to do it for them.
  • Buggy, unintuitive and inconsistent UI patterns meant users were constantly learning to use the platform, and never comfortable with how to operate it.
  • Both the awareness of the online platform's existence, and its discoverability on the website, were drastically low.
  • Poorly explained, print-specific terminology ('DPI', 'bleeding', 'trim', etc) created roadblocks that further reinforced a feeling of being an 'outsider' among users.
  • The system gave no clear visual indication of what a user's end product would actually look like. This meant even the small amount of people who 'made it' to the end of their product's configuration often hesitated or exited at the last step.
  • Internal digital capabilities on the client's side introduced constraints in design and development of website features heading into the next stage of the project.
  • The 'halo effect' was in full...effect? We observed that there was a direct correlation between the quality of the online experience and the perceived quality of the end product.
  • There were tremendous difficulties in discovering and navigating toward the online stationery tools on the website. And once there, navigating within that section was still painful.
We found there was a direct correlation between the quality of the online experience and the perceived quality of the end product.

Define

Following a solid two months of workshops, interviews, field study, testing and more, we turned our attention to defining what an ideal-state online stationery experience would look and feel like.

Information architecture

To solve the range of larger issues around the initial discoverability and navigability of stationery tools, I re-built the site’s information architecture and site-map from the ground up. This was later validated by three rounds of tree testing, followed by iterative changes, to ensure we'd landed on a suitable approach for users.

Our new IA/sitemap was implemented immediately and saw a significant boost in traffic to pages.

User stories

We worked with the partnering consulting firm to record hundreds of comprehensive user stories, documenting the ideal experience in granular detail.

Wireframing

As a team, we explored a range of interface possibilities to address the design challenges we'd uncovered, resulting in a huge set of annotated wireframes.

Test

Before rushing into a year of development to build the new platform, we wanted to ensure that the solution we'd put forward was air-tight and validated by real users. To achieve this, we worked through a 10-week rapid prototyping phase, where we would build and iteratively improve a real working prototype to test the thinking and design work we’d done to date.

Working in a small cross-functional team of 4 people, we ran 5 two-week sprints using the Scrum framework. During sprints, we would plan, strategise, design, develop and test working features based on our designs from the previous stage of the project.

Working rapidly in a small team like this was incredibly dynamic. Every sprint I was running sprint ceremonies (Scrum), wireframing, designing, writing UI copy, facilitating user testing activities, and reporting back to the team and the business on the results and their impact to our ongoing, iterative solution.

The result

By the end of our ten-week prototyping phase - we had a complete working (and user-validated) mid-fidelity prototype for two of the key product journeys, all the way from start to cart.

These two complete journeys were representative of the most complicated of products, leaving our client with everything they needed for success.

(Our engagement on this project ended at this point. Development of the solution is currently underway. We can't wait to see it come to life)

What did I learn?

This project was one of the best professional experiences I've had. I took so much away from this project that I've applied to my work.

I learned the value of (and got so much better at) advocating for a Human Centered Design approach. Being a large organisation with a lot of legacy systems and ways of working, it was difficult at first. But once we began to take them on that journey, our team became true partners to their business, and the user ended up with a better result. Win win if you ask me!

I became a much more active and attentive listener throughout the course of workshop and usability testing activities. The sheer volume of information you can unearth by listening intently, probing intelligently, and letting the other party "do the work for you" was a revelation to me at the time. This has now become a staple tool in my kit.

I gained an incredible amount of confidence. After steering senior leadership at one of Australia's largest companies through an expensive process they'd never seen the benefit in before, I walked away knowing I could do this anywhere.

I gained a greater understanding of the business drivers and concerns on "the other (client) side of the table", opening my eyes up to how large businesses operate, and giving me more empathy for them.

What I'd change

There are a couple of things I'd love to go back and change, given the opportunity.

I'd change the fidelity of the prototype. While we were all incredibly pleased and confident with the results we'd achieved — we could have explored a far greater number of possibilities and made more drastic iterative changes had we been working faster at a lower fidelity.

I'd also go back to create a closer working relationship with the consulting firm's CX team. While we certainly weren't disconnected and worked together very well on a number of exciting and complex pieces, there was definitely an opportunity to both plan and reflect on our respective activities more collaboratively.

Explore my other work:

Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation // Course page optimisation //

User experience design and content

Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool // Legal triage tool //

User experience design and content

App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website // App website //

User experience design and content

Contact

If you need a digital problem solved, if you need to know more about your users, if you need a fresh new design for your website, if you need a small site built quickly, if you need content that achieves your goals, or if you need a dog-sitter for the weekend, then:

send me an email

Clarity trumps consistency. - Steve Krug :) Good design, when done well, should be invisible. - Jared Spool :) No matter how cool your interface, it would be better if there were less of it. - Alan Cooper :) To design an easy-to-use interface, pay attention to what users do, not what they say. - Jakob Nielsen :) Design is about 3 dimensions & the 5 senses. - Danielle Sacks :) If there is a 'trick' to it, the UI is wrong. - Douglas Anderson :) One should aim not at being possible to understand, but at being impossible to misunderstand. - Quintilian :) Good UX is good business. - Andrew Kucheriavy :) What's dangerous is when designers use a language that people don't understand. - Paula Scher :) You can find more problems in half a day than you can fix in a month. - Steve Krug :) One accurate measurement is worth more than a thousand expert opinions. - Grace Hopper :) As far as the customer is concerned, the interface is the product. - Jeff Raskin :) Usability testing is the killing field of cherished notions. - David Orr :) Our websites are fluid, so our processes & workflows need to match - Brad Frost :) Your most unhappy customers are your greatest source of learning. - Bill Gates :) Supposing is good, but finding out is better. - Mark Twain :)