Axure Libraries
When designing systems, there are often many elements of that get reused. Instead of re-creating these elements each time they are needed, it is quicker to have them documented in a design system and pre-built as components that can be easily be used in prototyping and wireframing.
To help support the team's work on a design system and prototypes, I created an Axure library. This library helped insure a consistent presentation for simple items like a button, or a checkbox. It also helped to reduced prototyping time by making complex interactions, like a slider or type ahead, as easy to add as a simple button. Below is small sample of the controls that I created as re-usable components in a shared library.
Reorderable List
Using drag and drop to create a stack ranking was re-occurring pattern in several sections of the application. I created a repeater based drag and drop list interaction. This allowed me to focus on prototyping the contents of the list items instead of having to re-implement drag and drop on every page.
View reorderable list demo.
Slider
Despite being a common control, Axure does not have a built functionality for this component. To support the different applications of sliders, I made this component flexible. The track can be adjusted to any length needed. It can also be set snap to a fixed number of positions instead of selecting a continuous value.
View slider demo. View slider with stops demo.
Type Ahead with Recent List
Type ahead text fields are another control that appeared frequently in application but did not have a native Axure representation. Since this prototype was also being used as a reference for developers, so I took care to add in keyboard interactions as well as mouse interactions to show how the production version was expected to behave.
View type ahead demo.
