Background and goal
Our client is Drupal, a content management system that powers over a million websites. Drupal currently does not have a layout builder as part of Drupal core, so in this project, we redesigned the feature to allow users to visually construct the layout and contents of a page. Through this project, we helped Drupal to gain insight into the Content Editor and Layout Builder. This includes background research, ideation, design, prototype, and user tests.
Our goal is to redesign the content editing and layout editing features of Drupal to offer better discoverability and information hierarchy and to encourage a better user experience.
Since Drupal is a complex content management system containing a variety of powerful functions, our team decided to spend the first two weeks learning how to use the tool and understanding the project goals. In this phase, we discussed with the stakeholder about the landing experience as a new user to the Drupal Platform. Meanwhile, we studied the competitors on the market and shared our insights from the competitive analysis with the client.
As a result, we decided to focus on improving the features of content editing and layout builder because our client was undertaking the process of leveraging the user experience of these two features.
We created a low-fidelity prototype of two improved features - content editor and layout builder - using Balsamiq. This low-fidelity prototype also helped us communicate our ideas to the client better and more efficiently.
We used Sketch, Invision, and Marvel to create our high-fidelity prototypes. Unlike the original Drupal platform, where users need to select a particular component and be led to another page in order to edit, users now can edit everything and preview everything under the same edit mode. The user flow becomes better and more universal. For instance, under the content-editing mode, users can easily see which parts of the contents are editable by hovering over each editable element on the page. Additionally, they can change the content by clicking on the editable contents and upload pictures directly to the page by clicking on the image element.
Under layout-editing mode, users are able to add sections to the page by choosing from different column layouts. After sections have been added, users can also add blocks into each section. There are a variety of block types offered by Drupal such as pre-existing articles. To add pre-existing articles onto the page blocks, users can simply search articles and click on the ones they would like to put onto the page. Blocks and sections in the layout builder are drag-and-drop-able to provide an intuitive process to the users.
User Testing
We conducted user testing sessions with 4 participants that are Drupal users (content editors, designers and programmers). Before the user testing sessions, we created a testing protocol where we designed tasks for users to complete during the process and provided instructions for note-taker to be aware of. During the testing, we followed the testing protocol to ask users to complete preset tasks using the prototypes, and took notes about participants’ thinking process and their general thoughts about the prototype.
We gathered significant insights from user testing sessions and summarized them into five main ones.
Throughout the semester, we have successfully met our client’s requirements and expectations and delivered a good amount of work. Client also expressed satisfaction with our work after our final presentation. While due to time constraint, we were not able to iterate the design after user testing, we are expecting to see some of the insights we received from user testing to be implemented into the next prototype of Drupal platform.