Case study

Datamolino Ltd.

Our collaboration with Datamolino, an invoice processing software company with over 10 years in the market, began in May 2023. They approached us to lead a complex redesign and custom development of the company's website, and to update their brand identity along the way.

Since the website is Datamolino's key marketing asset, the company recognized the need to refresh its look, improve the website's architecture, refine the messaging, and update other brand elements to align with contemporary standards and project a more modern vibe.

Phase one

Previous state

Initial discussions, research, and audit

We kicked off the project with in-depth discussions with the Datamolino team to understand their objectives and expectations. We thoroughly reviewed Datamolino’s existing visual communication and performed an audit of their website. The website lacked a clear visual language and had a somewhat cluttered appearance. We identified several navigation and structural issues within the website’s architecture as well as inconsistencies in page hierarchy and the use of website modules.

Audit

Phase two

Brand sprint workshop

As part of the prep phase, we conducted a half-day brand sprint workshop with Datamolino’s leadership team. The aim was to distill the essence of the brand and outline the trajectory for its future brand strategy. Through structured exercises, we explored the company’s fundamental values, unique selling points, and target audience. This exercise was crucial in shaping the visual language, tone of voice, and copywriting direction, as well as aligning on expectations for the redesign.

Phase three

Exploration and creating stylescapes

Following the brand sprint, we initiated the exploratory phase, during which Datamolino’s new visual identity began to take shape. This phase involved the creation of mood boards, experimentation with various concepts, gathering feedback, and ultimately, the conceptualization of the brand’s new identity.

Logotype refresh

One of the specific requests from the Datamolino team was to retain the original brandmark. Working with this request, we focused on refreshing the Datamolino logo while preserving its brand icon. We updated the logo’s font to align with the typeface selected for all brand touchpoints, ensuring consistency and achieving a more contemporary appearance.

Logotype

Color palette

To preserve Datamolino’s brand recognition, we refreshed the existing color palette by introducing deeper and brighter hues—adding a more vibrant feel to the brand. When selecting the colors, we ensured that the combinations and color contrasts are easily legible and accessible to all.

Color Palette

Typography

As the main typeface, we chose a free Google Font for practical purposes. Poppins is a versatile, clear, and modern typeface that comes in a variety of weights and styles, making it a flexible choice for creating a strong and consistent visual identity. It has also been designed with accessibility in mind.

Typography
Illustration

Illustration style

For the Datamolino brand, we chose illustrations as one of the most distinctive elements to define its identity. We crafted a custom-drawn illustration style specifically for Datamolino, and along with it a library of custom-drawn illustrations and pictograms, all designed to unify and enhance the website’s visual language.

We aimed to capture the essence of Datamolino’s company and niche accurately. Our goal was to ensure that the illustration style not only resonates with the target audience but also effectively depicts the product and its benefits.

Brand applications

In redesigning Datamolino’s brand identity, we focused on its specific applications and how the Datamolino team will continue to use it across various touchpoints. Our strategy was to develop a brand identity that is flexible and easily adapts to a variety of use cases.

For example, we incorporate illustrations where a more playful style is appropriate, such as on landing pages, merchandise, or social media. However, the identity also allows for a more toned-down and minimalistic look for formal use cases like sales decks or white papers. The brand is versatile yet always recognizable and consistent, regardless of its application.

Brand application
Brand application

Brand guidelines

As part of the brand redesign for Datamolino, we delivered a comprehensive brand guidelines document detailing aspects of the new visual identity, including the color palette, typography guidelines, logo usage rules, imagery and illustration usage, and tone of voice guidelines. These guidelines serve as a clear reference for both their in-house team and external partners and affiliates, ensuring that the brand attributes are consistently applied across various mediums.

Brand Guidelines
Wireframes

Phase four

Creating website wireframes

Simultaneously, we began drafting the initial wireframes, focusing on content layout, functionality, and information flow (without yet incorporating design elements).

We developed modular website components adaptable to various content needs and usage contexts, ensuring consistency across different website sections. Compared to the previous layout, we made several adjustments, establishing a clear hierarchy among subpages and modules. At this stage, we also started to draft a preliminary website copy. Through iterative feedback rounds with the Datamolino team, we fine-tuned the wireframes, making them ready for the subsequent stages of the website’s visual and technical development.

Phase five

Messaging

Messaging and copywriting

This phase involved crafting clear and compelling text that effectively conveys Datamolino’s value propositions, enables visitors to easily access the most important information, and is also optimized for search engines. We revised the existing content from the old website, simplifying the text, crafting catchier headlines, and restructuring the information for better flow. The tone of voice was carefully crafted to reflect the character of Datamolino as a brand: simple, straightforward, no-fluff, yet friendly and helpful. Through several rounds of feedback, we fine-tuned the main messages, ensuring that each piece of copy accurately delivers the message and resonates with the target audience.

Hero
Features
Blog

Phase six

Web design

Time to finalize the wireframes with design elements. We developed a web design system to ensure all visual components adhere to a specific hierarchy. This system includes a comprehensive library of typography styles to maintain consistency and enhance readability across all pages, vector illustrations, and defined hierarchies for headlines, colors, and paddings, streamlining the development process and simplifying web implementation.

Both desktop and mobile versions of the website were designed and optimized to ensure proper responsiveness across all devices. The final web design is characterized by a clean, human-centric design, with a friendly and approachable feel for visitors.

Phase seven

Implementation

Implementation

The final stage of the project involved transforming the final web design into a live website. We developed the site on the WordPress platform, featuring custom coding, including a visual editor with an easy-to-use interface. This allows the Datamolino team to effortlessly edit content and create new landing pages.

Each section of the website is uniquely styled and optimized for efficient loading and peak performance. We strictly adhered to the design specifications and conducted comprehensive website optimization, including technical SEO to ensure proper environment settings and full responsiveness.

Next steps

Our collaboration with Datamolino doesn’t end here. A website is never truly finished, as they say, and we’re providing ongoing support to the Datamolino team, managing additional edits, creating new landing pages, and other marketing and branding assets.