We just announced Jive Circle, a new employee directory app for iOS and Android that we’ve been working on since the beginning of the year. I’m really excited about this app, because we were able to follow a user-centered design process to ensure we’re launching a product that is both useful and usable.

So let’s start where every product should start: User Needs

Jive Circle is the third product in our workstyle apps. The first (Jive Daily) and second (Jive Chime) were released earlier this year. During the market research for these products the research team discovered a new pain point that was just waiting to be solved: employee directories.

Accessing the employee directory is something people do multiple times a day. The problem is that it’s a terrible experience. There are usually HR systems or intranets that try to give easy access, but the research showed that people rarely used these systems (for reasons ranging from “it sucks!” to “forgot my password and can’t be bothered to reset it”). Instead, they do something that’s accessible, but an inefficient experience: Launch Microsoft Outlook.

The most common way to look someone up in a corporate directory is this:

Compose a new email message in Outlook
Type in the person’s email address
Right click on their name
Go to their profile
Copy the needed information
Close out the (unsent) email

This is not exactly an ideal process. We saw an opportunity to fix this. Enter Jive Circle.

Iteration is better than words: Prototyping solutions

From the very beginning, we wanted the design process to be right. We agreed as a team that we want to get user feedback early and often, and that we’ll get a working prototype as quickly as possible so that we can iterate from there.

It was immensely helpful to start with user flows, as opposed to just making screens and hoping for the best. We came across a bunch of questions and issues as we worked through the IA, and it was much more efficient to work through them in this phase than it would have been once design had already started.

With the basic flows settled it was time to move on to design. We chose to use Proto.io for the initial prototypes. There are lots of alternatives, of course, but this is the one that came closest to what we needed (including a “long tap” gesture that none of the other tools had at the time).

Looking back over it now, it’s amazing to see the evolution of the app from the first prototype to our first Alpha dev build. Some elements frequently changed, while others remained largely the same. Here’s for example, is the Home screen from the very first prototype, compared to what is in the Beta version today:

The more prominent search bar, dedicated “team” views, and card-based information at the bottom were all changes made as a direct result of usability testing—but more on that later.

Every couple of days, we would publish a new version of the prototype based on team feedback, along with a list of what changed:

As you can see from the image above, by the time we hit v3.1, we realized it was time to get this thing in front of users before we went any further…

Save time and pain: Usability testing

It was always really important to us to do at least two rounds of usability testing on this product: One round on a prototype and one round on the first Alpha build. So, with v3.1 of the prototype in hand, we ran some usability tests to better understand how people currently use their employee directories, and how well our proposed solution is working.

It was, as usual, incredibly insightful, and the changes we made based on that early feedback had a big impact on the utility and usability of the app.

Two of the biggest insights we uncovered were:

Knowing someone’s location, time zone, and availability is incredibly important, and the starting point for almost every interaction with that person.
It’s surprising how often people want to look others up in an org chart—especially in large organizations.

With our insights in hand we continued to make improvements to the prototype, until we arrived at v5.1. It was time to start visual design and development…

Making it real: From prototype to visual design and development

Early on in the development process we did something that we think is important to note: We decided to develop the first iteration of the app using a vertical as opposed to a horizontal approach.

If you take a vertical approach you pick the features you want to work on first, and complete them front to back. You make sure they work well. You might have fewer features in the first release, but they’ll be fully baked, so you’ll have a useful app. And then you get to add some great stuff in upcoming releases. This is sometimes referred to as the cupcake theory of product development. For us, this meant focusing on a very specific feature-set that the entire team agreed on:

At this point, our visual designers started working on the main screens and animations for the Alpha release, and the dev team started to build the back-end.

By the time the team published Alpha, we were all quite beside ourselves with excitement. The Alpha was already an amazing app, and we couldn’t wait to get it into the hands of users. So we moved on to the next phase…

Polishing a diamond in the rough: More usability testing

We did two things with the Alpha version:

We released it as an internal Alpha to a subset of users in our own company so that they could try to break it and help us fix bugs.
We did another round of usability testing to do a few last course corrections if needed,

At this point we also started working on the fun parts of the app—those extra little animations and interactions that just make the app special. Our visual designers and developers did a fantastic job on the details here. Below are a couple of my favorite animations in the app:

Long press on an avatar:

Org chart animation:

These animations are subtle and not overbearing, but really help to bring some personality to the app.

Ship it already: Knowing when you’re done

Today is our official release date! All in all this is one of my favorite projects I’ve ever worked on. The team is amazing, the process was fantastic, and we can’t wait for you to start using it for us to add even more useful things to it!

Questions on our design process? Comment below!