Content-heavy website for an expense & time tracking SaaS
ClickTime needed a new opening, so we worked together to create a refreshing, modern responsive website, that incorporates tons of content despite the minimalist design. All thanks to state-of-the-art design methodology that saved us time and delivered spectacular results.
ClickTime was a pioneer of the SaaS industry with their IT consulting model that launched in the late 90s, but it was their expense and time-tracking software that truly made them stand out. In 2022 it was high time for the company to receive a website that would match their software’s quality and go well with their new corporate identity.
As is usual in the adchitects team, some of our finest players entered the pitch and played a phenomenal game of design & development. Obviously, the coaches (Project Manager, Testing & CEO) also played their part. Needless to say, the project was a win.
Every project we do is preceded by onboarding and multiple project-specific consultations with the client. Once we establish common ground, we set off to work. In ClickTime’s case, we initially dedicated our attention to the creation of the new brand identity, and then we went onto the website itself.
Most of our work is being done through industry-standard software that’s above all easy to use but has a steep learning curve, where masterful designers truly shine.
An intriguing combination of serif and sans-serif fonts – what’s not to love? You’ll find the imposing Tiempos in the headers and titles, and the DM Sans in all the smaller captions and buttons.
It’s a calm and simple base color palette that incorporates an impressive amount of shades. Deep blues work in tandem with a noticeable lighter sky blue. We were not afraid to implement radial gradients here and there to emphasize certain elements like buttons. The contrasting, slightly dark orange completes the classic hot/cold contrast of blue and orange.
No new brand identity can flourish without a skillfully implemented brand book. ClickTime’s Brand Bible is a handy guideline, detailing all the best practices when it comes to the company’s new brand.
What truly makes this project stand out, is the Atomic Design Approach. It’s an interface design system that utilizes the order and hierarchy of elements that comprise a website. From atoms, through molecules, to organisms, website elements are categorized based on their function and relation to each other.
Thanks to this methodology we could establish a clear website structure much faster, and save time by being able to reuse the components, which could work in more places than one.
How does all this exactly work? Think of a single website component as an organism. Inside, you’ll find the crucial “if’s”, molecules, which are clusters of components that have unique properties, and atoms, the smallest bits like colors or animations, which make up the molecules, and much like in chemistry, are the smallest parts of the system. The way the site’s content is built enables the web design team to come up with more coherent website structures that reuse interface components as a time- and effort-saving measure.
When the new website’s structure was ready, the elements came together to offer a seamless and harmonious experience for the user. Thanks to Atomic Design Approach, we could spend more time fine-tuning the website’s readability and user-friendliness.
There could be nothing else at the center of attention, than the platform itself. ClickTime’s expense & time tracking solution received a brand new product page that packs a lot of information while still being clean and approachable.
One of the key website requirements was to allow the user to see how the ClickTime app really works. The content-packed Product Tour page details all the ClickTime’s unique features and details through an easy-to-use slider-like feature.
Is your company awesome? Spread the word! No enterprise website is complete without a history of the company’s successful endeavors. The ability to change the highlighted case study at the top of the page was an extra bonus.
The ClickTime team thought ahead and prepared their software to be integrated with a lot of existing tools and platforms for the best possible working experience. Integrations have been split into categories for easier viewing.
Naturally, the mobile version of the website is sleek too! Intuitive buttons, neatly implemented branding, and a menu that optimally encompasses all the website’s subpages will ensure a great mobile experience.
Not only was our cooperation with ClickTime a huge privilege, we also transmitted on the same wavelengths throughout the project, as we track time ourselves and love to optimize our work! We gave ClickTime a pristine, professionally-looking brand identity, as well as a modern, clean-cut responsive website that exhibits best industry practices, built using the latest design methodologies and principles.
