The Tools We Use to Design

Before We Open Our Laptops

Today, the availability of digital design software is vast. We have so many choices when it’s time to get to work. Like most designers, we at Belly love trying beta releases of the newest, super-slick software, but we also already know what works well for us now. Ultimately, it doesn’t really matter what piece of software we use, as long as it gets the job done. The software itself is not as important as the ideas and processes that lead to the design solution.

With that being said, here is a quick overview of the current tools we are using to design at Belly.

Getting Started

Trello Our product design process typically starts with a request or idea in Trello. A Trello card is created on a specific Trello board and prioritized by a team lead. This card will exist for the remainder of the project and serves as a communication piece for what has been done and what still needs to be done relating to that project.

Google Drive If additional information or specs are needed, we use Google Documents, Slides, and Sheets, where we can collectively edit and distribute information. These documents are then linked within Trello. We store all of our design files and assets on Google Drive.

Slack We use Slack with specific topic or team channels to discuss projects, share knowledge, and organize. We also use Slack to share useful links, discuss lunch, and post gifs.

Whiteboards

Once a project has sufficient details, clearly defined goals, and a Trello card, the assigned team will meet and start hammering out the details.

At Belly’s office most of our walls (and some tables) are whiteboards. We can write, plot, and doodle almost anywhere! The whiteboards help groups communicate ideas as well as invite collaboration and transparency from anyone within the company.

Research & Testing

Once we’ve clearly defined a problem and have an assumption on how we might solve it, we try to gain some sort of user feedback as early as possible. Depending on the depth of the project, timeline, and target user, we use different methods to collect this information.

Usertesting.com Usertesting.com is great for fast, qualitative feedback. We can launch a test in a few minutes and receive a video of a person providing feedback on our prototype, website, or app later that day. Usertesting.com helps us confirm if our initial design ideas are headed in the right direction.

Quicktime In addition to remote testing with usertesting.com, we also conduct in-person usability tests with existing customers. Whether in our office or in the field, we have test participants complete tasks and provide feedback using a provided laptop or mobile device. The user’s voice and screen actions are recorded using Quicktime, which is free and preinstalled on Apple computers.

Survey Monkey We sometimes use Survey Monkey to ask our users questions about their experiences with Belly and expectations of our product’s features. This feedback is then reviewed and the findings are baked into our next round of design iteration.

Google Analytics Google Analytics is used by pretty much every department at Belly. The ability to see what our users are viewing, clicking, and loading on our website is critical. We use Google Analytics data when considering design changes and aligning with business strategy.

Optimizely Optimizely is our tool of choice for running A/B tests on our website. This tool allows us to split our traffic and try out new copy and layout ideas.

Design

Photoshop & Sketch

Like any other digital company, we’ve had the Photoshop vs. Sketch conversation many times. Day to day, we still use Photoshop but we do find ourselves launching Sketch more and more. Sketch’s focused UI, tools, and speed are definitely welcomed and the user-driven plugin community is constantly providing interesting ways to streamline workflows and encourage efficiency.

Illustrator Basically all of our vector illustrations are created in Adobe Illustrator. This also includes icons and logos. Sometimes we might even do some quick UI design work like wire-framing in Illustrator as well.

Adobe Creative Cloud From time to time, we need to edit or animate videos, and for that we use After Effects. For sound editing and design we use Audition. Both are Adobe products and are included in our team’s Creative Cloud membership.

Prototyping

Tumult Hype Although not as popular as other more talked about prototyping programs, Tumult’s Hype is our tool of choice for two main reasons:

  1. You can create (draw) your layouts directly within the software. Unlike other prototyping programs, you’re not forced to import static mock-ups from a different program (but you can if you prefer). On top of that, elements within Hype are created using HTML and CSS which is excellent for maintaining consistency, scaling, and realistic browser previewing.

  2. Hype allows you to manually control your animations and transitions with keyframes along a timeline. This functionality is incredible for quickly testing out different approaches and solutions for interactions. You can tweak just about anything in your prototype and you’re not limited to a prebuilt library of interactions and animations. Exporting your creation as a web page, video, or animated gif is a snap, plus you can mirror your canvas to a mobile device.

Invision Invision has been great for presenting and gathering feedback on design work and user flows. If design assets already exist and we need to quickly link a few views together, Invision is the fastest and most straightforward option. Invision is also constantly adding new features and integrations, which is great to see.

Other Stuff

Outside of design software, the Belly Product Team uses a handful of other tools that help aid the launch and maintenance of our designs.

Sublime Text 3 Sublime Text is our design team’s code editor of choice. It is fast, has tons of add-ons, and is completely customizable. In addition, most of Belly’s front-end developers use Sublime so when we pair program the keyboard commands and interface are familiar.

Github When it’s time for our design work to get coded, hopefully as soon as possible in the process, the designers can contribute and follow the progress on Github.

Skitch Part of the Evernote family of applications, which we also use for note taking, Skitch is an editing tool that allows you to quickly annotate and draw on digital documents. It’s really quite simple, but useful, for fast, direct feedback and noting visual changes.

Always Changing

It’s inevitable that this list of programs will change, maybe even tomorrow. Everyday we see or try something new to improve our workflow, make our job easier and more impactful. But what’s really important here at Belly is that we are creating the best products for our users. How exactly we build those products doesn’t really matter to our users, they don’t care. People just want to achieve their goals with our products and we need to make that as frictionless as possible.

As product designers, our tools need to allow us to move quickly, not be wasteful, and foster open and effective communication with team members. As long as we accomplish those objectives, we really aren’t tied to any one tool.

What Tools Are You Using?

Are you using a new tool that has improved your workflow or is just really cool? Please let us know! We’d love to hear about what is helping others produce great work.

Ask a question or share this article, we’d love to hear from you!