Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Dec 01 2020
Dec 01

Early in 2020, as COVID-19 began to seize headlines, counties throughout California were on the front lines as “hotspots,” and citizens of Marin County were paying close attention. 

Understanding the critical importance of conveying alerts and daily updates in a visually powerful format that could be quickly grasped without scrolling through tables or performing calculations, Marin County Health and Human Services did a search for best-in-class solutions, and reached out to Promet Source. Promet had recently received positive coverage for designing COVID-19 sites for counties in other parts of the county.

An essential objective for the project: speed. The rate of new cases was rising every day and with close to one fourth of the population over the age of 65, accurate information was viewed as a critical strategy in containing the spread and saving lives.

Promet quickly got to work in partnering with Marin County Health & Human Services to redesign their coronavirus Information Drupal website.

Marin County CA Covid 19 website

The success of the website was a function of many factors. In addition to rapid design and launch the Marin County Covid site Promet leveraged the following Drupal modules, which have been central to its success. 

  • The Drupal Paragraphs module provided non-technical content editors with powerful capabilities for easily making updates and revisions to pages.
  • The Drupal Switch Page Theme module enabled an iterative rollout of the site on a page-by-page basis.
  • The Drupal DraggableViews module helped in organizing the FAQs page and reordering as necessary via Drag and Drop functionality. 
  • Drupal Search API provided the intelligence that informed the most effective ordering of the FAQs page. 

Component-based web design accelerated the pace of development by enabling developers to reuse and leverage design components rather than theming each page from scratch.

Another essential factor was the selection of Pantheon as the hosting partner, which resulted in significant cost efficiencies due to  Pantheon’s support for the public health mission of the site. 

Read the full case study on the design and launch of the Marin County, Calif., Covid-19 information site. 

Do you have a high-stakes objective that calls for the expertise of an innovative team of designers and Drupal development experts? Contact us today!

Nov 24 2020
Nov 24

Thanksgiving this year will be different from any we’ve ever experienced, but then again, the same could be said for pretty much every aspect of 2020.

At Promet Source, we attract talent from all over North America and the world, so we had a bit of a head start navigating remote work requirements. We were still mindful though, every day, of the many ways that Covid-19 was having an impact on our teams and our clients. 

During a normal year, we look forward to the opportunity to connect during conferences, events, and client engagements, but as was the case for all of you, we had to count on Zoom calls and technology to do a lot of the team building and cultural heavy lifting

We made a point, whenever possible to fill in the gaps, show appreciation, and exercise empathy. More so than ever before, we worked on cultivating the best that is within us, emphasizing truths such as this one: 

Doing good holds the power to transform us on the inside, and then ripple out in ever-expanding circles that positively impact the world at large.  
--Shari Arison

Little surprises and humor went a long way this year. During the height of the pandemic, we designed a t-shirt to encapsulate how we were all feeling about being stuck at home during quarantine while continuing to work remotely. The shirt simulated a concert t-shirt boasting on the front: “Promet Source World Tour - Remote Edition”. The joke, of course, is the location for every tour date listed was “HOME.” We sent this t-shirt out to our staff and what happened, as a result, was quite unexpected.
 

Promet 2020 t-shirt

Promet's 2020 Company t-shirt to commemorate remote working during the pandemic and resulting quarantine.

Promet team Zoom photo

Our team members who received their shirts started taking selfies of themselves and Slacking them to the greater team. So we called a quick Zoom meeting and snapped a screenshot of our North American team to suffice for our pandemic team picture during a time we couldn't get together for an actual group photo. 

Promet Philipeans team

Before we knew it, our worldwide teams started taking pictures of themselves at their desks and in scenic locations and created a new image of them and sent it to our headquarters located in Chicago to share with the rest of Promet.

Something that started out as just a fun company t-shirt sent smiles across the world and back during a time when it was most needed to bring teams together and unite everyone during trying times.

As we plan for a Thanksgiving holiday that’s likely to have a lot of empty seats, our commitment to each other and to you is that we will continue to do good, stay connected, and practice the power of gratitude.

A happy and healthy Thanksgiving to you, from all of us at Promet Source.


 

Nov 12 2020
Nov 12

When a well-entrenched regional business grows by continuously building upon a track record of service, integrity, and quality, the website needs to help reinforce those values. That was not the case at Binford Supply for many years, which maintained a solid market position despite an outdated site with minimal content and functionality. 

Realizing that the $100 million company with 11 branch locations throughout Texas, Oklahoma, and Colorado had outgrown it's website, and that the customer experience could be vastly improved upon, Binford reached out to Promet Source. 

Working closely with Promet Source, a vision for the development of a new WordPress site began to take shape. BinfordSupply.com now incorporates high-quality photographic images, and a photo gallery highlighting the wide range of products and markets that the company serves.

Binford supply products

Encouraging interaction with visitors, the site includes invitations to request a quote and provides information on many ways to get in contact with Binford at any of their several locations. Job seekers are also encouraged to upload their resume and apply for work from a page that emphasizes the company’s values and the advantages of working there. 

The vast leap forward in design and functionality has had a significant impact on sales and new supplier relationships. Effectively positioning Binford Supply as an attractive company with which to join forces, the site has also resulted in a surge of qualified applicants.

Looking for help in taking your organization to the next level with a WordPress website that effectively highlights your company’s strengths? Contact us today.

Oct 29 2020
Oct 29

Heuristics is one of those words that sounds extremely academic, but whose meaning is refreshingly simple. Essentially, heuristics refer to rules of thumb, mental shortcuts -- or the kinds of decision-making frameworks that we engage in every day. Sometimes we do so consciously, other times, we act in a more automatic manner, based on past experience. 

In the world of website UI/UX, heuristics are often discussed from the perspective of a website’s “must haves,” and they can serve as very helpful guidelines for ensuring that all bases are covered when developing a site. 

Close attention to usability heuristics is key to creating a user experience that optimizes first impressions and maintains engagement.

 

Heuristics for Website Usability

At Promet Source, we’ve consolidated site heuristics into nine key points:

  1. Seek Alignment
  2. Engage Visually
  3. Provide Cues
  4. Set Expectations
  5. Focus on the Familiar
  6. Simplify Complexity
  7. Guide Accurately
  8. Anticipate Errors
  9. Ensure Accessibility

Get Promet’s 9-Point Heuristic Checklist for Site Usability

Heuristics checklist snippet
This useful resource presents key points of usability best practices, along with questions to help avoid oversights.

 

As a practitioner and proponent of Human-Centered Design, I tend to view site usability heuristics from two angles. The first, of course, are the guidelines that we work to keep top of mind over the course of designing and developing the UI and UX of a site with the intention of optimizing usability and creating a user experience that achieves a clients’ key objectives and aligns with their brand. 

The second and related perspective on website heuristics is the realization that just as we as web designers and developers operate from set of guidelines that need to become second nature, users also engage in their own set of heuristic mental shortcuts every time they land on a site. Chances are, they are not particularly conscious about doing so as the make decisions concerning: 
Am I going to engage with this site?

  • Does it contain the information that I need?
  • Should I keep scrolling?
  • Do I want to click on this link?
  • Is this interface going to be easy or trip me up into some frustrating sort of loop?
  • Should I just order now?
  • Do I want more information?

Human-Centered Design Connection

Sharpening the focus on empathy toward the users who land on your site is an essential objective of human-centered design. Site heuristics provide the best practices starting point. 

We’ve found that paying attention to site heuristics is also an important step to keep from falling into the “curse of knowledge” trap. Those who design a site or who own and frequently work in it, are closely connected to the structure and navigation. Nothing seems confusing or cumbersome.

Our logic is not what matters, though. What matters is the user who has specific objectives and possibility limitations.  Likely, they lack the inclination or patience to work through navigational sticking points.  

Interested in taking website heuristics to the next level by moving toward human-centered design? Contact us today!

Sep 21 2020
Sep 21

In the evolving world of web design and development, component-based design systems represent a revolutionary leap -- a previously missing link that replaces an environment of siloed functions and time-consuming complexities with high velocity capabilities that fuel flexibility, consistency, and collaboration.

Component-based design systems produce inherent efficiencies for designers and developers, and solve the challenges associated with duplication and inconsistency in applying themes, while driving the development of better quality, reusable components.  Clients gain the benefit of better brand management resulting from a simplified content editor experience that allows for bending as necessary, without breaking brand guidelines or page structures. 

As a thought leader on how humans interact with technology, Promet Source has enthusiastically pursued component-based design systems from the standpoint of both: 

  • Innovative design patterns that optimize UX and spark engagement, and 
  • Streamlined and simplified content editor experiences that allow for a wide range of page possibilities.

Powerful Partnership

As dedicated open source advocates, Promet has adopted Emulsify® as a tool to help us better organize, share, and reuse our custom design systems. Promet serves as both a user and contributor to its support and success. 

Emulsify is an open-source tool for creating design systems as a series of components that can be duplicated and easily manipulated within a set of clear guidelines for designers and developers. Promet is currently leveraging Emulsify on complex web development projects for government, healthcare, and higher education clients.
 

Advantages of Emulsify for Web Design Systems:

  • Integration with a starter library of Drupal-ready components with Storybook,
  • Portability across other CMS platforms and applications,
  • Open source, and
  • Compatibility with both WordPress and Drupal.

As Aaron Couch, director of technology solutions for Promet Source, recently pointed out: 


Emulsify has changed the way we deliver front-end experiences, making our work higher quality, more efficient to deliver, and more accessible, while creating a better user experience for our clients.

Join Promet’s Aaron Couch along with Emulsify contributors Brian Lewis and Evan Willhite on Fri., Sept. 25, 2020, at 3:30 p.m. EDT, during this year’s virtual Drupal GovCon, for “Component-Driven Theming with Storybook.” 

During this session, presenters from Promet and Emulsify will explain how a component-based approach offers greater consistency, flexibility, re-usability, and velocity for front-end development. 

Animated components moving into designComponent-based design systems allow for pattern flexibility within regions of a website.

 

AKA "Atomic Design" 

While metaphors for helping to explain component-based design systems abound, “Atomic Design” (and a book with the same title) authored by Brad Frost) is the one that has gained the most traction and has entered into the lexicon of component-based web design. 

Atomic design looks at a website’s user interface as the collection of five factors that roll up into each other:

  • Atoms,
  • Molecules,
  • Organisms,
  • Templates, and 
  • Pages.
     

Exponential Impact

Component-based design makes front-end web development up to four times faster. This translates into happier clients and the freeing up of resources to focus on fine tuning and providing greater functionality. 

For the content creator and editor, component-based web design provides the ability to edit and revise pages to fit evolving needs and new priorities. 

The new world of “drag and drop” content management is soon to set a new standard in which previous limitations will quickly come to be viewed as  unacceptable. Low code/no code web design is the future.

The four key advantages of Promet’s adoption of the open based tool for creating web design systems powered by Emulsify®:

  • Design systems that can flex, bend, and scale within and among complex web designs,
  • Powerful new possibilities resulting from enhanced consistency, flexibility, re-usability and velocity for front-end development,
  • Elimination of painstaking QA processes in favor of proven patterns and high-quality built-ins that get designers, developers on the same page, and
  • Assurance that non-technical content editors can make multiple changes to a web page without breaking layouts or straying from brand guidelines. 

Need help creating a Drupal design system for your complex website? Contact us today.

Sep 18 2020
Sep 18

Often, the most effective means of managing complexity is a laser-sharp focus on simplification -- breaking down a project into its smallest component parts and visualizing incremental  steps toward completion beginning with the smallest building blocks. 
 
That’s exactly what Brad Frost has achieved in coining the concept of Atomic Design, and authoring a book by the same name.  In clarifying the new capabilities of component-based web design systems, the vocabulary of Atomic Design has gained traction, and entered into the working lexicon of web designers and developers.  
 
As Frost explains:

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. 

 

From Atoms to Pages

Atomic design considers a website’s user interface as the collection of five factors that roll up into each other:

  • Atoms,
  • Molecules,
  • Organisms,
  • Templates, and 
  • Pages.

1. Atoms

The essential elements, such as HTML tags, form labels, and buttons, as well as color palettes and fonts -- essentially all of the factors that designers typically define as a reference point for developers when creating a website’s style guide. 
 

2. Molecules

Chemically speaking, molecules consist of atoms bonded together. Within Atomic Design a molecule make up distinct building blocks and refer to design specifications for functional, reusable combinations of atoms, such as a keyword search bar with a search button. 
 

3. Organisms

Combinations of molecular building blocks form organisms that form distinct sections of a user interface. This is where the design begins to take shape with the creation of reusable components such as a footer consisting of a logo, social media icons, a call to action link, and other branding elements.

4.  Templates

Groups of organisms arranged together form a template. The game-changing factor within component-based design is the inherent flexibility of the templated layout, allowing for a wide range of options such as switching out an image for a text block, and previewing responsive layouts for various devices. 

5. Pages

Pages refer to specific representations of templates that take shape beyond a theoretical example and come to life as a real-world view of what the user will see and experience on the site. It is at the page stage where texting and review concerning the totality of the design system tends to occur and adjustments are made.

Need help creating an Atomic Design system for your organization’s website that allows for greater flexibility that maintains brand consistency? Get in touch!

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web