Wireframe mockup of old application structure and UI. This shows an example task flow highlighting the drilling down via multiple clicks paradigm when trying to edit content on a page. Left side of each frame is the preview panel with the actual web page, the right side is the editing panel with nesting of individual "cards" containing the page content.
Whiteboarding session exploring complete rethink of the application structure. This image is me exploring the editing panel, with all content surfaced in an outline for one click access.
For testing I built two interactive prototype's in Axure. One that matched the current direction in a pre-launch development state, and one that represented the proposed solution.
Test sessions were recorded in order to document screen clicks and mouse movements, for capturing audio of the users thinking out loud as they made their way through the task flows, and for capturing video to gauge confusion or delight.
Results of the test were communicated to stakeholders via an executive summary. Findings showed the proposed solution outperformed the existing direction. Buy in was achieved and the product changed course.
New application structure and UI. First screenshot shows the one click paradigm with all content surfaced in a nested outline, and an "options tray" per piece of content that contains all the tools. The preview panel on the left shows the content being configured, and the editor panel on the right is where the configuration takes place. The second screenshot shows the CMS modal, accessible via the options tray, which removed the need to switch back and forth between two applications for simple edits.
Along with leading the UX/UI on the configuration application, I also took on the CMS that was in mid-development and completed a fit and finish overhaul. The first set of screenshots shows the CMS before the fit and finish.
This second set of screenshots shows the CMS after the fit and finish.
Additional responsibilities included solving common use cases and task flows, such as this mockup showing part of the flow for dynamic link creation.
Another section of a task flow showing the process to select theme colors.
These are screenshots showing the panels for editing and configuring, in order: The page outline, the property tab with accordion options, the style tab and its design options, the page selector drop-down, and the site tools panel containing access to global options.
Example sections from the UI Library showing the components and other elements making up the design system for the configuration application.
During build, I paired with dev to oversee the implementation of the design. To assist with offshore team members, I put together a detailed specification guide to communicate design intent of all the major components and elements of the application. This included movies to clearly show the animation and interaction of the UI.
For the different sections of the specifications, detailed redlines were included to ensure design intent was clear.