leifparker

Embed Rework

Short Test Cycle

Keyboardable

Silk is a data-publishing platform.

Data stories can either be hosted directly on Silk, or embedded as widgets on any site or blog.

When major news organizations began using this embedding functionality, the traffic that Silk received began to skyrocket.

Role

Redesign, prototyping, and testing

While running through our analytics, I identified this project as a useful focus for Silk's time and resources. I brought the idea to our CEO, who expanded upon the vision.

I acted not only as the designer and prototyper, but also the intermediary between the stakeholders and the development team.

Approach

As we began experiencing traffic spikes from news stories with Silk embeds, I dug into the analytics to see what percentage of viewers went on to investigate Silk further.

The numbers were not encouraging.

We decided on a path of redesign that would elevate our brand, while providing a hook for capturing leads.

Process

Analysis

I started with the visual hierarchy of our current embed design. Breaking the embed down into its separate parts allowed me to assess the prominence of each, and compare it with our desired hierarchy.

Next, we wanted to find out if this aligned with user expectation.

Process

Short cycle testing

A 5-second test consists of showing a user a screenshot for a short period of time, and then hiding it. A series of questions is asked, to determine what elements stood out in their memory, and what was lost.

I used this to get a sense of our current visual hierarchy, and to give us direction for the redesign.

Process

Redesign

The 5-second test revealed that only a small part of the embed was immediately recognizable, and that our visual hierarchy was unbalanced.

For the redesign, we focused on simplicity, with complexity revealed upon interaction. The addition of 'hearting' gave us a method with which to collect leads.

BEFORE

AFTER

Learnings

From the testing, we were able to see a marked improvement in the visual balance of elements. Our primary social and lead actions were largely overlooked before the redesign. Afterwards, 'sharing', 'hearting' and 'filtering' rose in prominence as per our requirements.

Further design cycles have since addressed an increase in brand visibility.

Chloe

Motivated by ROI

Keyboardable

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.

Role

Initiative, concept, and implementation

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.

Approach

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.

Process

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.

Outcome

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.

Learnings

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.

Silk in a Nutshell

Onboarding Video

Keyboardable

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.

Role

Script, design, and animation

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.

Approach

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.

Process

The Script

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.

Process

Assets

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.

Datacards

A Collection

Learnings

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.

Community of Silks

Jobcast Statistics

Prototyping for teams

Keyboardable

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.

Role

Design and prototyping

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.

Approach

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.

Process

Mocks

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.

Wireframe

Static Color

Process

Prototyping

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.

Learnings

Prototypes for communication

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.

Silk redesign

Case-study Video

[Leif] showed exceptional creativity and produced an app that's both fun and professional at the same time.

Johnny Oshika CTO, Jobcast.net

When working with Leif he took great initiative in improving processes ... He is a very good trainer and coach and a great team player.

Bianca Mussi CFO, Spotzer Media Group

[Leif's] work is of high caliber, on time and he is excellent at communicating with the rest of the team.

Ryan St. Germaine CEO, BCjobs.ca

Not only did [Leif] excel at his own job, he helped improve other colleagues projects by acting as a fountain of knowledge in the field of Digital Media.

Daniella Erwood Digital Media Specialist, Ryerson University