Adrienne Hapanowicz's profile

Custom Controls and Iconography

Custom UI and Iconography
Our team is strategic about when to innovate with a custom interface and when to provide familiarity through convention. As the visual lead, I determine the appearance of the UI and draw the iconography. These are examples of custom controls, layouts and icon sets that we implemented to benefit the user experience.
Storyboard
This section of Ingage provides the user with a birds-eye-view of their story. They can organize their story by creating sections, reorder sections and pages and add, duplicate and delete pages. We created two custom controls on this screen including an in-line, horizontally expanding drawer add pages and a vertically expanding panel for the user to share and preview their story. 
Iconography for Add Pages
Glyphs for interactive page types were designed to be legible in multiple instances. They have simple forms that can be styled in code and scaled up to 150%.
Sharing Panel 
A selection of states of the sharing panel, where the user can share, update and preview their story. After launch, our data showed that while our users were creating stories, they weren't sharing them. 

With this iteration, we added an  shifted to a design that took a moment to educate the user about sharing, only showed the viewer the amount of necessary information at any given time, but consolidated their options into one place. 

The result was that X. 
Custom Controls and Iconography
Published:

Custom Controls and Iconography

Published: