Grin

Visit dribbble project

Making the workplace more fun and engaging by enabling coworkers to call out each other's achievements and connect with each other.

The Problem

When I began working at Digital Telepathy, a UX design agency in San Diego, it began undergoing a period of rapid growth. As the agency grew and took on many newcomers all at once, a big problem emerged: how can the company retain a strong sense of community and camaraderie in the face of this growth?

This sense of community was an integral part of the company culture, so retaining it was of the utmost importance. One of the key behaviors exhibited that reinforced the company culture was the daily announcement of "Grins" - a conjunction of gratitude and win (sort of like giving kudos). The issue with this behavior as the company grew was that it was difficult for everyone to be at the right place at the right time in order to hear the announcements. So naturally, these needed to be somehow digitized so that the could be created and consumed asynchronously.

Another problem was that newcomers were having a difficult time connecting with team members, so they needed a quicker way put names to faces, find shared interests, etc.

. . .

Users & Audience

The target users of Grin are young professionals working in the creative services industry. These users have a strong preference for mobile-first, fast, real-time communication. Email just doesn’t cut it anymore.

A key differentiator of this user group is that they are heavy users of Google Hangouts and Google+, so they want something that feels familiar to those experiences, but is more heavily mobile focused.

. . .

Team & Role

Having had previous experience designing a native iOS app from the ground up, I led a core team of 3 designers, with occasional support from internal developers.

I coordinated and led all facets of design including: information architecture, user task flows, interaction, visual, product, and prototyping. I also conducted user research using methods such as interviews, surveys, focus groups, and participatory design in order to address both user behavior and attitudes.

. . .

Design Process

In order to identify if this product was worth building, as well as what it needed to accomplish, we started out by assembling a focus group of target users. After sifting through all of their feature requests, we were able to identify their key pain points: they wanted an easier way to share grins (gratitude + win) and keep themselves appraised of everyone’s accomplishments. Although we knew that the app could grow to be something much larger and more robust, we focused on creating an MVP that met the user’s core need.

We identified the key specs that had to be included in the app in order to build the MVP, then mapped out user flows based on those specs (a lot of whiteboarding was involved). At this point in the process, we found participatory design to be extremely helpful. We actually had end users mapping out their ideal flows, which we were then able to incorporate into our design.

Based on the user flows, we constructed the information architecture such that there was a minimal level of difficulty to immediately accessing relevant information. After all, the goal of this product is to enable users to quickly and easily consume information.

As we started to explore the interface and visual design, we found this point in the process to be the perfect time to engage in Crazy Eights exercise via a variety of media (pen & paper, Photoshop, etc.) in order to rapidly iterate on a wide variety of ideas. Because the central component of our app's experience is a feed, we wanted to push the boundaries of what a feed could look like, while remaining familiar enough that users wouldn’t be scared away.

. . .

User Interface Design

The objective of the interface was to keep the app fun and unique to team atmosphere. This was accomplished through the use of heavily rounded corners, vibrant gradients, big beautiful photos, and quirky, playful icons.

Because Grin is an internal app, users sign in with their company gmail account and password. It’s nice for users not to have to create yet another app account.

Users can easily scroll through a feed of all grins (no newsfeed algorithm here). They can see who made each grin and who it was addressed to. They can also create a new grin with the single push of a floating action button. They can navigate to settings (swipe right) or to browse profiles (swipe left).

When searching for someone specific, users can filter between departments using the tab bar, making it easy to quickly find who they're looking for, even if they don’t know that person by name.

Big, beautiful pictures that let the person's personality shine through. If users want to directly contact a person, they can easily to do so by clicking the ”contact” icon. Users can also write a grin with a single push of a button.

When searching for someone specific, users can filter between departments using the tab bar, making it easy to quickly find who they're looking for, even if they don’t know that person by name.

. . .

Interaction Design

In order to reinforce the fun and friendly tone that was established for Grin, we used a mix of iOS conventions, a Material Design inspired interaction model, as well as fun, springy animation. Even though Grin has not yet been developed, we found the high-fidelity interaction prototypes to be extremely useful in gathering valuable feedback. So far, the results of user testing indicate and overwhelmingly positive response.

Grin's interaction model is inspired by Google’s Material Design. The background plane is the blue/purple gradient, which stays constant. Anything that appears in white is on the secondary level, meaning that it’s always above the ground plane. That’s why when a users clicks through to a secondary level screen, they are taken to a secondary level layer.

The navigation between the three main screens (settings, feed, browse) utilizes a lift/right swipe interaction, similar to that seen in Snapchat, Tinder, Twitter, etc. A friendly spring easing curve is used to go with the tone set by the colors, iconography, etc.

. . .

Outcome

The app was well received within the company. While it has not yet been released, it has already increased communication within the company by becoming a rallying point for strengthening internal community. Another by-product of this project was that it initialized the new mobile product design and development process within the company that ultimately helped it to take on new mobile projects which it wasn't able to before.

As a result of this experience, I learned that when designing a product for a new environment, bringing in the engineering team early on in the project really helps things to go smoothly down the line.