IntroHQ

Professional networking with Slack

Ever wonder how to leverage your Slack team member’s professional network? Well, Intro is building a platform that enables Slack teams to do just that. There's also an Intro Slack app that's integrated into the experience, making it fun and easy for users to search, connect and find people in their Slack team's network. Pretty neat, huh?

They hired us to redesign their existing marketing website and web app as well as take Intro to the next level.

image description

Insights

Professional Networks

Social networks are a dime a dozen, but there are very few professional networks that actually leverage your work team's network. People use LinkedIn, Google Plus and Twitter to meet new people and find new opportunities, however, Intro is out to build an even better service.

image description

Our Users

First, we needed to understand who our target users were in order to best design for them. So we developed personas which helped the team get a realistic representation of our key audience segments.

image description

Use Cases to User Flows

From the personas we were able to develop use cases. Each use case was based on what each user type cared about the most. We started with four use cases and quickly figured out that each one of those can be broken out into sub use cases.

These use cases were then translated from goals to objectives which were then sketched out to create user flows.

image description
image description

Wireframes

Following the user-flow exercise, we created wireframes which helped us get a better picture of the UI building blocks of our interface. The main goal here was to focus on and optimize the user experience. There was also an opportunity to start thinking about the information hierarchy, layout, and overall structure of the user interface for each screen.

image description

Visual Design

Once the wireframes were approved, we then focused on creating high-fidelity design mockups in Sketch. Here's where ideas began to solidify and the user interface started to take shape.

image description
image description
image description

Interactive Prototypes

Next, the team wanted to get a better feel for the flow, so we used inVision to create clickable/intereactive prototypes. The team loved clicking through each flow! This step helped test and validate the team’s assumptions.

image description

Specs

Lastly, we used an app called Zeplin to hand-off designs to developers. It's an awesome collaboration tool that makes it easy for developers to build the front-end saving us a lot of time!

image description

Bonus Assets

As a bonus, we created animated gifs of the prototype and shared them with the team. The GIFs were so well recieved that they decided to use them in the marketing website as informative content for new users.

image description
image description

That's it!

Thanks for reading and feel free to check out Intro for yourself!