How did we 'do good together for everybody' for Dimpact?
Together with Ilja Klees, an Experience Strategist & Designer, Blue Ocean Alliance developed a new website for cooperative association Dimpact. The website is built using Dimpact's own product and is completely in line with the newly designed brand story of the organization. In Dutch, Dimpact's slogan is 'Samen goed voor elkaar', which translates into doing good together for everybody. This idea is at the core of our project. Moreover, the project has five key components:
- Brand story: Who is Dimpact and what does Dimpact stand for?
- Look & Feel: How do we present the new brand story online?
- Interaction design: How do we create a seamless website experience for the visitor?
- Graphic design: How do we bring together the Look & Feel and the interaction design?
- Development: How do we develop a website based on the original product?
Due to great cooperation and experience with Blue Ocean Alliance, we have a website for the forseeable future that we are proud of. ‘Practise what you preach!,
How did we successfully tackle the five project components with Dimpact? By using five important characteristics of Dimpact!
Constant Companionship: Innovating and Unburdening
The project started with the redesign of the brand story. Who is Dimpact and what does Dimpact stand for? The brand story is the heart of your communication. Dimpact believes in the power of collaboration and co-creation. Especially in this time, where technological innovations, legislation, and social developments develop together at lightning speed. Because of this, it seems that people are growing further apart and human contact is getting scarcer. Dimpact stands for real connections between real people. It's a cooperation that focuses on better services with and for municipalities. You'll go faster alone, but together you'll get further. And that is at the heart of Dimpact: doing good for everybody together!
Co-creation: from, for, and by municipalities. Really!
You do not literally come across a brand story on a website. You just have to feel it. It must be noticeable throughout the whole organization. To ensure that the brand story of Dimpact was not just a fancy story, we involved the Dimpact team in formulating the ingredients for the brand story. We investigated which characteristics fit best and what motivates people to enter into a valuable relationship with Dimpact.
The new brand story fits perfectly with Dimpact and has been translated into a suitable Look & Feel (you can see a mock-up above). The municipalities have to be central. The projects that municipalities have come up with, started, and created together should be an inspiration for other municipalities or new potential member municipalities. With this co-creation, Dimpact innovates, unburdens, and strengthens its community. That is why you clearly see the cooperation between different municipalities on the new website.
It's great that cooperation is a strength that this brand embraces. All doors open to joint success!,
Effectiveness: Not just dreams
Only dreaming about improving services is clearly not enough for Dimpact. This company adds decisiveness. Dimpact wants the dreams of municipalities to be shared so that they can become realized. That is why everything is all about 'Joining in' on the new website. With these thoughts in mind, we started with the interaction design. The interaction design is about the functionality of the website, not the beautiful picture. That is why an interaction design always looks a bit boring.
In order to make a good interaction design, we determined the customer journey together with Dimpact. This is important because it allows us to understand who we are designing for and how the person behaves online. There were four factors central to the development of the prototype:
- Simplicity: We simplified the website structure, making the website easier to understand and use.
- Continuity: We ensured that the user can easily set the most logical next step in their journey. There is no end.
- Consistency: All elements in the website have been used in a consistent manner so that users quickly understand the website. This consistency also offers major advantages in technical development.
- Responsive: As always, the design of each device must look good, so that the user always has an optimal experience.
Connecting: You'll go further together
The stakeholders of the municipalities are central to the graphic design. A real connection with real people. It's about the story of the projects by municipalities and how other members can become inspired and apply them. And who can tell that better than the members themselves?
During the graphic design, we rebuilt the Look & Feel and structured it using an atomic design technique. Atomic design is inspired by chemistry. The design is divided into atoms. These small building blocks form molecules. Think of it as the bolts, nuts, legs, and tabletop (atoms) that together form a table (molecule). And the molecules, in turn, form more complex organisms. The table, chairs, benches, etc. (molecules) form a living room (organism). And with those organisms (living room, bedrooms, kitchen, etc.) you build your website (your house). We record all this in a style guide. In this way, we ensure that the design is consistent but also that many elements are reused, which saves a lot of development time.
In addition, we have adjusted the Look & Feel in certain areas because accessibility (equal access for everybody, including the disabled) plays an important role for Dimpact. Accessibility plays an increasingly important role in web design. For example, we have adjusted colors and font sizes so that the website can be used by everyone regardless of (visual) limitations.
Reuse: Practise what you preach
The brand story expresses exactly what Dimpact stands for; the Look & Feel fits like a fine coat, the prototype shows the website visitor the pathway, and the graphic design is accessible to everyone. Now it's time to develop the website.
The basis of the development is Dimpact's own product, namely WIM 2.0. This is also used by the members of Dimpact, the affiliated member municipalities. With WIM 2.0, municipalities have online accessibility quickly and at minimal cost. We were, therefore, able to develop the entire website in two sprints (within four weeks).
WIM 2.0 was central from the start. As a result, smart choices were made in the design process. And by using a style guide and the Block Management System we were able to deliver the website within two sprints.,
We created a lot of flexibility for dimpact with the website. We use the Block Management System for this project. This means that every page can be built using pre-developed blocks (layouts and components). This enables Dimpact to easily develop pages without the intervention of a developer. There is also the possibility to put together a set of blocks and have them appear automatically in different places on the website. E.g. a slider with the latest projects, or an overview of the latest news items.
Three takeaways from this project for you
Remeber these takeaways when you get started with your new website:
- Do not write a fancy story, but opt for a focus on character. Start with the power of your brand and act accordingly. Online and offline.
- Make sure your UX matches the promise of your brand. Have a design with a heartbeat and a design that helps your visitor achieve their goals.
- Start and learn! Provide a good foundation and develop your content, your signature, and your brand further and further. You are also not born an adult.
Do you also want a brand identity or a new website? Read more about the three major benefits that Blue Ocean Alliance offers. Or plan an introductory meeting directly with one of our online consultants via firstname.lastname@example.org.