Designing A Digital Product (Part 1)
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.
From discussing features and building demos, to launching publicly and creating an online presence, Binocs has sought to maintain a consistent experience through product design. Right now, Binocs is described as “your team’s search engine to quickly find emails, files, and attachments across multiple cloud services.” The product is built for users to find their documents and information no matter the location or format. While the engineering to perform this feat is difficult (searching millions of documents quickly, building a security layer for protection, and creating apps for every device), the interface needs to be simple and delightful for people to adopt Binocs into their daily lives.
Design Difficulties
The early demos of Binocs were created without a focused effort from the design team, but were built to test out the premise of the product and understand the feasibility. Having these early demos to reference and understand were essential in designing Binocs, but there were still many design questions that remained unanswered.
We first needed to know: who was the exact market for Binocs — individuals who don’t want to organize their files, business professionals who are already drowning in emails, or lawyers who need to search within all of their documents? The question led us down the path of designing the product with a strong foundation that can evolve over time to accommodate new types of users, files, and sources depending on the market.
The other essential question: how can Binocs become a part of users’ daily lives? The search will need to function flawlessly (a few misfires and people will lose trust in the product) and create new experiences (finding a file that was thought to be completely lost). Right now, Binocs is intended to be used quickly throughout the day to find any type of file. The difficulty is in understanding how often a user will actually use Binocs and how long each session will be — does someone use it for a few seconds or stay within Binocs to work through all their emails and files? Understanding the session frequency and length can have a large impact on the long-term usability of the application. For the first public launch of Binocs, the team has designed an experience that fits somewhere in the middle; keyboard shortcuts and speed allow for quick uses, but an in-app browser and history also allow it to be used for longer sessions.
Brand As Product Interface
Rather than splitting the team to design the brand and product separately, the same team was responsible both for the aesthetic design along with the functional design of Binocs through the iOS app, the MacOS app and the Gmail plugin.
After an exploration session between stakeholders, the brand was created to be sophisticated, approachable and wise. The aesthetic needed to feel fresh and contemporary, but the brand shouldn’t feel slapdash or beta. To stand out among the cacophony of new apps every week, the art direction needed to be bold and have unique points that people would take the time to notice. We decided to focus playful illustrations to explain the technical aspects of the product and a large color pallete to give us a welcoming aesthetic. The wide color palette, along with the set of simple icons, dictated a lot of the product interface as each color was given purpose and meaning when corresponding to document types and sources.
To honor the digital-only facet of the product, the logomark of the binoculars was designed to be responsive — filling out the appropriate space with varying levels of detail that worked across every size and screen type. The result is a set of binoculars that represents Binocs no matter the size or placement. This is a unique take on a brand because Binocs has such deep control over when and where the logo is placed across its apps and plugins.
Finally, for the typography of Binocs, a mixture of system fonts and Euclid Flex were chosen. Euclid Flex is used for the logotype and throughout the marketing materials. It’s simple European shapes are contrasted with a few delightful elements and ligatures that continue the playful trend of the color palette and illustrations. System fonts are used across the MacOS and iOS apps to make them feel like native experiences — with only the logo and the color scheme needed to represent the brand. Once a user has downloaded Binocs and gotten into the habit of using it on a daily basis, the brand typeface (Euclid Flex) should take a backseat in the interest of a native experience.
Developing The Interface
Most product designs involve learning about the brand and its application before starting to work on the nuts and bolts of the user interface. Binocs was a unique case because the design team had just finished the brand when starting on the interface — the rules set in place by the brand were still fresh in everyone’s mind and the art direction was able to dictate what could and should be done on any screen. From the first day of the interface design, the team assigned the various colors to individual sources and file types — PDFs were the brand’s red, Images were the brand’s yellow, Word Documents were the brand’s blue. Using color in this descriptive way helped free up text on the interface to focus on other bits of information.
The first app to be designed was the iOS experience. Starting on the smallest screen that Binocs would be built for (we’ll see about Apple Watch down the road) allowed the team to build for high-quality experience in just a few hundred pixels. Extraneous information was stripped out or pushed to a secondary page so that the search results focused on the exact information that a user needed at any given time. The design on mobile followed a prioritization schedule: the most important thing for a user comes first, the second most important thing for a user comes second, etc. This simple process ensures that there is a clear hierarchy of importance by organizing the content around this list.
The other benefit of starting with the iOS design was that we could use the same layout of mobile search results (at roughly 320px wide) for the search column of the MacOS app (at roughly 300px wide).
Throughout the interface design, the design and development team met to sketch, prototype and discuss ideas. This meant that there was no “big reveal” for the interface but rather a series of check-ins and mini projects over the course of a couple months. The meetings were more about talking through nuances of a design rather than setting up a presentation — this meant that everyone had an impact on the interface and the developers knew what was going to be required by the design before handoff. It also meant that the design team worked on the functionality and revisions of the apps, not just the aesthetic style.
Design With Development
In early phases of the project, the design team would often hit roadblocks with the design when trying to understand how a particular page or action would function. With the number of possible file types, sources, and search queries from a user, we needed to see the app in motion to find weaknesses and gaps in the logic. In order to move quickly, the design and development teams worked together to build small prototypes to test type sizes, animations, and real data. This rapid turnaround quickly found errors in the designer team’s logic and new solutions to product design problems.
It also helped for everyone on the team to see movement from both the developers and the designers as it was a simple victory to solve problems together rather than waiting until product launch. This process can take more time and budget than a traditional waterfall method for a v1.0 app, but it creates a stronger foundation for the product and for the team as a whole.
Part Two
In the second part of this series on product design, we’ll explore how to maintain a consistent voice in the brand, how closely mobile and desktop apps should mirror each other, and how to build ownership and trust across different teams. Read Part Two of Designing a Digital Product.
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.
