Header controls improvements for a no-code site builder
Laura Castano
Header controls
How I redesigned a microsite platform feature that led to a dramatic improvement in
customer experience and operational efficiency
My impact as Lead Designer for the project
I delivered the design for a header feature that allows users to:
- Configure the header in 48 different ways without writing a single line of code
- Choose from a visual menu of navigation options
- Add logos, social links, search icons, and site titles at the click of a button
Unlocking Customization by Addressing Challenges in Zoomforth's No-Code Design Platform
- Zoomforth is a no-code / low-code design platform that enables enterprise clients to create trackable and secure microsites, at scale.
- The platform offers a standard header layout that requires no coding.
- To customize the standard header layout, however, the user needs knowledge of CSS, which many customers do not have.
- This leads to:
- Customer - frustration, delays, and reliance on Zoomforth’s in-house design/support team
- Company - a constant stream of support tickets (170 in the last X months), taking an average 20-30 mins to resolve
“Laura’s ability to assimilate customer feedback, negotiate with engineers and iterate on UI design has led to this awesome new feature. Not only is it a game-changer for our users, but it has also reduced our support overhead significantly.”
Wendie Michie, CEO
The user we build for
The process
Step 1: Research
- Reviewed customer insights and 170 support tickets
- Interviewed the in-house design team
- Reviewed several leading website-building platforms for inspiration
Step 2: Design
- Created low-fi drawings/wireframes
- Discussed options with stakeholders and engineers, including one that leveraged existing grid functionality from the platform’s site editor
- Decided on the minimum viable product for the v1.0 release
Step 3: Iterate
I performed some user testing sessions with two simple tasks to complete, simulating a design brief. I wanted to confirm that the new tools were easy to find and encouraged users to explore the new possibilities. I also wanted to confirm that users were going to be able to add and remove elements from the header seamlessly.
Findings
- Participants were able to complete the task.
- Liked the overall flow and the options provided
- They liked that they could see the header is updating from the editor without having to hit preview.
- Also confused about calling “inline right” or “inline left” because the Nav (links) are the ones being aligned through those layouts.
- Add the possibility to add a secondary logo in all of the alignments
The Results
- 48 new preset header layouts
- Reduced the amount of time needed to tailor the header
- Improved website performance in mobile browsers
- Allowed for more flexibility and options to achieve without help from our support or design team
- Gave power back to users.
Key Learnings
- Ensure the whole team is clear on the target user persona for the feature at outset (this would have saved time in team discussions)
- Conduct user testing early in the process
- Ensure documentation is clear and version-controlled
2022
