As mentioned in our previous post, one of the initiatives we are working on this year is building a new visual system for Drupal.org.
It has been 7 years since Mark Boulton worked on a design plan for Drupal.org. Since then the web has come a long way. So has Drupal. Drupal.org needs a modern design, and the Product team at the Drupal Association has been working steadfastly on a plan to make that happen.
Building on insights from our user research and content strategy work, we have begun laying out a foundation for the future design system for the site.
Goal
Update Drupal.org to reflect the flexibility, modernity, and community of Drupal itself.
Design Principles
Before we started work on the design for Drupal.org we needed to iron out our process and the principles we wanted to keep in mind throughout our work.
To that end, tvn and I holed up for a weekend design retreat, which resulted in tons of post-it notes about what Drupal.org design looks like, what it should look like, and what we can learn from others -- to develop the design principles that will move Drupal.org forward.
Working on design principles for http://t.co/H0d2MHDCaS with @DyanneNova pic.twitter.com/XVZ0bgPlTe
— tvn (@tvnweb) July 25, 2015
After much deliberation, condensing, rewriting, and discussion with the wider Engineering and Communication teams, these are the principles we found to be our best guiding mantras:
Start with user needs.
We only design for real people. We verify their needs and let that information be our guide when designing anything.
Keep it simple. Focus.
We do less, but better. We focus on the areas we can have the most impact. Our designs are simple and clean, and our messages are clear. We strive for brevity and avoid clutter.
Be consistent. Re-use.
Our designs should be part of a consistent, cohesive system. We don’t introduce new patterns if we can re-use or improve any of the existing ones.
Be accessible.
Our designs should be usable by anyone, on any device or screen size, on a high speed connection or a slow network, by people with different native languages, and regardless of their accessibility needs.
Be relevant. Try new things.
Our designs are relevant and fresh. We keep up with the latest trends and are not afraid to try something new.
Iterate quickly.
We do small and quick iterations, continuously improving the experience. We experiment and test out different approaches.
Use Data.
We use data to support and drive our decisions. This includes analytics, data from testing and experiments, data gleaned through user research methods including interviews, surveys, and so on.
Work openly. Be honest.
Our designs are honest and authentic, and our intentions are transparent. We call things what they are. We respect our community values. We communicate openly and often.
Engage and empower.
We design experiences that unite our users and empower them to collaborate and do great things, because they can.
Be friendly.
We create friendly and welcoming environments. We want our users to feel welcome and supported.
Design Vision
Once we had our design principles in place we needed to move from those abstract guidelines to actual design plans for the website.
After DrupalCon Barcelona, we set aside time for another design retreat. This time tvn lost her voice on day 2, so miming and typing became a fun part of the workflow.
Our first step was to create a mood board of inspirational user interfaces to give us a beginning design language and a starting point for discussion.
Then we began our work with style tiles. I created four first drafts, informed by our mood board. One was softer, with varying shades of blue. At the other extreme was a largely monochrome design, with only tiny hints of the Drupal blue. After a few rounds of reviews and revisions we came up with the following visual system, which we feel matches our goals and gives a general idea of the mood, colors, and visuals we plan to move towards.
The general mood here was inspired by the idea of builders and makers working together to build something larger. We combine blueprint textures, single-width line icons, and an open typeface to make Drupal.org feel like the home to a continually improving framework.
We’ve kept the Drupal blue, and tweaked our green to bring it to a cooler shade. We’ve added darker tones for every color to give us more opportunity for high contrast.
The end goal is to make Drupal.org a useful space for contributors and users alike with a consistent quality of design throughout the site.
To that end, we’ve started work on a pattern library which will categorize all of the different design patterns used on Drupal.org. As we build out new patterns for new features they will be added to the library as well. The styles will be automatically inherited from the theme, which will make maintenance of the library as simple as adding relevant content to a page.
Iterative Approach
To support our current prioritization we knew we would need to use a very iterative process for launching design updates. Our strategy is to make design updates as we can when a new feature is prioritized. As each area of the site is functionally improved, it receives visual improvements as well. You’ve seen some of these updates already in the Drupal 8 launch and in the smaller updates to Drupal.org since last November.
With the Drupal 8 launch came a re-styled header for Drupal.org.
Release pages also received a small update to the download area, with clearer calls to action.
Shortly after that, we held a membership drive with a banner and a front page region highlighting community members. And just a few weeks ago we set up a new banner for promoting community elections to the Board, which can also be used for any important announcements going forward.
Next Steps
Our next big project is Documentation. We’ve been toiling away on these features for months now as part of our overall content restructure work. After the first pass of wireframes and design mockups, we collected input from documentation users via usability testing held remotely and in person at the Drupal Association office in Portland, Oregon, and at DrupalCamp London. Based on all the feedback, we've done a few revisions on our initial ideas and designs. We've spoken with a wide range of community members, from newcomers to masters, and their input was invaluable for arriving at a design that really works for the user.
You can see some of the new patterns we’ve begun work on in this mockup, such as the documentation section header and tags. We also have a pattern for related content which isn’t visible in the image. In our usability testing, we found that wayfinders were incredibly important to the experience of documentation, so we spent considerable time on improving the breadcrumbs and menu navigational patterns before arriving at what you see above.
How to get involved
There are a number of ways to get involved in improving Drupal.org. You can read more about general volunteering here.
If you’re interested in joining our usability testing sessions held both remotely and in person at major Drupal events, please fill out this form and we’ll reach out to you when the next session is being planned.
To post an issue about design on Drupal.org, use the project issue queue at Drupal.org Design. This issue queue will replace the Bluecheese theme queue going forward as a central place to report issues or inconsistencies with Drupal.org design. Meta discussions of design on Drupal.org are also welcome in the queue.
If you’d like to participate in quick design discussions about Drupal.org and be available to give feedback on upcoming design decisions, join us on Slack at channel #drupalorg-design.
As we incrementally roll out new features, you’ll see Drupal.org move ever closer to our updated visual system. Thanks for coming along for the ride!