Autonomy & Flexibility
in website operating
Full control
over meta data, structure & such
Concentration on the idea
rather than the technique
Maximum control over your own positioning
Case Study: Open Strategy Partners GmbH
When a technically savvy user single-handedly (almost) implements the relaunch of its medium-sized company's online presence with toujou, a true special case emerges. He's the unicorn in the customer portfolio, eagerly and with as little interference from service providers as possible, building its website entirely to its liking. Initially, even this customer thought he was just commissioning a redesign.
This case study also stands as an example of the scenario where project managers not only oversee website projects conceptually but also are part of the implementation. If you also like to get hands-on beyond just designing dummies for your customer or clients, be sure to keep reading.
OSP: A content marketing expert with an international client base
Open Strategy Partners GmbH (OSP) is a B2B content marketing agency for digital products and services based in Cologne, Germany. OSP's mission is to blend technology with marketing in a way that aligns a brand's vision, strategy, and underlying technology with its product communication. This is particularly helpful for providers looking to communicate complex processes in a user-friendly manner to potential client.
Through various workshops and an international team of writers and content experts, the "OSPeas" develop communication strategies for different channels. Ideally, clients in the tech industry are equipped with the skills and templates they need to tackle future content tasks independently and confidently.
Disclosure
OSP is part of the global TYPO3 community, in which toujou also actively participates. Valuable content tips and strategies for readers and visitors are regularly published in German by the OSP-Blog on the toujou blog.
Background: Repositioning after self-analysis
As part of the OSP concept, the aim is to refine the values of their clients' products using a specially developed Value Map, allowing them to apply the structures developed in workshops and projects to their daily communication. This Value Map will be further examined as part of the case study.
So, after five years in the industry, OSP's founders, Tracy Evans and Jeffrey A. McGuire (known as "jam"), decided in early 2021 to scrutinize the positioning and messaging of their own brand and develop a new communication strategy. With a new website, this conceptualization was intended to come to life visually and tangibly. Thus, OSP became its own client, with toujou being the chosen means.
"We reflected on who we are and what we stand for. We really took the time to rethink our services and offerings," 'jam' explains. "Switching to toujou was a wonderful opportunity to do this. We had exactly the right gaps to fill because we could create the structures and the menu ourselves, which is part of what we offer to our clients."
The goal: Less support ticket backlog, more autonomy
The challenge was to find a system that matched their needs for flexibility and allowed them to design their website themselves, without relying on resolving support tickets. The moment of inspiration came when they learned about a system within the TYPO3 community that was based on the open-source CMS: toujou. "An extremely well-made service that gives us as business people all the tools to spread the information," recalls 'jam'.
The scope was on making their own business values visible online without relying too much on the technical partner. This was aimed at avoiding waiting times and focusing more on actually inputting the content.
'jam' describes himself as a "technically savvy guy". His expertise comes from nearly two decades of working with software, CMS, and websites. He was part of the team that developed a SaaS version of a CMS. Although he's not exclusively specialized in TYPO3, he has a preference for this system. Additionally, 'jam' is a regular speaker at various tech conferences, lately more focused on Drupal and TYPO3 contexts.
Revamped Communication
The Evolution of the Service Menu
July 2021: Beneath the services landing page, there's another subpage.
May 2023: The services have been diversified across various levels and thematic sections. The case study package, along with two additional offers, is now found under the offers section.
New Workshop Sorting
July 2021: Workshops are part of navigation level 2
May 2023: To give room to the OSP Value Map, workshops are being sorted under services and are also undergoing a rebranding.
The special thing: Design & content are done inhouse
I love the design system behind toujou. The structure of the page types and elements is logically aligned, and their behavior is expectable. It made filling in the placeholders infinitely easier for me.
That's what 'jam' has in mind referring on the library, which provides over 150 elements on every content page via Wizard. Distances between and the logical arrangement of text-image ratio or card-to-text are predefined within these elements in toujou.
In addition to the included first-level support, toujou also offers various contingents and hourly rates for transferring content from A to B during a relaunch. These contingents are commissioned, for example, when design adjustments deviate from the standard or when companies lack the resources to build their website alongside their daily business.
OSP approached their own project quite differently: "A customer who completely implements its website editorially himselve is certainly the exception," reflects Viviane Gebelein from the toujou service team on the collaboration with Open Strategy Partners. "They knew what they wanted, and with our documentation and tutorials, we were able to help them in most cases. In addition, the design adjustments via CSS, which are normally outsourced to creative agencies or our frontend colleagues, were almost always implemented by 'jam' in this case."
Headlines with and without CSS adjustments
Example of autonomous design changes
On the landing page shown below, "Services" functions as an H3, while "OSP Services Overview" is the headline designated as H1. Without further design changes, various options of a text editor are available for the standard display. For instance, both lines are "classically" left-aligned, stacked on top of each other in different, predetermined font sizes and styles.
With design adjustments using CSS (Custom Style Sheet), OSP has depicted the headlines in differently colored boxes: "Services" in black font on a white background with a border, and "OSP Services Overview" in white font on black. Both headlines appear in uppercase and are centered, with the upper box overlapping into the lower one.
Landingpage headline without CSS
Landingpage headline with CSS
Below, you'll find the CSS code for the style changes listed above.
Please note: Detailed design requests can also be commissioned with the toujou team. These are typically stored in the 'Customize Template' tab of your toujou backend. CSS-savvy professionals are also welcome to work independently here.
/* CHAPTER */
.chapter {
padding: 4rem 0;
}
.chapter.service--header--chapter,
.chapter.offer--purple--chapter {
padding: 2rem 0 0;
}
.chapter--textpic-spacing .textpic {
padding: 2rem 0;
}
.basic-page-top--chapter {
text-align: center;
}
.service--header--chapter h3 {
background: #fff;
color: #000;
border: 4px solid #000;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
line-height: 19px;
padding: 4px 12px;
display: inline-block;
width: fit-content;
text-align: center;
margin: 2rem auto -0.7rem;
position: relative;
z-index: 3;
}
.service--header--chapter h1 {
background: #000;
color: #fff;
border: 4px solid #000;
font-size: 2.5rem;
font-weight: 400;
text-transform: uppercase;
padding: 1rem;
display: inline-block;
text-align: center;
margin: 0 auto 1rem;
word-break: break-word;
}
.service--header--chapter p {
text-align: center;
font-size: 1.25rem;
line-height: 1.75rem;
}
css
The Masterpiece: Visualization of the OSP Value Map
As previously mentioned, the Value Map employed by OSP was given a prominent position in the main navigation of the new website. The landing page explains how OSP collaborates with customers to develop a set of values that form the basis of all communication. When we talk about "values," we mean the worth that a feature, attribute, or product offers to the consumer of the digital service. "Every aspect of your product becomes structured data distilled into reusable logical-functional groups, product positioning, and all your communications," as stated on the website.
To visualize such a Value Map, OSP translated its own practices into a Value Map. Since such a sophisticated system of groups, areas, and subgroups cannot be represented by any known element – or otherwise – 'jam' and Tracy, in collaboration with the UX experts from toujou, developed a solution: an accordion within an accordion.
It all started with a PDF...
How do you take a – at least visually – complex process online and present it in a way that the thematic groups can be understood as a whole, but also individually? That was the basic question posed by OSP and jointly developed with the UX experts from toujou. The starting point for discussion was a PDF (seen on the left). What emerged was an HTML-based element, which has undergone several revisions since its initial conception by the toujou developers.
In addition to the clickable element, visitors are provided with a PDF download – one based on the Online Value Map.
The result: "An outstanding accelerator tool for professionals"
The opportunity to redefine themselves communicatively went hand in hand with the requirement that technology, service, documentation, and individual desires (or their implementation) were addressed simultaneously in toujou. Technical loops were thus not the main focus of the realignment for OSP. At least not one that significantly influenced the launch of the new website.
What OSP offers to its clients as a content framework to communicate the products, 'jam' and his partner Tracy found a suitable analogy for in toujou as a technical framework.
Thus, for Open Strategy Partners, the relaunch with toujou resulted in three significant advantages:
- Autonomy and flexibility to operate a business website.
- Full control over the entire website structure, metadata, images, menus, pages, and subpages.
- Conceptual focus on presenting their own company.
toujou is the best CMS-as-a-Service implementation I've ever used. I think it strikes the perfect balance between performance and complexity of a fully-featured CMS. It also provides sensible default settings and takes care of all the tedious but important things for me. I believe it enables me and at the same time compels me to focus on the business value of my website, which for most people is about showcasing who we are and what we do.
Making toujou even better & valuable communication tips
Integrating a website relaunch with a communicative repositioning approach quickly proved to be a significant advantage for toujou. As users become more proficient in the system, their inquiries and feedback become more qualified. "It provides us with valuable insights into the behavior of the elements used and gives good impulses for their further development. Thanks to 'jam', toujou is a better product," says Viviane Gebelein from toujou.
From ordering a demo to launching the first version of the new OSP-toujou website, just under two months passed. Since the go-live in August 2021, openstrategypartners.com has remained in constant flux. Naturally, OSP continues to agilely respond to the needs of potential customers and market movements. With every new toujou feature, the transformation never stops technically.
Openstrategypartners.com is also a special website because its creators don't hold back their knowledge. Their entire communication strategy and approach are documented and transparently offered. The Value Map, various author guides, and blog posts on a range of topics are fully accessible to visitors and thus immediately applicable for their own communication.
Bringing your own vision to life every step of the way
Being able to provide communication professionals with the tools they need to bring a very specific vision to life and collaborate on it together, that's something our support team of course takes pride in.
In mythology, unicorns are said to possess healing and empowering abilities... From our perspective, you can never have enough of that.