Why
While building Institute and Tes for schools we realise this isn't an efficient way of working; creating bespoke pages each time Content, Marketing or Institute wanted one. It would be much better to create a toolset that allowed them to create and manage their own pages, without relying on anyone.
Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime type move.
Time
Remove bottle necks and allow for better use of engineering time
Autonomy
Self governance, build and pulish as and when
Consistency
Any design changes will cascade down the whole site
How
1. Discovery: My product manager and I ran a workshop with all the stakeholder (editorial, marketing & institute). This was a sticky note exercise whereby we asked them to write down everything they wanted from this tool and one by one we as a collective categorise them into either; must-have, should-have or nice-to-have.
must = essential for day-to-day
should = tool that is missing that would add value
nice = bonuses and improved quality of life
2. Prioritisation: Once the loose prioritisation was defined by the stakeholders, we (PE, PM and I) went off and further grouped and prioritised into small chunks of work. Accounting for what pieces needed to be done, in what order to allow for a smooth unobstructed build.
3. Design sprint: Finally, once the groups of components were signed off. I started designing, in total there were about 6/7 sets and each set made up of 5 to 8 pieces and each sprint lasted about one week.
Stage 1: design + design team sign off
Stage 2: engineering sign off
Stage 3: stakeholder sign off
Stage 4: build
Stage 5: demo
Below is a rough timeline:
What
Flexibility
Every component was designed with responsiveness and accessibility in mind so the end-user doesn't have to think about it and can build freely.
Configure
The controller: in this panel the user chooses and creates the content that is populated in on the page. Everything from, titles to forms to carousels to SVGs.
Structure
We worked together with all the stakeholders ( Marketing, Institute & Editorial ) to build a flexible yet structurally sound layout with potential infinity combination — this was important to us to allow all parties to create with as little restriction as possible.
Result
Consistent and up-to-date design language across the whole site
Complete autonomy in building, publishing and maintaining a page on site
Regained engineering time. Building products not pages