There are times, when the tools you are given in a certain workplace context, are so terrible or inefficient that inaction is unbearable.
I encountered just such a toolset while working for Spotzer in Amsterdam.
My team consisted of younger, more junior web desigers, who were perhaps a bit more complacent in the face of the inadequate tools we had been given.
After many years of self-motivated entrepreneurship, I was accustomed to building out my own frameworks when current methods didn't suffice.
Our job was to build web sites for small businesses, as quickly as possible. We were required to use a proprietary CMS called SiteBuilder, licensed by Hearst Media.
This was a decade-old dinosaur of a platform, that made site coding slow, inefficient and frustrating. I decided that I could build us a tool that would help.
I called the project Chloe.
I backwards-engineered the output of the CMS, and then built a local PHP wrapper that would allow us to code the websites on our own machines. We would only need to interact with the CMS as a final uploading step.
By limiting interaction with the difficult technology, I was able to grant us a significant boost to productivity.
The tool I built was a time-saver.
In avoiding the long load times of the CMS, as well as managing the internally unformatted code, we were able to focus our efforts on design and productivity.
... not to mention the inherent morale boost.
Prior to this job, as an entrepreneur, successes were tracked and communicated on a very individual basis.
I found, working at Spotzer, that successes and failures occurred at a far larger scale. Small efficiency changes could have broader, amplifying, monetary effects.
Not without mention, my efforts had me quickly promoted to a senior role.
Onboarding is a balance of discoverability and education, and we've worked hard to make Silk an intuitive product for the new user.
To explore the vocabulary and data-model of Silk on arrival, I created a short, introductory video which would lay out the fundamentals quickly and visually.
Being very comfortable with Adobe After Effects, and the supporting Adobe suite, I took the reins on handling this project from start to finish.
My familiarity with Silk as a product made me equally well-equipped to write the script, and match the asset aesthetic to our brand.
By observing new users, I became convinced that the (lack of) knowledge around Silk's data-model was a problem. It stopped them from being able to anticipate the functionality of our less common UI patterns.
After having little success with interactive onboarding flows, I settled on a traditional explanatory animation.
I sought to make the voice-over as simple as possible, yet still cover all the important core components and the unique vocabulary of Silk.
I walked the user through a first-time import, exposing the components gradually, and moving them towards an eventual goal of publishing their data.
For the aesthetic, I came to a simplistic representation of each of Silk's core components.
While I wanted to include some data, I kept it very simple and pictorial -- museums in this case -- as to not distract from the hierarchical principles being introduced.
We noticed a marked difference in user behavior between those who watched the video and those who did not.
Customer inquiries became more coherent, and used the language of the product correctly.
We have also been seeing an increase in well-built, hierachically-sound sites.
Jobcast is a Canadian recruitment company.
For a collaboration with a technical recruitment partner, Jobcast came to me to design and prototype a single-page statistics dashboard.
Since the stakeholders wanted to interact with a working prototype, before they brought their development team in, I was tasked with moving the vision through early sketches and wireframes, to a high-fidelity prototype.
When it comes to early concept and layout, I like working with very small thumbnail sketches.
By trying to squish a full-page of design into a sketch that is only inches wide, one cannot be too precious. It allows for quick experimental iterations, and no single idea gains too much weight too early.
After we had collaboratively decided upon one of the layouts explored in the thumbnail sketches, I presented the stakeholder with a greyscale, static wireframe.
Next, I began fleshing out a color mock. We iterated several times, fine-tuning, and introducing new elements as requirements shifted.
In agreement about the static mocks, I began building out a simple prototype in HTML, CSS and JQuery.
Its purpose was to show the stakeholders that the interactivity they wanted was achievable, and to communicate a clear brief to the remote developer.
As the sole proprietor of my web design business, I was the one who would oversee the product from concept through implementation, completing each stage myself.
Working with an outside developer was new for me. The prototypes I built proved to be fantastic tools for communicating a clear vision to the coder.