Jenn Berney
LF_Apps_Hero (2).png

Productizing Livefyre Poll App

 
 
 

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 fans. 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. 

Here's a look at the in-depth process to create the poll widget.

 
 
 

Original poll widget

The out-of-the-box design looks like this. At the time, only customers with engineering resources could embed the APIs on their site. Most publishers were embedding the polls within articles. Most marketers wanted something engaging to put on the right-side column of a website. A few things we wanted to improve: dated look & feel, not mobile friendly, no images, not responsive.  

 
 
 

Scope & constraints

Poll widget

  • Create a poll with images
  • Create a custom text
  • Change the number of answers on a poll
  • Responsive design
  • Fits within our existing system of apps

Designer

  • Add text input
  • Add photo upload
  • Add image cropping
  • Interactive states
  • Utilizes existing styles 
  • Reorganize categories in designer to accommodate new configurations
 
 
 

Design approach

I wanted to design a beautiful and engaging experience for the widget first. After talking with customers and doing some competitive analysis on other polling apps, 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. 

 
 
 

Exploration

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

Poll results


 
 

User validation

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 the need for flexibility around different states for the poll.

 
 
 

Visual styles

Across all of the web widgets, we have 7 main categories which remain consistent. This creates a family of widgets that can be used together. Size, font, brand color, etc.

 

 

Size

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.

 

 

Theme

A light and dark theme designed to accommodate various website's look & feel.  

 

 

Prototype

Worked with engineering on this quick test for applying styles.

 

 

Image ratio

Required set image dimensions that could be communicated to users. These image dimensions worked well in the designs for the biggest group of images.

 

 
 

Interaction design

 

Multiple images

Responsive states

 

Single image


 

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. 

 

 

Word count 

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?

 

Poll

Results


 
 

In the widget system

 
 
 

Designer iterations

Now that we understand the ideal user experience, we can reverse engineer to design the creation process.

 

What didn't work

 
 

Building a widget flow

Users can create content, style and embed the widgets on their websites without using CSS. We had about 5 iterations of this prototype. We did scrappy, internal testing. Only one state on the artboard. How do we account for 2 states or interactions? How do we enter content? How do we crop images?  card sorting exercise with customer support advocates to help improve the IA for customers.

 
 
 

Final mocks


 
 

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.