My Portfolio

👋 Thanks for stopping by–my name is Ben Lister and I'm currently a Staff Product Designer at Sprout Social, where I lead the Design Systems team and help create Seeds. Here you will find Case Studies and Writing, Prototypes and UI artifacts, some details on my background and even a few blasts from the past.

Case Studies, Writing & Links

Prototypes & UI

Creating complex queries with a simple web form (2017)

This query builder workflow was created to enable customers to compose complex Gnip queries in Sprout's Social Media Listening product. The challenge was to create a workflow easy enough for beginners and robust enough for power users, who are familiar with writing complex, manual queries in SQL. This workflow was created using HTML, CSS and React. A similar version shipped as part of the product's public launch in October 2017 and is still used daily today by many of the world's top brands.

Your year in Social (2015)

This project was built during Sprout's 2015 Hack Week. My team, which consisted of a front-end engineer, a visual designer, a copywriter and myself, spent the better part of 6 days (and nights) working on the proof-of-concept project, which summarized a customer's year in Social Media. I led the design and creative efforts for the project and collaborated on creating 11 unique visual experiences for the project.

The challenge for me was learning a hand full of new techniques and technologies including Canvas, React and CSS Animations while iterating on the visual designs as the project's scope and data evolved. It was a tireless week, but by the end, it became one of my all-time favorite projects due to the lack of constraints we were given and boundaries we were able to push in such a short period of time. The project went on to win the Hack Week award for most creative project.

Reimagining the Color Picker (2018)

This color swatch picker prototype was built for Sprout's design system, Seeds. After interviewing users of our system, we discovered that many people had issues with the previous color swatch workflow. The previous version simply listed all color options in a table and relied on various select menus to change the user's selections, providing no additional visual cues or documentation.

With this refresh, I aimed to condense the color display panel (which has more than 80 variations across our color palette) and prioritize it by the most commonly used shades. Additionally, I added a pane on the right of each color group, which lists the color value in a variety of formats that are commonly used by our users. The version that my team later shipped was tweaked based on user feedback but remained largely the same.

Previous Color Picker Workflow

Prototype

See the Pen Seeds Color Swatch Prototype R3 by Ben Lister (@benlister) on CodePen.

Final version

Seeds Color Picker
Interactive Icon states (2018)

The goal of this project was to standardize interactive icon states across Sprout's products and subtly add delight to otherwise monotonous user actions. My team and I spent several weeks researching accesibility best practices, testing performance implications and working with our motion design team to prototype these interactive icons. The end result lives in Seeds' icon documentation and serves as a template for future interative icons used in Sprout's web app.

I worked with our motion design team to define translatable animation criteria, design and port Adobe Premier prototypes to CSS keyframe animations. The animations had to be performant and unobtrusive enough to be used by Sprout's customers' hundreds of thousands of times every day.

See the Pen Actionable Icon Animations Demo by Ben Lister (@benlister) on CodePen.

Audience Targeting popout (2015)

This flyout menu was built to simplify the process of audience targeting for Sprout's Social Media publishing. Each social network has different requirements and parameters that can be tailored, so developing a unified workflow was a particularly challenging problem. The solution presents users with a simple and familiar workflow to quickly and confidently make and review selections. When this feature shipped in 2015, it was touted as a major competitive advantage for the company.

Flyout example

See the Pen Targeting by Ben Lister (@benlister) on CodePen.

Early prototype

Sorting Analytics (2017)

This prototype was built for Sprout's Social Media reporting product, which contains fully-customizable reports that can be shared and exported in various formats. The goal of this project was to create a simple workflow to quickly configure and sort reporting data. The customizable components vary in size and complexity, so the challenge was to create a workflow that was easy to use on a large number of supported devices and browser configurations.

I created two approaches, the first version simply shifted content up or down depending on the user's action. The second option followed the transitioning content to its new position in the report. After testing, the second version was ultimately chosen because it gave users a better spatial understanding of the content's hierarchy in the report, which was particularly important in larger, more complex configurations and smaller browser windows.

Initial Prototype

Final Direction

My Background

I got my start building a Nirvana fan website at age 13. The site began as a hobby to fill time on summer break but eventually grew into a passion project and eventually one of the internet's most popular Nirvana fan sites. During my time running the site, I connected with former band members, had a sponsorship from the band's record label and negotiated acquisition terms with a start-up, all before I was legally able to drive a car. In addition to the business lessons learned, I also become a proficient designer, learned many of the web's technology building blocks, and most importantly, discovered my passion and future career ambition.

After college, I moved to Chicago to work at a small interactive agency and later a start-up that created a CMS for radio station conglomerates across the US and Canada.

I joined Sprout Social as the first design hire and one of the first 10 employees in the Summer of 2010. Sprout currently has around 30 designers among their 600+ employees spread across 4 offices in the United States and Europe.

Sprout is an industry leading Social Media Management software platform for business. Sprout partners with Twitter, Facebook, Instagram, Pinterest, Google and LinkedIn and creates a suite of tools that help empower 20,000+ customers ranging from SMBs to many of the world's top brands.

I have worked on nearly all of Sprout's core products during my time at the company but in the last several years, I've primarily focused on Publishing, Analytics and Listening as well as Sprout's design system, Seeds.

In late 2017, I moved from a traditional individual contributor role to a hybrid 40% hands-on, 60% operations role. Currently, I am a Staff Product Designer and lead Sprout's Design Systems team.

Deep Cuts

We all have to start somewhere. This is a trip down memory lane to some of my favorite projects from earlier in my career.

Find me elsewhere

Questions, comments? Feel free to reach out.