Ext JS Stencils

UI/UX Asset Kit

Attention-to-Detail and Feedback



Ext JS Stencils is a UI kit for Adobe Illustrator, Sketch, and Omnigraffle that contains all of the components and styles used within the Ext JS classic framework owned by Sencha. I worked with another design intern to create all of the kit's elements and design mockup applications.

Along with the product launch, we wrote a blog and created a tutorial video on how to use the kit. Our team's vision behind the project was to make wireframing easier for designers and to help define the scope of what engineers can accomplish with the Ext JS framework.



This project required an immense amount of attention-to-detail due to the multitude of UI elements in this kit. I made sure to name each symbol and categorize them in ways that make it easy for users to find. We took a user survey of the people who downloaded the kit afterwards that offered new insight in what to improve on in the future and helped us decide which programs to make Stencils compatible with next. From these results, we narrowed it down to Sketch and Omnigraffle and made these versions available to users.



To test out its functionality, I decided to redesign Craigslist (Kraigslist) using our UI kit. I used the Ext JS Accordion Layout to make it easier to navigate through the extremely long list of categories on Craigslist's Homepage. The layout is organized so that everything fits on one page instead of scrolling down and does not overwhelm new site visitors.

Takeaways


1. Improving means listening.
2. Be pixel perfect!