How Creative Agency JCO Digital Uses Adobe XD at Every Stage of the Design Process
Finnish full-service agency JCO Digital, based in a small town near Helsinki, has been a fan of Adobe XD from the very beginning. Now the team uses it throughout their design process, whether they’re working on a website, an app, an e-learning game, or a simple marketing campaign, while involving the client as much as possible.
We sat down with Creative Director Monica Javanainen to find out more about their workflow, and asked her to share some of JCO Digital’s favorite Adobe XD creations.
When did you start using Adobe XD?
I came across XD at Adobe MAX in 2015. There were a lot of great announcements but I thought the most interesting one was a new tool for UX designers, which was being developed under the code name “Project Comet” back then. I was so excited about it! I couldn’t wait to get my hands on it and applied for the early beta version.
At that point we used different tools (like UXPin and Proto) for wireframing, and we didn’t have any actual design process. I must admit, we used the XD beta version in client projects for both wireframing and prototyping. Only once we lost a prototype, but the XD support team fixed the problem and returned the project within 15 minutes so we could present the prototype to our client.
What’s your design process like?
These days Adobe XD is a crucial part of our design process. We use it in all projects – websites, apps, e-learning games, and simple marketing campaigns. We always start with rough drafts, using pen and paper. The next step is to build the interactive wireflows with XD. At this point we don’t work with visuals yet.
It’s easy to collaborate with the team by commenting directly on the project, but we only present it to the client when our own team is pleased with it. The clients that are already familiar with our process will give their feedback by commenting directly on the wireframe. This is an excellent feature and saves a lot of time.
When the wireframes are approved, our developers will start their work by building up the basic structure of the website – in the meantime our graphic or UI designer will work on the visuals, also in XD. When the client has approved the visual prototype, our developers will get the dev version of the prototype ready, which includes the style guides, such as grids, fonts, and colors. Devs use this information to create base SCSS definitions for our in-house WordPress theme. The process is very fast and productive.
How do you create your wireframes?
We usually start with low-fidelity paper sketches. The analog process at the beginning of the project is probably something I learned in school. It feels like the intuitive and creative mind needs something fast on paper, and the rough drafts help oversee the variety of different layouts and details needed. With pen and paper, or a whiteboard, it’s also quick to visualize new ideas and validate the design changes. I also think the next step of creating digital wireframes with XD is better when there’s some brainstorming with pen and paper behind it.
What are the advantages of creating your prototypes in XD and making wireflows interactive?
XD is very fast and fluid, and creating the prototypes will for sure make the project more successful. The interactive prototype will make the testing faster and more realistic, and that’s how we can avoid misunderstandings. It’s far more expensive to make changes to the final product than to the prototype. Another great feature is Adobe Sync, which makes it possible to use the same libraries with styles and photos across different Adobe apps. It’s also easy to export the different assets from XD in different formats.
What other tools and techniques do you use in your process?
We use Photoshop and Illustrator for graphics and images. We also use Wacom for drawing. Depending on the project, the developers will work with WordPress, Vue, Flutter, or Unity. A good project management tool is also crucial in every project – at the moment we use Active Collab for that. And of course we use Slack – each project has its own channel with the direct link to the XD dev version and the visual prototype in the topic.
How much user research and testing do you do in your projects?
The very first step in each project is gathering information and understanding the business objectives and functional requirements. We also need to know the users and what their needs are to create an effective user-centered design.
Already at the wireframe stage it’s important to see how the client reacts when we present the designs. At this point we are able to distinguish possible problems in the UX and change the solutions early on. Depending on the project, we might test the prototype on potential users by either observing the test group or by using user surveys. Especially when we work on a project for kids or on an e-learning project, it’s important to see how real users solve the tasks.
How do designers and developers collaborate at your agency?
We are a developer-driven agency, so we have fewer designers than developers. This leads to a culture of collaboration in which developers work closely with designers and project managers. Every design goes through a developer before we show it to clients. This is how we make sure we will not promise something we are not able to deliver or exceed the project budget.
How involved is the client?
We think it’s very important that the client works as a member of the team. We need to understand the client’s needs, and we’re there to sort out the problems. At the very beginning of each project we usually introduce our process and our way of working with XD. When our clients are familiar with the process, it goes even more smoothly. For example, our clients have learned to comment directly on the prototype, which makes the process faster. When our clients want to use their own graphic designer, we might do the UX and produce the visuals based on the layouts. Lately, we have been also encouraging our partner agencies to use XD whenever possible to streamline the project process.