Late last year, we were approached by a nonprofit who had completed a website redesign project with a well respected design firm. After the new site was live for a few months, it was obvious to the non-profit that it wasn’t working. Stakeholders didn’t like it, visitors were complaining, and the site was underperforming based on all the key metrics they tracked.
The nonprofit asked us to audit the site to figure out what was wrong. We performed a quantitative analysis of usage statistics and patterns, and had our design and strategy teams complete a qualitative review of the site.
What was wrong with the site?
At first glance, the redesigned site seemed like it should work. It was beautiful. It featured stunning photography and a slick user interface that took advantage of the latest front-end development trends. But as we looked at the data and spent time using the
As a web development firm that works with non-profits, we frequently help our clients implement online donation systems. There are a ton of great platforms that non-profits can use to power their online giving.
However we have increasingly found ourselves recommending Stripe. Stripe isn’t used strictly for online giving. It is a full-featured ecommerce platform that can be used by any organization that wants to accept payments online. There are a number of reasons we love Stripe as a donation platform:
It is cost effective. Stripe charges 2.9% + 30¢ per transaction with no other fees. Most donation platforms either charge monthly fees on top of credit card transaction fees or take a significantly higher percentage of donations. By using Stripe non-profits keep more of the money they raise online.
It has great tools for developers. Stripe has a variety of tools (Stripe JS, Elements, and
We will be hosting a free webinar at 2:00 pm on Thursday, October 19th. The webinar will use our recent redesign of the African Parks website as an example of system-based website design. We’d love to have you so please register today.
Design Systems, Not Pages: Redesigning the African Parks Website Using Reusable Widgets
For most of the web’s short lifetime, the primary way to design a website has been to create wireframes and comps of a site’s key pages. This page-based approach is clearly broken. The proliferation of smartphones and the increasing complexity of the interfaces we create make page-based design extremely time-consuming. A relatively simple site can require 25+ page comps.
The last few years have seen designers move to a process that is more in tune with the way websites are actually built and function. They design overall styles and repeating elements that make up
Over the last few years, we have embraced a systems-based approach to website development. Instead of designing and developing page templates, we focus on defining overall styles for a site and creating reusable components called widgets. Widgets are the building blocks that content managers use to build pages.
In my Design Systems, Not Pages blog post from last year, I talked in-depth about our reasons for moving to this approach. This post will serve as a companion to that piece, providing a detailed breakdown of the process we used for our recent redesign of the African Parks website. What follows is an explanation of the design deliverables we produced and the process for building widget-powered pages using our Drupal 8 Stacks module.
Please check out this case study to learn more about African Parks and the strategy behind the redesign.
When building a site using a widget-based approach,
As the owner of a web development firm, one of my primary jobs is to manage risk.
When taking on new projects, I am betting that we can complete the work in the time we have estimated. If we win our bet, we have solid profit margins and a healthy work environment. If we lose our bet, we throw our schedule into chaos, stress out our team, and lose money.
What makes this process so risky is that I have to make budget decisions about the projects we take on based on imperfect information. There is no way to know for sure how much time a website will take to build until it is finished. While different pricing models and approaches can mitigate risk, ultimately the client needs some idea how much a project is going to cost before they will agree to work with you.
It goes without saying
The frontend world is buzzing with talk of pattern libraries, atomic design, and component-based design. The benefits of implementing a component-based system have been discussed ad nauseam, but how can we fully integrate these concepts into a Drupal site? Better yet, how can we bring a component-based page building experience to the Drupal admin?
The Brick Factory recently released a Beta version of Stacks, a contributed module that fully integrates component-based design and development into Drupal. Stacks breaks content into reusable components called widgets. Once configured, widgets give content managers the ability to build rich, beautiful pages in Drupal. The easy-to-use admin tools allow for drag and drop editing, reusable content, theme options and much more.
Join us on May 31 at 2:00 pm ET for a webinar in which we explore ways to improve the Drupal frontend and content admin using the Stacks module.
We will cover:
A year or so ago I wrote a blog post, “Design Systems, Not Pages“, that outlines how our design process has evolved over the last few years. Our primarily design deliverables are now style guides and reusable components, instead of page templates. As an extension of this new process, we built a Drupal module called Stacks that allows for content mangers to create robust, beautiful pages using the reusable components we design.
At this year’s MidCamp in Chicago, my colleague Dan Knisley and I had the pleasure of giving a talk about how our design process has evolved. In the presentation we explain why page-based design doesn’t work and walk through our new approach. We share real-world examples of the design deliverables we now produce from a recent project.
Below is a video of the presentation and the abstract of the talk. Would love to hear any feedback you may have!