If you’re a freelance UX designer or product manager, full-time, in an office, both a UX/UI designer, or anything along these lines, you’re probably in an incessant frenzy making sure your team, most importantly the developers, are on the same page with you. If you haven’t yet mastered Omnigraffle, Visio, Photoshop or other relatable software then this post can be quite beneficial to you. Even if you’re a pro with these things, Google Drive can save you ample time for lesser design oriented tasks due to it’s simplicity and collaborative nature. Here’s why:
1. Wireframing via Google Drive Presentation (aka Google Slides)
Although I often use Omnigraffle for higher level wireframing, Google Drive Presentation provides a quick and easy-to-use alternative. It’s their ghetto version of PowerPoint and I like it just how it is. GDP (no not Gross Domestic Product) is great when you need to whip something up to get the most basic concepts down and making it interactive. I’ve listed this as #1 because I think it’s one of the best kept secrets! You can make a click-thru mockup in seconds by using any sort of shape, filling it with text, and even shading it if you please — creating simple UI buttons, rows, screens, etc. You can even add images like an iPhone or the product’s logo if you’d like to make it a bit more high-level. How do you possibly make this an interactive prototype? You simply hyperlink assets (buttons, copy, etc.) and link them to individual slides within the presentation, which you initially render to resemble the screen. Try it out! I guarantee you’ll be amazed how clever this trick is.
2. State Diagrams via Google Drawing
A common drawback about robust UX software like Omnigraffle or Visio is that it has TOO MANY options when it comes to shapes, screen sizes, arrows, and whatnot. Often for a beginner, or even someone with more experience, they can waste ample time playing with different styles, sizes, and shapes when all the client or developers wants is a super simple state diagram to visualize the flow. Say it with me: SUPER SIMPLE STATE DIAGRAM. SUPER SIMPLE STATE DIAGRAM. Focus on being SUPER SIMPLE. Google Drawing is perfect for state diagrams because it forces you to be simple due to it’s focused subset of tools, shapes, fonts, & colors. Your first version state diagram should also be super macro told build upon, unless specifically told otherwise. Get all the major screens. transitions, and flows down pat. Always include a legend so everything is clear and you don’t end up sending emails back and forth between developers explaining the state diagram’s assets — that defeats the purpose! Even in my example below I could of left out the “segment control”.
3. UX Flows via Google Presentation
Like a lot of things in the startup-sphere, there is not 1 way to design a UX flow or UX Requirement Sheet, let alone a creating an entire user experience. I’ve gotten great value out of using Google Slides for my UX flow. Like I mention in #2, you can link different slides (i.e. screens) to it interactive so instead of saying something like “’home’ goes to ‘new’ upon tapping arrow’” — you can ACTUALLY go to the new screen upon tapping arrow. I’ve worked in mostly small teams — 4 developers tops, once in a while a designer (if it’s not myself), the CTO, and the client. When it’s this small you need a tool that gets your point across but all garners feedback ASAP on everything so you’re not redoing to many things. Google Drive allows this. Use arrows and hyperlinks to show transition between slides. Be specific as possible in your descriptions, use arrows, links to github repositories, and anything else to make the UX design crystal clear before sharing it with your team. I do apps, but this is easily relatable for design the user experience of other technologies. Don’t get to wordy. Get to know what works and what doesn’t work with your team. Know the best way to communicate. Learn from everything you do, your team, your competitors, and the long-term goal of your product. Do not be happy with V1, it’s only version! Which brings me to #4….
4. Feedback & Collaboration
You need to get the MVP out there and start getting user feedback! Google Drive is a huge help with this because not only does it auto save your last move, but all google drive docs allow for seamless team feedback via ‘comments’ (Hotkey: Command + Alt + M) and collaboration through sharing a doc or even better through granting a team member editing powers of a doc. You can change a team member’s powers by tapping ‘share’ on the top right corner of a doc and then choosing from a drop down next to the member’s name. This is perfect for cross-functional teams whom don’t work in the same building. You can even set alerts every time a team member leaves a comment or tweaks a doc so you’re never out of touch. This is a clear advantage over emailing PDFs, AI, PSDs, or other UX docs back and forth since they can easily got lost in your daily inbox clutter.
I’ve went over 4 of my favorite things about Google Drive I almost forgot to mention the backbone of it’s software — the cloud! Ahhh what a beautifully organized and carefully designed cloud it is. If you end up using Drive for wireframing, UX flows, state diagrams, technical specifications (via Google Document), and other things it’s awesome being able to work and save within the save environment. They clearly put a focus on the end user when creating this thing. No need to push heavy zip files via email to your teammates, just hit ‘share’ and they’ll get it on the fly for their viewing pleasure. And if more than one person can edit a specific doc you can see whom and when it was edited. For hyper detailed designers like myself, it’s so nice not having to dig and search through email time stamps of old docs. And don’t forget Google Drive has a slick app which achieves most of it’s core functionalities. Don’t sleep on this one as I’ve used it many many times to show someone screenshots and get needed feedback on the go. You don’t have to ask your designer for that Dropbox link again, or dig through your emails.
Voila! It’s all right there.