Manage your enitre brand
No-Code Brand Portal
Read in 4 minutes
The Goal
Background
Legacy HTML Builder
The starting point was an outdated HTML page builder. Not suited to the persona and user base who typically had no coding knowledge.
The aim was to allow users to create guidelines fast with no code needed. Copy, duplication, movement and tactile interactions.
WHo is it for
This product is used by marketing, brand, communications, legal and compliance professionals worldwide. Industries include aerospace, banking, education, government, insurance, healthcare, hospitality, retail, sports and more.
Research
Proto Personas
There were originally three proto personas identified from existing research.
I ran a workshop with 4 stakeholders. Interestingly, we were able to conclude that a single archetype type would satisfy all potential use cases.
Brand Pages Manager (The Creator)
Designs and manages the brand and ensures assets are up to date, compliant and accessible to team members.
Coordinates implementation
Ensures traceability that assets comply with brand guidelines
Needs assets to be downloadable for users
Frustrations:
Finds brand pages hard to build and difficult to navigate and understand
Magic Pages
The storyboard was created to trace the journey of building a simple brand page. It is intended to convey simplicity and ease.
Critical Componentry
I Introduced the concept of drag and drop functionality to the solution. The highly tactile nature makes a digital interface feel engaging and intuitive.
To support a drag and drop creator I designed a side panel experience to give users access to frequently used page widgets. These would come in the form of typography, images, video, colour palettes, sections, templates, icons.
Each widget has its own properties for greater control and customisation capability.
A modular toolkit (dnd Kit) was used for building the drag and drop interfaces using React components. It was very customisable and I had great control of the design of the interactions.
An Early Figma prototype used for testing and simulating movement
Features
More Control
Other features include the ability to duplicate pages but also duplication of individual widgets and page sections to make creation simple and fast.
Designed to accommodate for multiple portal creation for multiple brands which are all managed in a central location.
Great Results
Drag & drop functionality introduced to the platform. A first for IntelligenceBank
Create pages in minutes
Guidelines can be consumed 24/7 from anywhere in the world
Improved self-service. Logos, fonts, pictures, ready for downloading
Integration with the digital asset management system
