How we’re saving 40hrs per project with reusable Drupal paragraphs

In October this year we took two weeks out as a company for SeedCon 2020, our internal virtual conference and hackathon. 

The hackathon had us split into four teams, and the Yellow Team built a reusable paragraphs library for Drupal to help streamline future site creation and add value to existing client projects right away. This won us the Most Agile Team prize at the hackathon.

Our team was made up of two engineers (Sergey and Pavel), a designer (Mihai), and a business/marketing specialist (Tamsin).

Our objective and how we chose it

From a number of objectives offered to all the teams, we decided to focus on improving our price competitiveness, as we conducted a value matrix analysis to work out which objective would allow us to deliver the best impact for the company within the limited duration of the hackathon.

Once we’d settled on our objective, we discussed several ideas for our hackathon task and plotted them against the value matrix as well. The winning idea we decided upon was to create a default paragraphs library for use with Domino (our in-house Drupal set-up for the development of new sites). 

The alternative idea we had (which may come back in a future hackathon) was for a donations plugin for e-commerce websites so that any site could automate food bank donations by adding the plugin. The only reason we didn’t decide to go forward with this idea was due to the number of e-commerce platforms in common use creating a lot of complexity.

Our process

We were determined to win the Most Agile Team prize, so we set up our process using a combination of the AgilePM and Scrum approaches: 

Feasibility & foundations

1. Select the most valuable hack objective using a value matrix
2. Brainstorm solution ideas
3. Shortlist two ideas:
   • Reusable paragraphs library for all SystemSeed sites
   • Foodbank donation widget for e-commerce stores
4. Select the idea most practical to implement (highest value for minimum effort)

Project implementation

1. Define agile team roles
2. Planned agile events:
   • Sprint planning
   • Daily standups
   • Retro
3. Create a sprint goal
4. Define user stories, acceptance criteria & estimates
5. Prioritise paragraphs (MoSCoW)
6. Research 
7. Design
8. Develop 
9. Test
10. Iterate

We stuck to our process pretty well, even managing to fit in our retro before the hackathon demos on Friday morning. 

Why reusable paragraphs?

Our reusable paragraphs idea wasn’t that glamorous or exciting, but it did stack up as projecting a strong impact on our chosen objective of improving price competitiveness, particularly in terms of:

1. Faster project start - Helping to put basic items in place for clients so we can get them a useable solution more quickly.
2. Streamlined design process - Our paragraphs are of different standard layouts (e.g. image plus text, full-width text, three-column text). This helps designers quickly construct ‘live’ wireframes that can be tested with real client content.
3. Lower total site cost - with approx. 40hrs saved per site build we can lower the cost of building each site by at least $4,800.
4. Quicker MVP delivery - in saving time on initial site build, we can provide an MVP to a client at least a week earlier than previously (40hrs = 1x developer-week)
5. Basic element provision for all sites - every site we create uses some kind of paragraph structure, and so this project has the widest possible results for SystemSeed
6. Biggest impact to the company - in developing a tool for use on every site we create, we had a direct impact on the company that would directly reduce costs and increase profits on every project

Implementation

Pavel and Sergey, the technical half of our hackathon team, put in some long hours getting our reusable paragraphs working. 

In order to ensure maximum usability for future projects, we made the reusable paragraphs set compatible with SystemSeed’s Basilio, Domino and MaterialBase projects.

They also built-in adjustable styling for client branding and unique design.  

A design example

Standard template paragraphs don’t look very attractive without styling, so we also created a design example for an Australian wildlife sanctuary to show how our standard paragraphs could be restyled to provide a truly unique look and feel.

Here we’ve used the simple hero block, three tile block, text + video block, impact statement block and text + image block to create a completely different looking site. 

This is achieved by restyling the individual paragraphs and adding background images and textures.

Learning and reflection

This project was a hackathon success because it created a genuinely useful tool that could be immediately implemented for the benefit of the business - and helped towards our chosen objective of improved cost-effectiveness.

It was also a success in terms of the way that we worked together as a team, in an agile way, and won the Most Agile Team award!

We’re proud of the work achieved and now need to take the next steps of implementing additional standard blocks that we know most (if not all) sites wish to use.

But wait, there’s more...

We want to give a shout out to the two other hackathon teams who also produced some great work. You can read about their activities here:

• LMS reinvention for the better
• Management tool integration scoring big

If you’d like to have some of our creativity and technical excellence on your next digital project, get in touch - we’d love to hear from you.