02. The Goal
Create a system that allows for managing content at scale via governance of created pages by linking them to the parent templates.
The problem
With the high adoption rate of our native content creation tool, Smartpages, and with more enterprise accounts, it became clear that our customers needed a way to govern the content that their publishers were creating. There was no way to dictate how the pages created were styled, or what content or structure they used. As new initiatives or brand redesigns occurred, the publishers had to laboriously update pages one by one.
The team
Product Design Lead (me!), Product Manager, Engineering Manager, An engineering team of 2 front-end and 2 back-end engineers, Technical Project Manager
The tools I used
Sketch, Invision, Illustrator
03. Discovery
I inherited a complex project with incomplete designs and had to produce new designs in a short amount of time. The project involved creating a new feature for a product that allowed users to create templates that allowed locking specific options with their blocks. This meant that I had to essentially start from scratch to build a better foundation. The decision had been made to lock the entire layout, in order to reduce the complexity of pushing changes from templates. This was because it was difficult to know where to place a new block if the other blocks had been rearranged on the child page. Although rough comps had been created, there had been very little design involvement in coming up with the flows. When I took over the project, I assumed that I would essentially have to start from scratch to build a better foundation.
04. Research
Not only did I have research to catch up on, but we also tested throughout the design process.
05. Process
I quickly reviewed the documentation and found that the PM had done a good job of setting a good foundation. However, there were two potential pitfalls in the existing experience:
The term “locking” was being used, which limited the product in the future.
The level of detail given to template creators in linking properties was making the creation experience too complicated.
I addressed these pitfalls by changing the term to “linking” and simplifying the linking properties.
I then worked quickly to create everything from scratch, prioritizing the work by personas and flows. Close collaboration with the PM was essential as we determined creation and editing pathways, and how user permissions influenced them. The final product included a redesigned template editing experience, a linked page editing experience, and a creation flow for templates and linked pages. I also redesigned the creation experience for Smartpages in general, improving known pain points and improving usability.
Reflecting back on the process, it was difficult to design while the engineers were building the feature only a couple of weeks behind. I learned a lot about iterating quickly and communicating often during this project.
06. Final
I was proud to be able to successfully design and implement a new feature that allowed users to create linked templates and linked child pages.
Designing a superior user experience for both template creators and editors of linked child pages was a great challenge. The designs made it easy for template creators to select linking options by providing a new set of block properties on every block. To help users understand which parts of the blocks were linked, I used a special treatment on the fields that were linked, including an icon with a tooltip and visual changes to the field. On the blocks on the stage, a small icon indicator with a tooltip shows the template creator the linked setting on the blocks without having to select the block. For linked templates that had linked child pages created from them, a prompt upon saving lets the creator know the implications that their edits would have.
For editors of linked child pages, the designs make the editing experience even quicker and painless by removing the block panel and by disabling the ability to add or delete blocks. I also added small icon indicators to the blocks that were editable to let the users know which blocks they could go in to customize. On those block’s properties pane, both an icon with a tooltip and a disabled look is used to indicate which fields had been linked to the parent template and were not editable. For blocks that were completely linked, there is a hover interaction with a tooltip to let users know why they cannot select that block.
I designed a “Review Changes” experience that would let the linked child page owners review the changes that the template creator had made to the linked parent template, and see how those changes affected their page.
The feature is slated to be released to general availability in July 2023, a year from when I started working on it. There were many challenges during the project, including resourcing, competing priorities, and changing feedback from customers. The team will iterate on additional features to fulfill the expanded needs of our customers and make this an even more robust solution. I enjoyed having the chance to overcome these challenges and deliver a successful product.
07. What’s Next?
After receiving feedback from alpha customers, we realized that the feature was too rigid and did not meet the needs of all customers. I had hired a designer for this area of the product, so I worked with the new designer to come up with a new paradigm, called “free space,” that would allow linked child pages to add anything into their free space area. Following the invention of this idea, we got further feedback on our alpha feature during customer testing at our sponsored company events. Therefore, we decided to proceed with the existing design for GA, while working on the free space idea as a fast-follow post-GA. I’m excited to get more feedback from customers as this feature continues to evolve.
