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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!