Designing a Digital Product (Part 2)

In this two-part series, we’ll explore how Binocs was created through a collaborative effort between engineering, business and design. Binocs is a unique product, but the challenges and solutions of product design are nearly universal for companies.

Andy Stone
Emerson Stone
Published in
5 min readAug 9, 2016

--

Back in June, Binocs premiered on Product Hunt to quite a bit of praise and interest — signups for the Binocs Beta exceeded all of our expectations and many people seemed to understand the value right away. In preparation for that day, it was easy to gather the branding and product assets to show off Binocs to a wider audience. Almost immediately, we realized that it is difficult (but incredibly important) to give everyone the same brand experience no matter how they interact with Binocs.

If you haven’t yet, start with Part 1 that we wrote last week about understanding a product’s market, blending branding with product design, and why you should create demos throughout the design process.

Establishing a Consistent Voice

The most powerful branding tool that a company can focus on is consistency — making sure that every experience, on every platform, looks and feels like that brand. Large companies have budgets to make sure that this happens, but it’s just as important for a small product company. With the number of apps released every week and the proliferation of forgettable branding, users rarely come back to a product because they can’t remember the brand.

Creating a consistent brand experience and voice across the product takes time. When creating the brand, the team has to decide on the voice and tone for the company — is it all-knowing and premium, or approachable and goofy? Companies shouldn’t look to large brands for inspiration here because creating a unique brand is the only way to stand out.

For Binocs, we went with a lighthearted and playful aesthetic that rests on top of a helpful and wise voice. The illustrations and bright colors try to make a playful experience out of the mundane task searching for your files. The helpful voice used in copywriting and marketing is built to let people feel safe with using Binocs for their secure files.

Even social posts—like this instagram photo—are meant to evoke the same brand as the overall product.

Consistency in product design basically means that seeing a Binocs post on Instagram should look and feel like opening the Binocs app on your phone. It should have playful elements that get out of the way when you need it to be helpful. The voice should always come from a place of knowing, but never feel overbearing or condescending to the user.

Multiple Apps, One Design

In pursuit of a consistent brand experience, we also wanted to create a consistent product experience of searching for files on mobile, desktop, and Gmail. Each of these platforms are unique in the way that they handle user inputs, scaling, and type sizes. In making a product that people only have to learn once, all of these platform differences need to fade away as people search for their files.

Designing for iOS first let us create a simple system for scaling type — we had unique sizes for headers, titles, metadata, and descriptions. Those four styles of type could be changed and adjusted across platforms, but the scales should feel the same everywhere (headers would be largest, metadata would be smallest). We were able to adopt this scaling across MacOS and Gmail; the type scaling and brand colors made the apps immediately feel like they were built in the same ecosystem.

To speed up and simplify design across platforms, we adopted a card-based interface for the search results. This style (nearly ubiquitous in 2016) made for easy adjustments between screen sizes as we simply grew the size of the card or added more cards to the screen. The choice of building with cards allowed us to prototype the Gmail plugin within an afternoon, and reduced the number of unique components needed for each application. It helped create a strong foundational interface for building future products, but still allowed us to showcase the brand in an unobtrusive way.

Standard flows within the iOS app — from a zoomed-out perspective, a few colors pop but the rest of the pages have a consistent look and feel.

Building Trust & Ownership

Building Binocs was a unique project because the partners at both Emerson Stone and Binocs have 5 years of experience in building products with each other. There is an inherent amount of trust between the two teams and it helped create a product that everyone can feel proud to have built together.

One of many sketching sessions between the various teams. Everyone was free to challenge assumptions and designs with new ideas.

Most projects don’t have this luxury and building trust is that much more important for the final outcome of the product. Every client wonders if the design team is experienced enough or will create an effective design for their project. Budgets have to be discussed and there is often a lot of money on the line that can create issues between teams. For long-term product designs, it can be helpful to start on a small and quick project to build trust between the teams so that all ongoing work is more of a collaboration than a traditional client-vendor relationship.

Another way to make the project feel like a collaboration between teams is to assign ownership of individual pieces to everyone working on the project. Ownership is a valuable tool to help people feel a personal responsibility for the product and will often result in a better outcome for everyone involved.
It also lets designers come up with unique experiences because the project is employing the designers to create rather than just plugging in something expected. We often tell our designers to design what was originally assigned and then build their own answer to the same question.

Thank You for Reading

We’ll continue to write about the product design of Binocs. If you’d like to learn more, follow Binocs on Medium or sign up for the product beta at GetBinocs.com. Please reach out if you have any questions or insights into the way that we’re running designing with Binocs or ways to adapt that to your own company.

Binocs is a way for your team to spend more time working and less time looking for the files that they need to get work done. Sign up for the Binocs Beta today and discover the better way to manage your documents, emails and ideas at your company.

--

--

Andy Stone
Emerson Stone

Partner at @EmersonStone — a design agency focusing on beautiful brands and usable applications. I spend my free time with good coffee and bad movies.