Creating a User-Centered Website
In response to the COVID-19 pandemic, the Redfin Solutions team has shifted to working remotely. Because of the nature of the pandemic, some of our clients have tight deadlines in order to get information out to people as quickly as possible. A recent client with a special need for a quick turnaround is the Rural Aspirations Project, a non-profit in Maine committed to connecting parents and educators with resources, support, and networking opportunities provided by trusted local organizations. When the schools closed, parents and educators’ need for help grew exponentially.
Rural Aspirations came to us with the idea for Community Learning for ME. The goal of this project was to create a tool for educators and families to find reliable resources specific to their needs. We knew that for this to be successful it was crucial to keep our focus on the user. At the same time, we had to finish the project within two weeks, including design and implementation, all while adjusting to the new normal of remote work.
User personas + User journeys
Our first step was to get acquainted with the user audiences. Luckily, those at Rural Aspirations are very connected with who their users are, as they work with them personally. In their documentation for the site, they had already included a mix of what we refer to as user personas and user journeys. These outline rough groups of people who will use the website, and the situation they might be in at that moment.
One of our user personas was Caitlin, a mom of two kids, one in second grade and one in eighth. Her partner is an essential service worker and she has a job where she has to be in meetings during the day. She is overwhelmed by work and childcare but wants to help her kids more.
Each persona allows the Redfin team to understand a little bit more about one type of person that might be using the site including basic information, the challenges they face, and their goals. We also wanted to understand how they might be using the site – the user journey. For instance, when Caitlin uses this site she wants to get to content for her kids quickly (she may be minutes away from an important meeting) and not have to spend time figuring out if it’s safe and quality content. She would also benefit from discovering that there are resources to help her, in case she wanted to come back when she has some time.
User flow
Once we started wireframing (the first step in the design process where we map out different pages the website will need), we decided we needed to look at the user flow. The main difference between a user journey and a user flow is that the user flow takes a closer look at how the user interacts with the product once they are on the website. We looked at the main entry points of the website: the homepage and an individual resource, taking into account the possibility of these resources being shared on social media. The challenge was to orient the user, and then create a balance of quick access and discovery. We provided several paths from the homepage to the end goal of finding a resource, and included those filterable resource landing pages as the primary links in the global navigation. From an individual resource, we provided a link back to the filter landing page in order to create a loop from the filtered page to the different resources until the user found the right one for them.
Wireframes, annotated designs, and building in Drupal
One of the user personas that Redfin Solutions always anticipates is a content editor, so we kept the user experience in mind even while building the administrator side of the website. We used Drupal to create a content editor experience focused on clarity and ease-of-use, as well as automation, so that Rural Aspirations could focus less on updating the website and more on their jobs. We also gave contributing organizations the ability to add and update their own resources, making use of Drupal’s user permissions to limit them as needed.
One aspect of this project that made it successful was having key members of the team included in every step. We started meeting with our clients with a lead developer, a designer, and a project manager. Later in the building process we would involve others, but having both a design and technical architect from the beginning and throughout the entire project was crucial. It ensured we didn't waste time designing features that couldn’t be built in time, and that features were prioritized and adjusted based on the users’ needs.
The Redfin team was also able to test out some of our design processes and add new ones to make the most of remote collaboration. We used Invision to annotate and share designs, and we tried out Invision’s live whiteboard tool Freehand for the first time to create and share wireframes. Since we’re used to working together on a whiteboard at the office, this helped us to avoid designing in isolation and get quick feedback from each other.
Rural Aspirations’ main concern is helping people through this stressful and overwhelming time. As we worked on this project we realized the logic of sorting through these resources would be complex, but that its success would depend on making it all look simple, thus removing any extra stress from the user. With more time to spend on this project our next step would be to test the success of this tool with google analytics and live user testing, but for now we have created calls for feedback throughout the site. In times of crisis it is particularly important to focus on users first and building sites that relieve burdens.
Support the Drupal Association During Uncertain Times
First, I want to thank everyone in the Drupal community for all you have done in the past to support each other and the Drupal project. I was fortunate when I started my Drupal journey back in 2011 to have been introduced to and embraced by the Drupal community right from the start. I have met so many incredible people who I now consider friends. My life wouldn’t be what it is today without so many of you. Thanks to the awesome community for that.
As one of the community-elected members of the Drupal Association Board of Directors, I am reaching out to the Drupal community for your support.
Please start by taking a few minutes to read the recent post by Dries Buytaert (founder and project lead of Drupal) and the recent post by Heather Rocker (Executive Director of the Drupal Association) regarding the uncertain times which the Drupal Association faces with DrupalCon Minneapolis due to the COVID-19 pandemic. These posts explain why it is so important for folks to step up now and help support the Drupal Association.
So how can the Drupal Community help?
What can an organization do?
- Join the DA’s Supporting Partner Program.
- Join other leading sponsors in committing your DrupalCon Minneapolis sponsorship funds regardless of the outcome of the current crisis by email sponsor@association.drupal.org.
- Make a Charitable donation.
What can an individual do?
- Join the DA as an Individual Member.
- Upgrade their membership level.
- Make a Charitable donation.
What can everyone do?
- Reach out to companies and organizations that you support that depend on Drupal and encourage them to join the Drupal Association as a Supporting Partner or to make a Donation. So many great organizations depend on Drupal for their websites and functionality, yet do not know that the Drupal Association exists or understand why supporting the DA is so important to the Drupal project. (Template to potentially be used as a starting point for your email)
- Reach out to those in your local Drupal communities to encourage folks to learn about how the Drupal Association supports the Drupal project and why it’s important for everyone in the Drupal Community to help the Drupal Association during these uncertain times.
- Share this message on social media to help us reach as many folks as possible.
Thanks to all the incredible folks in the Drupal Community for your help. I look forward to seeing everyone online for now and can’t wait until we can meet in person once again. Stay safe and healthy!
Leslie Glynn
Drupal Association At-Large Board Member
Drupal.org - leslieg
Display Multilingual Drupal 8 Views
The Drupal 8 core Views module is a big part of why Drupal 8 websites work so well. It takes advantage of Drupal’s structure to create features from recommended content to directories and search pages. However, you can quickly run into complications when implementing a view, especially if your website is multilingual. So get ready to learn how to display multilingual Drupal 8 views of entities (such as nodes, media, and taxonomy terms) as well as entities indexed through the Drupal 8 Search API module.
Use case
A multilingual Drupal 8 website with these guidelines:
- the default language is English
- users can choose to view the site in French or Spanish regardless of available translations
- if an entity does not have the requested French or Spanish translation, then display the English version
What could go wrong with multilingual Drupal 8 views? It starts with how views get data and how translations are stored in Drupal. The database contains separate rows for each translation of an entity, so when the view queries it without specifying a language, it can return duplicates of the same entity. However, if you filter by the page’s interface language, the database will only return entities translated in the page’s language. Additionally, if this is a view of indexed entities, then the language rendering options which fix the above issues are not available. Because of this discrepancy, regular entity views and indexed entity views need different solutions.
Regular entity views
If you are unfamiliar with adding a filter to a view, check out these instructions from drupal.org.
1. In the view edit page, find the Filter Criteria section on the left side under the Fields section. Click Add to get the Filter Criteria pop-up.
2. Next, select Translation Language and click Apply.
3. Then, in the next pop-up, select Site’s default language, and click Apply again.
4. Back on the view edit page in the Language section, click on the setting underneath Rendering Language.
5. In the pop-up, change the select box to Interface text language selected for page and click Apply.
6. Save your view!
This means that all the entities in your view will display in the requested language, but default to your default language so nothing gets left out. This filter also removes any duplicates, because the language is held constant during the query.
Keep in mind that if any entities in your view do not have a version in the default language, they will not show up, even if the page is set to the language they do have. This was not an issue for the example site as all the content started with English and was later translated, but this could create problems if your content is originating from multiple languages.
Indexed entity views
This was done using version 8.x-3.8 of the Search API Solr module. Since Search API Multilingual Solr Search was not merged into this module until 8.x-2.x, older versions of Search API Solr may not have this functionality (namely the “Language (with Fallback)” field which was added to fix this problem).
1. In the admin menu, go to Configuration > Search and metadata > Search API.
2. Edit the search index your view is pulling from and go to the Fields tab.
3. Click Add Fields.
4. In this pop-up under Global fields, click Add next to Language (with Fallback).
5. Save this configuration and re-index.
6. In your view’s filter criteria, add the Language (with Fallback) field and set it to Interface text language selected for page.
Using multiple languages complicates everything in Drupal, but the Drupal community is always developing patches, updates, and modules to make it easier. If you have a multilingual Drupal website in need of custom solutions, see our contact page to get in touch!