Tales of an Outbrain Internship: What I Learned About UX

tales-of-an-outbrain-internship

What does UX mean?

The tech world loves acronyms (CTR, B2B, MVP, SaaS….?) and UX is one of those acronyms that doesn’t make sense to most people outside of the niche.

For reference: click-through rate, business-to-business, minimum viable product, software as a service

I am here to help!

UX stands for User Experience, a broad term that incorporates everything that goes into interacting with a product.

UX at Outbrain includes interface design for widgets and dashboards, researching what users expect from a screen, creating a style guide… and a lot more.

As an intern this spring I have made it my mission to learn all about the Outbrain UX team, which is both international and divided by product.

Each member works with a specific aspect of an Outbrain product, along with developers and project managers, as the lead of design for that particular area.

I’ve been hopping between these teams, doing a little here and there, and getting an idea of what everyone’s day looks like.

Want to know what it’s like working on a UX team?

Let’s take a look…

The Leader

 

uta

Name: Uta Knablein aka Designer Wrangler.

Works on: The customer experience of all Outbrain products and the interconnections and touch points to the organization at large.

Tools: Sketch, UXPin, InVision, Frontify, BI for data plus ears for listening and a voice for communicating!

Super power? She already has em!!

Uta is our benevolent UX Overlord!

She manages the UX team’s direction, making sure that everyone is collaborating, inspiring each other and staying consistent in product design.

There’s a lot that goes into this job!

A big part of what Uta does is talk; she meets individually with all of the UX team members, checking in about past and future projects. Though she doesn’t oversee individual project details, she does make sure everyone is on track, and is able to bring individual concerns to the group.

Since Uta seems to know everyone at Outbrain, she’s also able to introduce the UX team and their ideas to the most relevant company members, creating connections that most of us wouldn’t be able to make.

She also inspires us, sending out UX articles and new tools to use to keep us fresh. The world of UX is constantly changing, so having someone who is on top of collaboration and design tools is key!

Lastly, Uta is bridging the gap between product and marketing aesthetics of Outbrain! To create a truly consistent “feel,” both the dashboards that consumers interact with and the marketing side—website, tech blog, Github—should conform to the same design standards. Uta oversees all of this work in creating an Outbrain company-wide style guide.

Uta made sure that I met with all the team members soon after I started my internship, so I knew what everyone was working on and had projects from everyone right away.

She also was able to introduce me to other developers and managers—which gave me access to server space on the Outbrain internal team and the company Github.

Thanks Uta!

The Guide

 

savi

Name: Savitha Pal aka Savi.

Works on: UX/UI for Sphere, Symmetric UI.

Tools: Sketch, Invision for prototypes, Basecamp for documentation, Axure for wireframes.

Super power? Ability to play any instrument like a musician of choice OR learning through osmosis!

Savitha has recently been tackling brand new territory: Outbrain for Chat!

This new product allows news outlets and other publishers to set up bots that “chat” directly with consumers through a messaging app. The customer interacts with a script as they would interact with a friend, asking for news on a certain topic or more articles about current event.

Outbrain for Chat provides the same curated content that Outbrain is known for, but in a more responsive format.

Since the product is so new and changing so quickly, Savitha’s design work has to move fast. A lot of the screens that are pushed out are early drafts of designs that Savitha revisits and revises after the initial launch.

It’s a good thing Savitha’s assigned to this fast-moving task, because aside from Outbrain for Chat, Savitha’s brainchild is all about the basics.

She is the gate keeper of Symmetric UI, the visual language of Outbrain, which provides visual logic that designers and developers can assemble “out of the box” into cohesive designs cross-product.

Savitha’s domain is a large editable file of elements—buttons, typeface sizes, models and charts—that govern the look of Outbrain products. Symmetric gives the design process more structure, allowing easier prototyping while maintaining cohesive products.

I’ve worked with Savitha to move Symmetric from a static form to a live web version. This interactive site is still in beta, but an example of the screens here!

OutbrainSymmetric

The Sprinter

 

mathis

Name: Mike Mathis aka Mathis.

Works on: UX/UI for Amplify, Usertesting.

Tools: User Testing, Axure, Sketch, InVision, Illustrator.

Super power? Crab claws.

Mathis is a sprinter! But not quite like Usain Bolt…

Instead, he works on fast-paced, focused projects within the Amplify product. Amplify helps marketers create and monitor advertising campaigns, and bringing this product up to speed with the Symmetric style guide is no small task.

While I’ve been here I have seen Mathis update the campaign creation experience, redo the new customer funnel and refresh the campaign management dashboard.

Updating these interfaces doesn’t just mean changing the colors. Mathis thinks about which data should be hidden or revealed at what step of the interaction, which element positioning makes the most sense, which behaviors belong to which buttons.

These decisions are fortified through user testing—showing a prototype of the product to a user and asking them to complete a task without any guidance about how it should be done. Mathis watches where the user looks, clicks, and what process they expect to go through in order to accomplish the task.

These steps reveal how the user expects to interact with the interface; what is and isn’t intuitive about it. Mathis incorporates these results into the design.

Inspired by Mathis’ work with the funnel, I took a stab at “Symmetrifying” the login screen.

Take a look!

Login Screen - After Reset Password

Login Screen - Reset Modal Submitted Hover

(Photo: Login screen update)

The International

 

ofer

Name: Ofer Perach aka Head of UXD, Israel.

Works on: UX/UI for Amplify.

Tools: Sketch, Adobe Creative Cloud, InVision.

Super power? Making changes telepathically.

Every Wednesday, we meet with Ofer in her house!

Well—technically it’s via skype, but in order to get to the UX team meetings, Ofer has to stay up late. She is the sole (proud!) member of UX at Outbrain Israel, so meetings in the afternoon in New York are late at night where she is, across the Atlantic.

Ofer works on bringing Amplify up to speed with the new style guide.

She has a similar “sprint” schedule to Mathis, targeting specific features and screens for updates in a short timeline. Much of this work involves working closely with her Project Manager so the design work is tied in closely with the Research and Development (R&D) team.

Working in parallel with the engineers who are implementing the Amplify redesign is key to a rapid release cycle.

After she has her daily meeting with the PM, Ofer dives into designing.

The Amplify product has a lot of components, so this work is anything from charts to graphs to sliders full of information.

Ofer is a key component of the international team, and introducing UXD to the Israel office singlehandedly is no small task!

The Wireframer

 

claud

Name: Claudia Mei aka C Dizzle.

Works on: UX/UI for Engage & Visual Revenue.

Tools: Sketch, InVision, Basecamp, Axure.

Super power? Ability to speak any language.

My second week here, Claudia dipped out to Israel.

At the time I was jealous, but face-to-face time with the Project Manager is an invaluable part of Claudia’s UX job. When you work with people from different continents, travel is just part of the job description!

Claudia’s work spans a couple Outbrain products, but focuses on Engage, which serves up data for content publishers and displays specific performance of content across many metrics. This reporting means a lot of charts displaying consumer engagement and specific performance of content.

As a result, Claudia is wireframe queen—creating complex dashboards that can display all this information while still being visually appealing.

Claudia uses her UX background to visually represent a large amount of data in a cohesive, clean dashboard.

I had the chance to sit in on a meeting where Claudia presented some initial wireframes to the Head of Product at Outbrain.

By talking to the actual users, I saw how Claudia was able to shape the product based on the needs of the people who would interact with Engage. What is the first question the customer wants answered when they open up a page?

Below is an example of one of these dashboards.

VR-ContentIndiv-HoverTooltip

The Innovator

 

krish

Name: Krishna Shukla aka Dr. Badass

Works on: UI Widget Innovation, FTC widget compliance, product gallery, top and bottom drawer widgets

Tools: Sketch, Proto.io, Photoshop, Illustrator, InVision

Super power? The ability to make it rain tacos

If you’re thinking UX only applies to tech, you’re wrong!

Krishna works with the government (the Federal Trade Commission to be exact) which recently issued regulations on native advertising.

Basically, the appearance of ads has to be regulated so consumers know what content has been paid for. Krishna makes sure that Outbrain widgets conform to these regulations—while still looking fly.

But that’s not all Krishna works on.

She is a widget innovator, meaning that she’s on the front lines of researching and implementing creative, custom widget experiences for diverse client needs.

Australian publishers, for example, are much more open to fun animations and interactions when a user hovers over the ad. In contrast, some American news media publishers prefer a more subtle interaction experience. Krishna creates clickable versions of many widget experiences for publishers to try out.

I worked with Krishna on some of these clickable prototypes in InVision, a prototyping platform.

Check out the designs reflecting different types of mobile ad content:

krishna_invision

(Photo: Different widget versions for mobile)

To Wrap

So…what is UX?

It’s not so easy to define, but working with the Outbrain team has given me insight into the many components that create the experience of the Outbrain products—all the way from ideas to testing to revising to deployment.

Want to get in on the action here? Check out the Outbrain careers page to find out more about awesome internship opportunities on great teams like mine!

Launch your Campaign!

Create full funnel campaigns that drive real business results.

Start Now