Productizing the Livefyre poll API
Design lead UX/UI, created at Livefyre 2015
Livefyre’s platform helps brands and publishers harness user-generated content from across the web, turning it into meaningful digital experiences that engage their fans.
My challenge was to create a system of widgets that our customers could easily embed on their websites to interact with their readers. In addition to offering API's that more technical customers could completely customize, we wanted to empower all users to create, customize and publish apps without any code using our software UI.
The original poll widget
The out-of-the-box design looked like this.
At the time, only customers with engineering resources could embed the APIs on their website. Most publishers were embedding the polls within articles. Marketers wanted something engaging to put on the right-side column of a website.
We wanted to improve the visual design, create a mobile first experience, and enable self-service styling for the app.
I started the process by designing the end user experience. After talking with publishers who used polls the most, I focused my designs on a simple, image-driven, mobile-first experience. The goal was to create an experience versatile and elegant enough for our customers to use without having to apply custom CSS.
Because this problem was clearly defined and relatively narrow, this was a great opportunity to fine tune granular interactions, UI and visual design. Initially, I explored a range of designs.
Poll question & answers
Took these mocks back to some of our main customers using polls – Mashable, CNN, DC Comics, Ubisoft – to collect their feedback. Customers were excited about using images in polls. One insight was that the poll has many states on a website: not started, open, closed, deactivated.
Across all of the Livefyre web widgets, we have 7 main categories which remain consistent, for example, size, font, brand color. This creates a family of widgets that can be used together.
This attribute is defined as text size and padding. We added a new style – extra small – across all of the widgets to accommodate long text.
A light and dark theme designed to accommodate various website's look & feel.
Varying number of answers
Setting the behavior for a minimum and maximum number of images. My hypothesis was that after 6 answers, paradox of choice came into play and there were diminishing returns. Six images could also fit into a single screen on a phone without scrolling which was a better user experience.
Found customer examples and used the longest and shortest word counts to test.
States of the app
For such a simple widget, there were many states to think through. What happens when the poll is closed but still visible on the site? How does a user get validation after answering a poll if there are no results displayed?
Final poll experience
Iterating post launch
Despite my hypothesis that capping the answers at six was a better user experience, we got feedback from multiple customers asking to include up to 20 answers after the widget shipped. For better or worse, we accommodated this feature request.