Blog

Modular design: a collaborative approach to building digital products

Recently, there’s been a shift from designing pages to designing systems, in order to deliver consistent, scaleable design cross-platform. Here, our Interaction Designer, Alla Kholmatova, discusses how we’ve used modular design to create a new “pre-course” area on FutureLearn.

We’ve been experimenting with modular design to improve our design process at FutureLearn. Similar to element collages, designing in modules allows us to explore ideas as self-contained, disparate pieces (or organisms, as we call them in our pattern library) rather than fully composed pages. It allows us to move faster with our design and continue exploring, instead of trying to perfect full-page mockups.

In this post, I’m going to share a recent project that we are designing this way.

Pre-course

“Pre-course” is an introductory area of the platform, which learners are directed to, if they have signed up to a course that hasn’t started yet. The goal of pre-course is to encourage more learners to engage with the course once it starts.

The area introduces learners to the course subject, allows them to take part in relevant online discussions, and explore various activities and resources.

After the initial research by our content and product teams, and many rounds of workshops, we ended up with dozens of great ideas that might exist in the pre-course area. The hardest part was to decide which ideas to focus on and how to put them together into a coherent design.

Designing organisms

Although this approach doesn’t suit all projects, the pre-course experience was a good opportunity to progress the design by thinking in modules. We started by quickly brainstorming and sketching some of the ideas, to see how they could be turned into self-contained modules:

Post it notes and sketches, showing initial ideas for designing in modules

Some of the ideas and sketches for the pre-course modules.

We then started designing each module, one at a time.

Some of the examples we worked with were: discussion modules, an interactive map, learning resources, quick facts on the course subject, and a goal setting area. Each module had a couple of variations, and had a wide screen and a small screen version.

Screenshots of possible modular designs

Some of the visual designs of the pre-course modules.

Putting the pieces together

Once we were done designing enough organisms, it was time to start combining the modules to create a single page. As always at FutureLearn, this was a collaborative process. We worked in a small, multi-disciplinary team to build the pre-course page, using our components to paint the big picture.

We tried laying out the modules in different orders, to see which ones work well and which didn’t. Some elements that appeared interesting in isolation didn’t quite fit in the story, while others worked much better as part of the page.

We ended up choosing five modules to go into the first iteration of the pre-course area, which we’re currently testing on two courses.

Participatory design and testing

Designing in modules also made it easier to test and iterate ideas with learners. In addition to our usual guerilla user testing in the British Library, we asked some learners to participate in the design of the pre-course area.

The modules were presented as paper cards, which participants could pick up, discuss, scribble on and move around. This format also worked well for those participatory design sessions – people enjoyed having something tangible to interact with.

A participatory design session with learners

A participatory design session with learners.

Takeaways

As we move away from an internet built of pages, we have found the modular approach to be a useful shift in our design process. Thinking in re-usable components, rather than full-page mock ups, helps us to move to the browser quicker and scale the product in a more consistent flexible way.

It can also help when we have a plethora of ideas and a lack of understanding of how to develop some of those ideas into a coherent design piece. The modules serve as conversation pieces, to help our team agree on a design direction – everyone can take part, moving around the puzzle pieces and observing the effect it has on the story we’re trying to tell.

The important thing to remember when designing at component level is that although some modules will work together better than others, ultimately what you’re seeking is a harmony between the elements. A balanced design and coherent story is what matters most.

What’s your experience of modular design? Tell us in the comments below. Want to know more about how we work? Check out more “Making FutureLearn” posts.

Category Making FutureLearn

Comments (1)

0/1200

  • ahlam

    i dont know any things for design