Visualizing e-commerce Design & Development Process Using Workflow Diagram

The Challenge

Workflow diagrams help large organizations deal with complex workflows in their day-to-day operations. Information travels between people, teams and systems and it can be a real challenge to have a clear overview of how things are done. What was going in the previous stage? What happens next in the design and development cycle?  This usually creates gaps in communication, which in turn extends the time needed to complete the cycle and nobody likes that.

Pottery wheel
Photo by Jared Sluyter on Unsplash

That is where data visualization steps in to provide new, meaningful insight and offer a lateral (or aerial?) view of the situation. This example provides an overview of the process of designing (or re-designing) and developing new functionality for the online store and mobile app.

My Role

As part of the UX design team at a Fortune 500 online retail company, I was tasked with visualizing the design and development cycles in order to improve efficiency, make the communication between teams easier and explore new possibilities to improve the process gong forward. Workflow diagram would also be used for onboarding of new hires in a constantly growing team and communicating the more technical aspects to stakeholders and senior management.


Following an agile approach to design means working quickly and changing this around a lot in communication with members of other teams involved in the process. For me, it means starting the ideation by:

  • Defining questions that data visualization needs to answer
  • Quick informal interviews with company associates to find out how their role fits into the process
  • Research existing representations of the same or similar data visualization problem
  • doing quick sketches using pen and paper

These micro-stages are often intertwined, creating the pieces of the puzzle, as well as putting them together in multiple combinations. The whole process is cyclical and repetitive, which was the first clue in visualizing it. I chose hex-grid for creating the template, using Incompetech, a free design resource I highly recommend (which also happens to have a rather interesting name). Setting up the grid for any kind of design challenge is key, as it establishes a solid foundation on top of which we can build delightful experiences. It also significantly speeds up sketching and ultimately, makes finding the right visual representation easier.

Initial interviews with associates were essentially just structured and documented office chats. Conversations revolved around the role en employee has and departments she or he works with the most. Step by step, patterns emerged and I had my first building blocks, together with a lot of sketches.

e-commerce workflow diagram work in progress
One of the many sheets used to try out possible solutions (and pens)

The Outcome

Following rounds of iterations delivered even more insight and some very interesting ideas from associates. This helped transform the sketch into a final, informative workflow diagram that clearly shows the stages of design and development and serves as an additional learning resource for the employees.

Leave a Reply