Project Description
SKY UX Framework
SKY UX is Blackbaud’s user experience framework. As a senior designer, I have contributed components, helped establish patterns, and have applied SKY UX to older products.
Design Tools
User Research
Applying Patterns
Applying the SKY UX Framework
– The SKY UX component library
Project Background
Blackbaud acquired the educational technology company WhippleHill in June of 2014, with the goal of integrating the WhippleHill products into the larger Blackbaud product suite. To this end, I was part of a two-person UX team tasked with developing and executing a plan to apply the SKY UX framework to WhippleHill’s learning management, enrollment management, school website, and student information products.
– Before & after example (slide to see)
Process & Results
We began by identifying pages/functionality in the old UX that would not translate well to SKY UX. These required redesigns in order to take advantage of newer UX patterns.
For the remaining pages, our team of developers applied the SKY UX stylesheet. My UX partner and I then performed a page-by-page review of all the WhippleHill product pages. We identified crucial UX fixes, inconsistencies that we could overlook for the initial release, and areas in which a redesign was necessary.
After this methodical approach, the changes were released, and we conducted surveys and interviewed users to ensure this new UX was serving them well.
Creating the “Status Indicator” Pattern
– Catalog of status examples in Blackbaud products
Project Background
One goal of Blackbaud’s SKY UX Framework is to ensure our design patterns are applied in a consistent & well-researched manner across our products. Having worked on several of our products, I noticed that statuses were being displayed in many different ways.
Under the direction of Blackbaud’s UX Senior Leadership Team, I began a project to research the use-cases for statuses in our products and others, to identify/create the UI elements we’d use to display statuses, and to build a decision tree that would help ensure all designers knew how to indicate statuses in our products.
– Status decision tree and components
– UI exploration
Process & Results
I began this project by surveying the uses of statuses in our products – where they appeared, what kinds of information they conveyed, and how they were displayed. To better understand how this was handled in the broader UX community, I then explored articles & white papers on the subject, and reviewed how other publically-available design frameworks handled statuses.
Once I had categorized and generalized the use cases, I began sketching out potential guidelines and styling options. I conducted user research with both the end users of our products, and the Blackbaud designers who would be using the guidelines.
This process of research and iteration lead to a final design that I presented to the Blackbaud UX Senior Leadership team. The UI design and UX guidelines were approved, and are now part of the SKY UX library.