How I Supercharged my Design Workflow During Covid-19
Learn how one web developer became a better designer by simplifying their design process and becoming more inclusive in their work, and how you can do the same!
Join the DZone community and get the full member experience.Join For Free
I have become a significantly better designer over the last 12 months. Last March, I was extremely anxious about getting new work and doing my work effectively in lockdown. I was cooped up and couldn’t access my real-world creative outlets. Over the course of six months, I changed everything about how I designed. This eventually changed my life so that I was less anxious and far more productive at work while gaining a boatload of time for myself.
Before Covid-19, I was using all these apps: Sketch, Slack, Jira, Miro, and e-mail — lots and lots of e-mail. E-mails were the bane of my life. I had to constantly keep track of my design versions, along with keeping assets in one place and keeping up to date with any e-mail comments. On top of that, I had regular meetings with clients that took up hours every time, but I didn’t see any problem — I was getting to work on time and finishing work in the evening, so no problem, right?
Six months ago, I would tell you I would still be more productive if I was back in the office. But slowly I found ways of becoming a better designer by slimming down my apps and only using the tools I actually needed. The main problem I found was that my design process was very exclusive; it wasn’t set up to allow constant input from other team members, so I had to manually reach out to everyone to get any input.
I am going to share with you how I became a better designer and share the very few tools I use to successfully design. I became more collaborative, I involved clients far more, I made better commercial designs, and I became less distracted by messages, emails, and other apps vying for my attention. I now use fewer tools but know how to use them to their max potential.
These are the tools that I found worked best for my workflow.
Best Tools for a Smooth Workflow
Sketch for design — Sketch needs no introduction... it is my design tool of choice!
Google Drive for sharing files with the front-end devs — I put my project files in here, along with the original font files, images, and illustrations. I also include a file about licensing information to ensure there isn’t an issue down the line. This gives me peace of mind that everything is in one place.
Mockplus for collaborating — while Sketch is my design app, Mockplus is my team's app. I upload my designs to Mockplus and share a link with my clients and team. There, my clients can comment on any detail or visually markup parts of my design. They can also create new tasks if needed and can then test out my design in their browser.
I’ve divided my process into three (simplified) steps for you:
Initial Design Stages
My initial design stages aren’t that different from pre-Covid. I usually draw up a wireframe for a client, speak about the direction of the design and iterate from there. That general process hasn’t changed too much, it’s the dynamics inside these processes that changed: I start with basic questions, asking my client to fill in some of the blanks on how they want to achieve what they’re looking for. Then I use those answers to create a very basic pencil and paper wireframe in which I show the client the foundation for their website or app. This is far more collaborative and I find I can understand the problem at hand a lot faster.
In this questionnaire, I ask questions such as: what problem do you need to solve, what are the secondary objectives, how do you think we can solve it and what initial ideas do you already have. This helps me understand what they have in mind and can either a) save me time by working from their initial ideas or b) make sure my client is on the same page as me even if I present other designs (by understanding their thoughts I can either go along with them or present why their initial ideas might not work out). Either way, we save time and get on the same page early.
These are my first steps, and it seems basic, but I lost a lot of creative outlets due to Covid, socializing is reduced, going anywhere to see the arts is difficult and I can only speak to my colleagues virtually. I have really relied on going back to basics and that’s helped me re-develop my design thinking.
Main Project: Collaborate and Involve Clients When Possible
When I was in the office I always felt I could ask my colleagues for their thoughts and feedback on my designs. I never felt I needed to be that collaborative with my clients because I’m the designer and if I need help, the client couldn’t always provide constructive help. That’s where I was wrong... while I value my colleague’s opinions now, I don’t want to waste time asking for their feedback because I know the client’s feedback is far more important. I have found ways of working with my client in a constructive manner that means they don’t interfere — rather, they assist me in my design.
After getting an initial wireframe agreed upon with everyone, I go back to Sketch and design much more intuitive designs. I include components, text, and images. From here, I upload everything to Mockplus and get comments. In a sentence, this is my main workflow — Sketch to Mockplus, then back to Sketch and refine until everyone is happy. Now I only have to design in Sketch, get comments and tasks in Mockplus, and go back to Sketch to refine. Now my design is inclusive and lets me work in lockstep with the whole team as one unit, letting information travel freely.
I do use custom icons and make my own illustrations, but these are not all that necessary. I don’t have to make my own illustrations because the client often has assets for me to use and if not, stock assets are quick and easy. Then there are custom icons... I mostly use stock icons but if I have time I look out for suitable custom icons that would push designs a notch above the rest. But, incorporating them into my designs isn’t at the top of the priority list for clients.
Every client I have worked with prioritizes function over style.
For example. I had a client who was having difficulty converting sales on their e-commerce site. The problem was that their store was good and their prices were competitive — but they clouded the customer’s eyes with information about other (non-commercial) items. This project didn’t need any superfluous design work it needed to simply give the customer an ability to check out quickly — and I did that by re-designing their webpages. We then did an extra project with the store setting up a post-sales promotional newsletter.
This was one of the more basic problems and I went through the process quickly but the base process is there and the best solution was the simplest. During the process, my client was always checking on the design and giving me their comments and input to keep the project on track, as well as giving me extra tasks if needed. We worked together throughout the entire process, from the early stages to the main project to handoff to the developer.
Work with Your Client and Focus on Your Main Goals
This process has completely changed the way I work. No more extra meetings, no more long emails — I’ve significantly reduced my production time just because we get on the same page early. They can check in on my designs at any time, and let me know in real time where they want me to edit. It gives me so much more interaction with the client and lets us both understand a lot more about each other.
Now I rarely e-mail clients and don’t ever send them single iterations of designs. Everything I do now is online, in constant sync with clients. Try this method out, I guarantee you will save you time and help you become a more effective designer with better working relationships with clients who will want to refer you on or work with you further. In no time will you have more clients, happy clients, and more time on your hands.
Published at DZone with permission of Thomas James. See the original article here.
Opinions expressed by DZone contributors are their own.