Rethinking the role of the social network at work

Gravity: an internship & design exploratory project built at Bottle Rocket

Great culture is pivotal to great work.

At my internship at Bottle Rocket, I really learned how far a great culture can take you. Doing work you were proud of was practically contagious. It followed that Rocketeers liked staying connected outside of work as well, and eventually settled on a social network for doing so: Path.

The Current Solution

Left to Right: Profile, Finding Friends, and Timeline in Path. Screens from the awesome Pttrns.

Path is a great social network for keeping tabs on those you consider closest, and from using Twitter & Gmail for friend-finding to notifying you about who views your profile, every part of its experience follows through with that goal. However, after discussing with a few Rocketeers and seeing how they use Path day-to-day, a common set of problems arose.

Path, while a great network for your closest friends, can leave a bit to be desired for a work-centered network.

From confusion on whether to unfriend a coworker after leaving, to the complicated process of adding everyone on the network (i.e. one-by-one), it was clear that Path was built with a different audience in mind. Many of the issues with Path could be rounded up into two core points:

  • The Friends List Hassle: Everyone wanted everyone on their list, but both adding and knowing to remove friends was a chore.
  • Something for Work & Play: Rocketeers figured that if they only used Path for Bottle Rocket, why couldn’t it assimilate better with the culture?

Exploring the Concept

For background, Gravity was designed with an unusual added constraint in mind: it was a project for Bottle Rocket’s Intern Rocket Science — a 24-hour Red Bull & Jack In The Box-fueled company hackathon — so I alone had to be able to develop it in 24 hours. Taking that in stride, constraints had to be added to UI flourishes and an extra emphasis placed on modularity.

After speaking a bit more with Rocketeers, I filtered down to three ways a social network could not just help Rocketeers connect, but also engage & work.

The Frictionless Network

Working at an agency, digital accounts abound, be it chat, intranet, or email. Rocketeers didn’t need another one. Rather than having users create yet another account, the app could tap into HipChat (what we used for chat) and use that to both authenticate & access a directory of all Rocketeers — also bypassing the concept of a friends list altogether.

The Anticipatory Network

One concept to arrive at a network that integrated better was one with contextual awareness. Tapping into calendars & geo-tagged posts, and paired with a concept of placing a Bluetooth beacon in every room for more precise geolocation, the app could have contextual awareness of what was going on in the office around it. Location, current time & date, and proximity to upcoming events could all be used to prioritize & surface work information that Rocketeers may be interested in, in addition to social posts.

The Cultured Network

At the intersection of work & play, Gravity would update Rocketeers on company social outings, upcoming design & development conferences, internal events the user is interested in (say, for example, yoga), and simplify some tasks still done with paper or via email, such as office feedback, suggesting a charity for Bottle Rocket’s monthly donation, or nominating a fellow Rocketeer for the peer-awarded Steely-Eyed Missle Man Award.

Sketches & Wireframing

Then came sketches. A recurring theme among the three goals was contextually surfacing information based on contextual data. To simplify surfacing events and meetings based on location or time, these were collected into screen elements named contexts, later becoming a mainstay on the home, room, and company timeline screens.

Early sketches for contexts, posts, and the profile in Gravity

Sketches continued for other integral and modular components of the interface, with multiple iterations for posts, the timeline, profile and others to find balances in layout, visibility, and quick implementation.

Sketches with posts experimented with showing comments inline within timelines, and sketches for the profile experimented with custom bio info in addition to the user’s automatically gathered position title, forgoing both for the goals of clarity and ease in implementation. Early context sketches started with listing context info inline within the post timeline, ending with contexts as a horizontally scrolling element above the the timeline that fades away when scrolling down for greater focus and to avoid content over-saturation.

Visual Design & Implementation

Mockups & Objective-C prototypes of the Contexts Element, Compose, and Timeline screens.

Throughout the interface, subtle motion is used to guide users to either the next point of interaction, like how the post options fly up into view from the bottom of the screen right under the user’s thumb, or to showcase new possible interactions, like the automatic horizontal scroll present in the context screen element.

Another major influencing point in the interface is an attempt to keep the timeline leaning towards a more personal tone, even when interlaced with work-related content, accomplished by using the user’s profile image and background behind the context view a the top of the timeline, and a subtle reference back to it via the background color of the navigation bar when scrolling down the timeline.

Objective-C prototypes of the Company, Here, and Award Nomination screens.

Motion comes into play again in the Award Nomination and Charity Submission screens, with a playful card dropping down into view with a dynamic bounce, indicating to users that they may then swipe it down to dismiss it. The Company screen also takes the idea from the Timeline screen and uses company branding to set the tone for the content present in that screen.

Using modularity and motion, contextual awareness, and tapping into existing company services, Gravity’s experience hits the earlier goals of a frictionless, anticipatory, and cultured company network, and provides a more integral experience to Rocketeers than using an existing network.

Now, time to do it all again for Android.

Like what you see? Disagree with a passion? Feel free to reach out at