Chirpify wanted to help their customers better understand how powerful their product is. I joined the team as their first full time product designer and was immediately tasked with cataloging usability issues across the app and figuring out how to integrate with the team's existing agile development process.

To kick things off I held a half-day “post-up” alignment workshop with the entire team. This particular exercise focused on identifying pluses and deltas, things that were working in the product and things that weren't. After a quick introduction I sent the team off to think and fill up post-it notes. Twenty minutes later we gathered back together and organized all the notes under categories like “User Interface” and “Marketing”. The conversations that came out of each stickky note were invaluable in determining where the biggest pain points in the business were. This exercise was so well loved by the team that they now hold post-ups quarterly.

A fifth of our completed alignment exercise.

I distilled the post-up into a list of recommendations and got to work. As luck would have it, Chirpify was beginning to shift towards the enterprise market when I was hired, so I was able to redesign the app from the ground up with a fresh set of goals and a new audience to reach. By the end of month two on the job I had helped redefine our audience, developed new personas for our target customers, and was iterating on whole new application flows. I worked as closely as possible with everyone from the leadership team to the developers to ensure I was moving in the right direction. Much of my work was distilling our business needs and technical abilities into a product that worked for both our users and ourselves.

This application flow map was iterated over for several weeks. I gathered input from everone on the team, from account managers to developers.

Designing the new application had a few clear challenges. Chirpify has two distinct audiences with different goals and the app had to meet both their needs. Also I needed to design quick enough that the developers could get coding without waiting too long for design direction. To help the developers get going I started by designing the new application flows. The resulting app map looks straight forward—which is good!—but it took over a week of constant iteration. I worked with almost everyone on the team to make sure that the new flows would meet business needs and could be built efficiently. As I learned how the flow met other teams’ needs I evaluated how actual users would feel walking through the app. The rough personas I generated earlier in the month helped focus my iterations until I arrived at the three-pathed flow we ended up with.

Of course everything was in both design and development simultaniously, so this document was just a stepping-stone. Once the team agreed on this direction we were able to move on knowing we were all on the same page. This pattern of creation, iteration, and moving forward was a common theme throughout the redesign. Most of my work was “throw-away”, only meant to ensure the team was moving forward as one cohesive unit. In the end I built a full set of wireframes, a half-set of visual designs, and various other design assets to help communicate my goals.

I designed the new Chirpify with simplicity in mind. The color palette was pulled directly from the existing brand work, I chose fonts that would allow for maximum flexibility, and everything was designed on a grid. The frontend team decided to use Zurb’s Foundation as a base, so I pulled as much of that design framework as I could. While designing I identified common elements and reused as many components as possible. The result was not only easier to build, but easier for customers to learn. One of my final tasks at Chirpify was to put together a frontend style guide. This document is an in-browser guide to each and every color, font choice, and compontent in the new app. Developers can use the style guide to make informed design decisions as they implement new features.

Once the developers had what they needed to build the new app with confidence I moved on to .com.

Chirpify.com was now out of date. It didn't reflect the bigger problems that Chirpify was solving and lost the voice we brought to the app itself. After some planning and discussion with the marketing team I designed a new home page in Photoshop before jumping straight into code. Because the engineering team was busy with the app itself I took on the development for the new .com. Because I did both design and development the design process was abbreviated; most of my design work was done in-browser and on the fly. There was still lots of iteration as the build progressed and I shared how our content looked on the screen.

These days the Chirpify team is growing growing growing! You can watch the exciting things they're building on Chirpify.com or in real-time on their blog and on Twitter.