OBM | Sjoerd Griffioen

OBM

OBM is full service marketing agency which helps in building, activating, and shaping your organization or brand. They are a one-stop-shop for strategic issues, technical solutions, and creative marketing communication expressions.

Responsibilities

UX/UI Design, WordPress

Deliverables

Concept, Visual Design, Prototype, WordPress website

Tools

Figma, FigJam, Photoshop, WordPress, Elementor, Weglot, Asana

Translate the new OBM branding into a website

The OBM agency transformed from a Fanbooster software reseller into a full service marketing agency. This transformation meant that their branding was no longer fitting their core values.

A rebranding was done, to better fit their new identity. Orange was replaced with yellow, and a brand-new icon was created which represents their expertise in multiple disciplines and their ability to help you with the full marketing journey. This new identity also had to be translated into a new website.

Problem and solution

Creating a design system and CMS from scratch

The first obstacle was to transfer the new branding into a design system that could be used for web and mobile. This meant we had to build new components using the existing brand guide.

A new story also has to be told, besides the new look. This meant we created a structure for the website, including all the services.

Flexibility and marketing tools are a high priority for OBM. This meant that we easily have to implement tools like MailChimp or Forms. Adding new pages, portfolio items or blogs is a necessity as well.

A WordPress website using Elementor

Combining flexibility with an advanced design (which will probably be updated quite a lot) means we had to pick a commonly used CMS. This website is not managed by developers, but by marketing specialists.

To fit these needs, we build a website with WordPress and Elementor Page Builder. WordPress being a well-known and user-friendly CMS allows nontechnical employees to get in on the action.

Elementor is chosen since it gives us the ability to create the planned design, but it also allows to update the designs easily and to reuse already created components.

Design system

The design system is a web based translation of the newly created brand guide. We use the yellow color as our primary color to attract attention. Blue and dark blue are used most commonly throughout the website, with the Salmon color being used as a supportive color as well.

All these colors are also used in the creation of the gradient, which is seen in the icon and on multiple places on the website.