CITIA
Card Editor
Having created a style guide I made it my responsibility to apply it to
our system starting with the Card Editor, our most frequently used tool. .
Problem
Our Card Editor had an outdated look and feel and disjointed tools inside the
building experience. Users had a hard time finding tools in our card editor
this lead to frustration using our software. We made paper mock-ups and had users
move tools around that showed how they would envision our tool. My research included
inspecting various WYSIWYGs and Editors. The range included products email blast
editors like mailchimp and Campaign Monitor to direct competitors such as Trello,
Mailchimp and Wix.
We proposed redesigning the card editor to group editing tools and features for more efficient work flow as well
as providing more of the card layout above the browser fold. The end goals for
this project was a more considerate user experience, an easy to navigate interface,
a flexible interface to allow future features and implementing consistent styles
that matched our new style guide.
Outcome
My main goal for the redesign was to keep the card always in full display to create
a connection between templates and properties of the card. I decided to have all the
tools on a tabbed side panel on the right side of the page. By collecting and nesting
features I created a more intuitive user experience while elevating the design of the layout.
Above are the final screens delivered to the development team for production.