Timecounts: A design case study

Timecounts is a volunteer management platform for the modern organizer. Behind this product is a very talented group of engineers and thought leaders. Like many startups, they worked tirelessly to create a functioning prototype but needed help defining their company brand and adding polish to various pieces of design collateral.

We love working with clients who have confidence in their ideas and a strong sense of their values. Timecounts knew early on that their product would have a meaningful impact on the lives of users and amplify the power of collective action.

Discovery comes first

At the commencement of any new project our first step is a discovery phase that leads to a creative brief. This helps align everyone on project goals and establishes a framework for assessing future design concepts. After a short round of meetings and questionnaires, we consolidate key information regarding communication objectives, audience profiles, and creative direction for various project deliverables.

A creative brief doc doesn’t need to be overly exhaustive — it just needs to define the problem, highlight the important ideas to express, and paint an accurate picture of the audience. Learn more about our creative brief process.

Good logos are launchpads

A logo design represents the cornerstone of any visual identity — it distills key messages and sets the tone for all supporting visual elements. While a successful identity system should be the ultimate goal of any branding exercise, our first step is to look carefully at a simple, meaningful, memorable logomark design.

A round of divergence kicks off this process. It allows us to open our minds and sketch. At this point we’re not concerned about editing concepts or holding back ideas. After calibrating our minds to the task (via the creative brief), it’s a chance for us to let our creativity fly.

We don’t use sketching to draw the final idea. Good divergence is more about exploring how to represent key concepts.

Sketching will invariably produce a collection of ideas that range in quality and effectiveness. The convergence phase has us focus in on the directions that show the most promise and render those ideas in vector and colour.

Each of the logos above explore concepts of collective action, community impact, and time management as defined by the creative brief. After a few rounds of convergence, these logo concepts are ready for exploration in context.

Aiming for an identity system

It’s always important to present logo design concepts in context (since logos are rarely seen floating alone in empty space). We always work with the client to initially determine what types of collateral they feel need to be covered by the visual identity. Depending on the scope and budget of the project, we aim to include a wide range of these mock deliverables so they can judge the effectiveness of each logo concept in a meaningful way.

When looking at visual identity design, we explore a minimum of 3 concepts that represent different interpretations of the creative brief. Any fewer and we find that clients have difficulty selecting a direction with confidence.

Each identity concept portrays how the logo design fits into various applications and demonstrates a range of ways to meaningfully present key brand messages. Learn more about what composes a visual identity design.

Once the identity concepts are on the table, it’s up to the client to decide which option is the best fit for their audience. The brief comes in handy at this point — it’s a useful tool for the client to have on hand and helps remind everyone of the communication goals and creative direction defined earlier in the process.

With approval of an identity concept, we worked collaboratively with Timecounts to extend the design system to various brand touchpoints and deliverables for their existing and future needs.

Logos are critical, but often represent a small piece of the whole identity picture.

Identity design is undeniably one of our passions. Our presentations will often include UI elements, print collateral, copywriting examples, and other expressions of design strategy. This gives the client a valuable perspective and real sense of what the living identity will ultimately feel like.

Solving the web app puzzle

Armed with a functioning prototype and an impressive roadmap of upcoming features, we had the opportunity to collaborate with Timecounts to work through various interactions and desired functionality.

Before & After — A working prototype was useful to give us a clear sense of certain user flows and other desired functionality. Our challenge was to look beyond the established elements and table more effective ways to organize information, integrate the new identity, and ultimately facilitate successful user interactions.

Coming in as new users allowed us to capture valuable insights on user flows and page functionality. We were also able to question some details that may have been taken for granted because the team was already very intimate with their prototype.

This phase of the project provided an excellent opportunity to grow the visual identity and continue making strong connections between the web app and branding elements.

Users are taken through a simple and intuitive Activity creation process. The app UI design is unique and ownable, fitting comfortably into the established visual identity. It takes a step back to allow the user actions to be the main focus.

Timecounts allow users to easily organize, manage, and engage with their community.

Detailed searches from anywhere in the app was an important aspect of a primary workflow. Depth and subtle animations help to orient the user throughout the app.

The marketing narrative

Once the app design was further along, Timecounts engaged us for a responsive marketing site to help attract new users and elaborate some of their platform’s powerful features. A preliminary phase dedicated to copywriting helped us frame the key messages and established a general written tone.

We prefer to spend more time with content strategy and wireframes prior to moving into visual execution. This approach provides ideal opportunities for client collaboration, and ultimately leads to a more meaningful visual design. We use wireframes in various ways — sometimes as a visual checklist of content, sometimes as a means to explore preliminary layout approaches.

In this case for Timecounts, we presented multiple expressions of content strategy paired with basic layout options in the wireframe phase.

Timecounts saw value in an approach that highlighted product features through the lens of real-world organizers. By sharing actual customer stories, they were able to provide inspirational accounts of how their product was helping to make an impact and move the needle in the real world. Once a content strategy was approved, we began work on visual execution.

The design concept phase allows us to explore multiple interpretations of the messaging strategy and creative brief. We always challenge ourselves to look past the rigid visual quality of the wireframes and table divergent visual designs. These concepts each honour the strategy in their own way, but present different visual solutions for consideration.

The client always has the deepest understanding of their product and they are invaluable collaborators when approaching the design of marketing collateral.

After the concepts are presented, the client chooses the most effective option and we begin a design extension to all remaining site pages and viewports.

The Timecounts marketing site combines a range of visual assets. Real photography, bright colours, brand patterns, lighthearted illustrations, and feature graphics all combine under a single umbrella to highlight key features and articulate a powerful value proposition.

At this stage we also produce all the visual assets required by the marketing site: product feature graphics, spot illustrations, and a range of icons were created for various pages.

Graphic assets, illustrations, and icons are not outsourced — we produce all material here in the studio.

Love for the details

For both the marketing site and the web app, we provided the dev team at Timecounts with a package of all assets required to successfully implement the approved concepts. When designers and developers work remotely, many visual nuances can be lost in translation. To prevent this we take special steps in the preparation of our designs. Our design production process leads to an in-depth dev pack that provides visual designs for different viewports, CSS type styles, grid guidelines, and detailed functionality directions for specific page sections.

A good dev pack is essential to any build. Check out our free ebook to learn more about our process and deliverables.

At the end of the day

Timecounts is an innovative, inspirational team dedicated to helping organizers effect real change. Throughout our collaboration they have been very receptive to our methodology and strategic contributions. Most importantly, Timecounts understands that design is a process, and were fully engaged as we moved through planning and execution to arrive at an awesome product that will be of great benefit to their users. Visit http://timecounts.org to learn more and get started!

Want more?
Take a look through another Studio Function design case study on Toronto’s best coding bootcamp: HackerYou.

Have a project on the horizon?
Tweet @studiofunction, or email info@studiofunction.com and let’s chat.