Inside Envato

Part 1: Designing The Envato Design Framework

A distributed team with a common goal

Here at Envato, the Design team consists of Designers, Content Strategists and Researchers, all embedded in different product teams under the same Envato brand. As the company has grown, the Design Team has also expanded quickly, with new people regularly joining the team as new roles are created.

As a team, we aim to deliver a consistent experience across all of our products, while also providing space for each team to innovate. Over time, however, it’s become increasingly difficult for us to follow and keep track of each other’s work, and ultimately come together as a team.

We set out to tackle this challenge by designing a collaborative and unified approach that could be shared by the whole team. In this post, we focus on the method we used to arrive at the current Envato design framework rather than describing the framework itself.

Collaborative process mapping

To move towards a shared future, we started out by getting the whole team together to talk about how we work. We had an honest and transparent discussion about the pain points we faced in the various areas we worked in and the teams we worked in, as well as the things we wanted to change.

Design team workshop

Once we had a clear idea of each individual’s working style, we paired up to ideate around an ideal way that design work could be done at Envato. To help us visualise our thinking, we applied a standard process map format, based on commonly understood definitions and symbols.

Whiteboard

A typical process was mapped out on a whiteboard, with discussion at every step.

Whiteboard with process map

Some of our discussion points included:

  • What should happen in each phase?
  • What’s the sequence of the steps? (e.g. should the team kick-off come before or after establishing a problem or goal?)
  • How do we make sure we’re solving the right problem / implementing the right solution?

At the end of the session, we had visibility on how each of the different teams and individuals worked, as well as a high level idea of where we thought we wanted to be.

Gathering feedback and iterating

Over the next couple of months, different designers would pair up to expand on the high level process with more detail in each step. We used our daily feedback sessions to gather ideas and continue iterating on the concepts.

Design process on perspex

A turning point

A few months down the track, as the process map was really coming together, we found ourselves looking at what we’d come up with and feeling a sense of accomplishment. Then came our design offsite, a major checkpoint in our journey, where we reviewed the process and identified some major flaws with the map.

It turned out that we’d been too focused on mapping out the events that happen in a generic design process, viewed from a single perspective of applying it to a ‘typical’ project. One of our designers pointed out that the process felt too linear and didn’t reflect her day-to-day work.

The process we’d designed lacked the flexibility and validation checkpoints to represent some of our real world scenarios. For example, a smaller design task such as a creating a Marketing landing page wouldn’t require the same amount of resource or scrutiny as a large project or initiative.

Back to the drawing board

After taking on board what we had learnt from the offsite, we knew that we needed to move away from the process map. As a team, we collaborated further and agreed that instead of a linear flow, taking a circular approach would make a lot more sense.

Flow chart design process

Moving away from the flow chart

We also had another major discovery, which as around putting ‘Reflection’ at the heart of our process. The design team reflects and gathers feedback often – from each other, as well as the rest of the company. It felt right to have reflection at the centre point of our approach to solving problems.

Diagram sketch design process

Some ideas sketched out by the team

Diagram sketch design framework

Iterating towards the right solution

Design framework iteration

Just as we would tackle any other design problem, we took an iterative approach to designing the process, moving from low- to high-fidelity ways of visualising our process.

Fast forward to the present day

Design Framework

We are now happy that the representation of the process clearly explains how we work and by sharing it will encourage a consistent approach to projects and more cross-team collaboration, while also allowing for flexibility, nuances, and tight deadlines! We also decided at this point that the word process did not convey a sense of flexibility so decided that framework was a more accurate description of how we worked.

What started out as a design task to explain our way of working has now become a larger conversation that involves the whole company. The conversation has only just begun, and we’ve got a lot more work to do. Watch this space.

If you’d like to learn more about how the Envato design framework works, take a look at Part 2: Introducing the Envato Design Framework.

By Jess Ng


Envato

About the Author Envato

Envato is a creative ecosystem of sites and services, including Envato Market, Envato Studio, Elements, and Tuts+. Every month millions of people use our sites to get creative and learn new skills.