Endorsement Tool Builder
The endorsement tool builder is an online portal for users to create, launch & manage their landing pages or Ad campaigns. A large chunk of my time was spent developing the interaction model for the web app.
The explored model splits the interface in two. With an "input" side on the left allowing a user to build out their tool of choice and a "preview" section on the right where they can see their choices and additions reflected in real time. The rationale behind a split view is to allow users to quickly understand how their interactive page will look like as they make adjustments based on their specific brand guidelines.
The Endorsement builder's customization options are constrained by design to offer a quick and easy way to express an organizations brand by only focusing on the essentials: Color, logo and imagery. A member of an organization building out an interactive web page can quickly find the best configuration of their landing page that meets their needs.
Text readability was also a major factor in choosing to provide a prominent "preview" section. The tool allows for the selection between white and black text color. Users can immediately see the relationship between their chosen brand color/background image and the text and adjust text color accordingly. All images are automatically given a slight background blur to improve readability.
Post review with the developer, the second round of iterations involved adding a bit more of Branch's visual language and also fleshing out the preview section so we can test the prototype.
Hi-Fi iterations - v2
We tested with users heavily involved in marketing operations for political organizations. The goal was to measure how well these individuals understood how to use the tool, gauge how well aligned the editor's options were to their needs, discover additional learnings that could be useful in improving the tool.
Post-feedback, I added an interstitial screen before entering the editor to briefly provide context to the tool, I also made some layout adjustments and included example copy for text input fields.
Hi-Fi iterations - v3
The last round of iterations was more about further refinement, collaborating with the developer on what elements could be redesigned or improved for a better experience.