Luc and the teams at Azendoo and Az Foundry use Atomic to check out whether designs work even whilst they’re still in their ideation phase, to test out designs when user input could produce a range of different scenarios, and most importantly of all, to spot any pesky errors before designs are developed and released!
Plus, Luc is on a crusade to promote diversity in digital and design industries. He’s also been spreading the love for Atomic in sunny Bordeaux.
We had a brief chat with Luc to find out a bit more about the projects they’ve been working on at Azendoo and their design workflow.
Tell us a bit about Azendoo and Az Foundry. What role does product design and prototyping have in the future of Azendoo as a product?
Azendoo is a collaborative team-working tool, based in Bordeaux. There are 18 of us: 4 designers, 8 developers and 6 product managers. Az Foundry is the name for our design subsidiary - a small studio with a focus on user-experience design and visual identity.
As soon as we have a new feature, we’ll create a prototype to test the workflow and see whether design works well on desktop and mobile.
Prototyping has become an integral step of our process: we run prototypes on the interface designs as we go along.
Today, an increasing number of prototyping tools enable you to use real content in your prototypes. For example, if a user posts a really long message on the Activity feed, or a super-long Workspace name, we can check that it won’t throw off the design. Prototyping helps us effectively integrate this user content entered on Workspaces, within Subjects etc., so that we can continue to offer a sleek and efficient product.
What’s been the value in using prototyping tools in your workflow, to quickly explore ideas or create realistic prototypes?
For us, prototyping is key because we don’t have to wait for release to test ourselves and with users: we can quickly check whether a feature works whilst it’s still in ideation or design phase.
We recently re-designed Azendoo’s User Onboarding. We prototyped the designs at all stages, to confirm that they worked before sending them to the dev team. In our app, the user experience is very different when creating a new Workspace, compared to joining an existing one. In the first scenario, there are many more stages to the process: you have to enter the Workspace name; write the first Message; create the first Task etc. You don’t see these stages if you simply join an existing Workspace.
We prototyped and tested the two different workflows, allowing us to consider the questions users might ask themselves in each scenario. Prototyping enables us to eliminate errors in advance, which ultimately saves us time (and money). It also results in a better product for our users, who rely on Azendoo for their effective in-team collaboration.
What’s something you’ve been working on recently at Az Foundry? What role did prototyping play in the project?
Az Foundry has been working with Quorum, a data-driven app for grassroots movements, political campaigns and NGOs. We designed screens for their data-input form, and tested the animations and workflows in Atomic. It literally took us a few minutes to draw up the designs and prototype them.
Straight away, we realised that a ‘back’ button was missing from the final screen: a minor detail, but one that would have significantly impacted user interaction. Without testing the screens, we wouldn’t have noticed that this button was missing until after the release.
What are some of the challenges you and your team faced in design during the project? How did you overcome them?
Spotting errors in static interfaces used to be a big challenge. If we didn’t spot these errors before sending designs to our developers, they would spend time developing designs that didn’t work. By prototyping our designs, we can eliminate errors even before development, whereas before they would have been revealed after release.
Azendoo’s User Onboarding is an example of this: with a huge number of screens to work through we spent weeks on the project, and iterated a lot. Being able to put all the screens in one place, validate workflows and test animations, was a great challenge. With Atomic we were able to do this. We have been able to maximise our productivity – which is what our work at Azendoo is all about!
You’re quite active in your local design community – do you think it’s important to give back to the design community?
With colleagues, I organise Design and Beer talks once a month and invite people from creative industries to share their knowledge over a beer. Anyone is welcome: digital designers and developers, alongside people from non-digital industries such as illustrators.
With help from Azendoo and Az Foundry, I also organised an Atomic event in Bordeaux. We get to use lots of great tools in our work. We’re aware that people out there would like to know about these tools, but don’t know where to find out about them. With events like this one, I hope to raise awareness about these valuable tools.
The biggest challenge facing digital industries today is how to bring diversity into the mix. We often see the same profiles again and again: male, white, mid-twenties. I hope that encouraging diversity in my local design community is a good place to start changing that.
At Azendoo and Az Foundry, we’ve shared our design elements via Atomic, so anyone who is designing an Android application has our graphic design material at their disposal. They can use the interface guidelines to launch their project – without having to reinvent the wheel!
So you’re right that giving back to the design community is important for us. And we benefit from what others share too: a powerful example of this is Facebook’s Diverse Device Hands kit.
How important is collaboration within your team and what tools do you use to collaborate with one another?
Azendoo is a collaborative team-working tool, so teamwork is a very high priority for us! We have a ‘Design’ area within Azendoo, where we share designs, often in draft phase, and give each other feedback.
Prototyping and design are often seen as stopping with the designers, but that’s not really true.
We share the prototyping process with our dev team, for feedback on what is possible in development. Along with a few other tools, we use Atomic to design and prototype, communicate, give feedback and share resources. Azendoo is our main hub.
Do you have any advice for other design teams about preparing or running projects that involve prototyping?
It’s really important to remember that designs don’t need to be pixel perfect before they are prototyped. Femke made this point in her talk at One Day Out. Quickly testing transitions and functionality at an early stage will actually guide you as you develop a design further.
For example, when we designed the landing page for the Azendoo Calendar I started by creating a prototype in Atomic for how I imagined the animation. I quickly saw that the prototype worked and could proceed with a more complex design.
What questions do you ask yourself when you prototype a design? What are your thoughts on the role of prototyping in the design process?
‘Is it worth creating the prototype?’ I don’t mean ‘Is the design good?’ – that question is why you create prototypes. But some designs don’t actually need to be prototyped at all.
For example if you design a ‘like’ button, you know what will happen when you click on it. More complex elements can have unexpected outcomes, so it’s worth running the prototype.
The next question I ask myself is ‘How will I know which is the right design to use?’ Even if you run the prototype and everyone accepts the design, you can never really know when a design is complete. You’ll always want to keep tweaking it and re-running prototypes. It’s really important to have a clear idea of why you’ve designed the interface and the design objectives, so that you know when to stop.
It’s really important to have a clear idea of why you’ve designed the interface and the design objectives, so that you know when to stop.
We used to explain animations via PowerPoint, or a massive PNG with annotations to show movement and duration at each stage. With Atomic, we now have a precise, highly visual tool for testing and demonstrating designs. This has brought development and design closer together: we can give our developers a realistic idea of the timings and animations we want, and they have all the information required in order to integrate them.
What drew you into Atomic as the best prototyping tool to use with your team?
Atomic is a web-based tool, meaning it works similarly on all platforms: Mac, PC, iPhone, Android. What’s more, in Atomic I can create a prototype like this and then directly manipulate the CSS, to add filters and blur the background for example. You can’t do that with other tools.
Any side projects you’ve been working on recently?
So many…all the time, I never sleep! One of my current projects is Drubbbler. It’s a tool for designers so it seems appropriate to talk about it here, and allows designers to schedule their Dribbble shots. I’d also like to run a series of more practice-oriented workshops, as opposed to talks where people present their experiences.
Luc wrote this article with the help from Emily, a translation athlete, wizard of words and crafter of content. She works with Luc and the Azendoo, Az Foundry teams on a number of projects.