Drive, Sketch, Invision & some peace of mind

TL;DR
How I improved the design workflow involving the Client as much as possible, using Google Drive for content management, Sketch for wireframing/UI and Invision for prototyping.
This allowed me to have clear communication with the Client, all of the content ready, reduce reworks and allowed the Client to present a high-fidelity prototype to investors and development team.

I was called up by a Client to design a website. No real brief, just a Skype conversation where we talked about the sections and some of the goals. The deadline wasn’t too tight (yeah.. that’s doesn’t happen often) so I decided to take this opportunity to improve my usual workflow.

These are some of the problems encountered in older projects I wanted to solve/avoid:

• Client not having content for the website
• Client changing his mind on important issues halfway through the project
• Client not having clear goals for the website
• Miscommunication with the Client

To avoid heavy reworks and unnecessary headaches on late nights I tried involving as much as possible the Client in the process of making a website.

Open, constant and fast communication was going to be important. This would allow me to get feedback as soon as possible and treat any issue efficiently.

Tools used

Google Drive

The Client did not have any initial content. He already used Microsoft Office tools for his day to day work, so in order to manage and create content I set up a Google drive folder. This folder will be where the Client put all the necessary information the website needs. Old presentation, old files that would lead to the final content. This also allowed me to learn more about the products and the environments the user would encounter.
The main file was a Google Doc that was organized by the website sections (Homepage, Solutions, Services…). This was an excellent start for the Client to write the content of the website. It would help me design the necessary layouts, and writing the content would help the client see the value and goals of the website.

True story time. At the beginning the Client wasn’t keen on using the online google drive. I explained to him that this was a way to gain time. It will allow him to have the content laid out for when the website will be developed and it will also allow him to have a global picture of the project at all times. We proceeded with the google drive. A few weeks into the project, my Client had his email account compromised by a virus and it ended up deleting files from his computer and also lots of emails. This was the moment he saw the benefits of Google drive, all of the files necessary for this project were saved on the drive. Next Skype call we had, the Client ended up thanking me for setting up the google drive.

Bohemiancoding Sketch

Sketch has been on my “To learn” list for a while now. I was going to use this opportunity to learn how to use it and see what it got to offer. So, first, where to start? Scott from Leveluptuts has always been a great source to learn about anything, he did a great tutorial for Sketch 3 and it’s the perfect place to start. Oh… and… it’s free.

Then I did a research on where to find plugins and which to pick.
Here’s a couple of sources:
https://designcode.io/sketch-plugins
http://sketchapp.rocks/
http://sketchapp.com/extensions/plugins/

I proceeded by doing a check on what plugins I would need for this project. Turns out I downloaded way more than I actually needed.
Here’s a small list of what was relevant to me during this project:

• Skecthtoolbox — It was a great tool to set up my Sketch. I still use from time to time, but once you install the basic plugins you won’t use it for a while.
• Dynamic Button
• Sketch Palettes
• Lorem Ipsum Plugin

• Sketch to Gif — I download it to experiment and play around with it. It wasn’t worth it. If you know how to do gif’s in Photoshop, do it. It’s interesting to see how to make them in sketch but the amount it takes to make it nice and smooth is too long to be spent on a gif for a presentation. I made a gif showing the hover interaction of the menu item in the header. Ended up doing it in Photoshop.
• Craft from Invision — The idea of this plugin is great, syncs your fonts and colors, allows you to insert random data and to duplicate content by row and columns, and soon it will allow you to prototype directly into Sketch (with the prototyping startup Silver Flows). But be careful, if you have started to manage your fonts with Sketch, the sync with this app will duplicate all of your type styles. I think Craft needs to be used from the moment you start a project, this will allow you to manage easily of all the components in your sketch file. Nevertheless, I will try and set it right for my next project and you should try it out.

I was running Sketch 3.6.1 at the time of the project.

Invisionapp

I’ve used Invision in the past, but have not had the opportunity to use it for a website nor to use it integrated with Sketch.

And it is fairly easy. Upload your .sketch file to the “source files” folder in Invision Sync and let Invision do its magic. It will automatically upload all artboards has “Screens”. Any modification you do to your .sketch file, Invision will pick up on it, and update the prototype. You can see in this video how to easily set that up.

Invision takes care of the boring part. Now you need to link all of these screens together to create the prototype, get the shareable link, and send it to your Client.

And that’s what I did. Except I wasn’t taking into consideration a very important feature of Invision. Comments.

Originally I thought commenting on Invision would be a tool used meant for design teams to discuss internally about the layouts and contents. But isn’t my Client in charge of content? So isn’t he then part of the design team?
So I turned on the “switch” to allow commenting on the shareable link.

The result was great. The client not only had access to the whole prototype, but had the possibility to comment directly on it. This allowed him to see the content in context and maybe change what he had written.

Piece of advice. Set the email notifications so that they arrive “Batched” in your profile. Seeing 30 unread emails after a 30 min break did give me a small sweat.

I had 2 ways to communicate with my Client without having to write an email and wait for answer or schedule a Skype call. Google Docs comments and Invision comments.
These allowed me to have better communications throughout the process.

Conclusion

I did not reinvent the wheel, these tools have been around for a while.
I did however improve my design workflow by granting the Client a lot access into the process of designing a website. This allowed me to spend more of my time designing and have fast feedback from an engaged Client which ultimately lead to a better product that both me and the Client were satisfied with.

Stupid Studio has “involving the client” down, and the Creative director and Partner, Bjarne Chistrensen explains it really well in his talk @Awwwards Conf.

You can find the full project on my Behance and the protoype on Invision