In this edition of Best in WordPress Design, we chat with Pedro and Felipe from Bloom, a research and interaction design studio based in Chile. The Bloom team has completed a diverse portfolio of WordPress projects, ranging from small-scale websites to complex, multifaceted digital ecosystems. One example of their work was the complete redesign of Universidad del Desarrollo, including implementing a site generator to create over 200 websites for this renowned university. They also used WordPress for their own site, an evolving showcase of Bloom’s identity and design philosophy. Read on to learn more about their experience working with WordPress to express their point of view.
Can you tell us more about your background? How did you get into design?
While we identify ourselves as an interaction design office, our expertise encompasses a broad spectrum of services, providing end-to-end solutions that span from ideation to technical implementation. Our team’s background is a blend of graphic design, psychology, and programming, which informs our approach, allowing us to create deliverables that are not only visually appealing but also deeply empathetic and functionally robust.
The redesign of Universidad del Desarrollo’s over 200 websites sounds like a big undertaking. What challenges did you face during this project?
The redesign spawned several different projects, so one of the hardest challenges was how to share functionalities among them, maximizing the efficiency of the process. To achieve this, we got to leverage some very powerful features from WordPress.
We split some features as plugins that can be toggled by each site, and created mu-plugins for the more foundational functionalities, using Composer to require them as dependencies. One of the more important was a blocks package that provides several easy-to-use UI components to build the different pages of each site. We created several parent themes to provide a unified styling of all sites, with the possibility of deep customization through child themes.
In addition, we are making extensive use of the REST API infrastructure, which provides us with a standardized and self-documenting way to post updates and share information between the sites.
As an interaction design studio, I know you value user-friendliness. How did you ensure that both end-users and content editors had a positive experience interacting with the redesigned websites?
This process started when the block editor was still a feature plugin (around 2018), but we bet heavily on the transformative experience that it would mean for both end-users and content editors.
We tailored a WordPress experience focused on enabling editors to create visually appealing and engaging content and serve their audience effectively, creating blocks that emphasized content design and information reutilization, while requiring a low effort on design choices (which we’ve been adding since to allow for greater flexibility).
To further promote good design practices and empower content editors, we created a documentation site (WordPress-based) that covers the usage and good practices for the block editor and other features of the sites, such as managing multilingual content and publishing academic programs.
What are some of the design elements or strategies you’ve applied to Bloom’s own website that make it feel distinct?
In shaping our digital presence and our approach to working with clients, we’ve adopted some concepts that reflect the intentional design of our brand. Each project starts with a fresh perspective, much like a blank canvas, enabling us to shape our approach to fit the unique contours of each client’s vision. Our website’s monochromatic palette visually symbolizes this, providing a neutral canvas against which the vibrant colors of interactive elements can stand out, mirroring the natural progression of a bloom.
Our communication style is straightforward and aims to maintain open and transparent dialogue throughout the project’s lifecycle. This commitment to clear communication is echoed in our choice of typography (Mangueira), which was selected not only for its legibility and support of our content’s visual hierarchy but also as a structural inspiration for our iconography and other graphic elements.
These decisions are also a reflection of our operational ethos. The design of our identity is not merely a visual refresh but a reaffirmation of our commitment to engaging with projects in a way that is methodical, precise, and always mindful of the broader ecosystem in which our deliverables operate. Our dedication to this approach ensures that our work is not only functional and aesthetically pleasing but also deeply meaningful within the contexts it serves.
Could you share some advice for aspiring WordPress designers and developers?
For developers
Open web standards are the bedrock of what we do; they form the foundation upon which all web projects, including WordPress, are built. Developing a deep understanding is not just about mastering the basics; it’s about equipping yourself with a versatile toolkit that enables you to analyze, understand, and adapt to a wide range of scenarios on the ever-evolving landscape of web technologies.
Secondly, learning about and applying open-source methodologies and tools is essential for creating transparent and efficient processes. This goes beyond simply improving team workflows; it’s about nurturing a culture of collaboration and empowering clients to avoid dependency on a single supplier. Our goal is to build long-lasting relationships, making certain that clients choose us for the quality of our joint work. This commitment to openness is crucial in building and sustaining trust.
For designers
Guiding design decisions on factors that impact the accessibility of the things we create is a fundamental responsibility of our role. WordPress has always done an important job of promoting this subject, from the semantic markup proposed in the documentation to the deep efforts in creating an accessible admin interface.
Following the interaction patterns proposed by WordPress allows the creation of robust and consistent themes for users and editors. The use of theme.json as a style configuration API provides a powerful foundation for crafting beautiful and highly flexible websites, as it allows site editors to leverage the many options available on the block editor within the visual parameters established by designers.
Many thanks to Pedro and Felipe for agreeing to chat with us. Be sure to go explore their website and learn more about their work!
Automattic Design 