What is Uberflip ?
Uberflip lets marketers give their content a home. Through various tools, marketers can build amazing experiences around their content to promote engagement and generate leads. As a marketer, you have the control over your content. All areas of your business can access your content library allowing you to ensure that the content going out to customers and prospects is up-to-date and branded. Marketers can pull all of your content into one central location for better management. No longer manage your videos on one site, social on another, and blogs on one more. With Uberflip, all your content is easily managed in one dashboard and it creates better experiences around your content for increased engagement. Take the insights you gather with Uberflip and optimize your future content to be more in line with what your readers want, presented in the way they want to consume. For more details go here : www.uberflip.com
What are Uberflip Extensions ?
Uberflip’s Chrome and Outlook extensions allow you to easily access your company’s content library in order to send completely targeted selections to leads and opportunities. The extension gives you access to your Uberflip library from your email or browser, i.e. from within Gmail or Outlook or within some of your favourite apps in the Chrome browser like Front or SalesLoft, so you don’t have to leave what you’re doing to grab great content. Users can add visually appealing content tiles to their email to get more engagement than ordinary text links. Along with sharing individual pieces of content, users can also share complete 'Marketing Streams', 'Hubs', and 'Sales Streams'. Users can even create new Sales Streams right in the Extension. Users can also pin content to the top of the Extension for easy access whether they’re a marketer pinning your top-performing content for your reps to see or a sales rep pinning favourites for easy access.
The Problem
Re-designing a hackathon byproduct without any access to end users and no prior user research time allocated.
The original product was called " Uberflip Shout " and was conceived in a hackathon like event within the company. While it provided some value to the users by helping them include marketing content in a visual manner, the interface wasn't conducive to selecting the most visually appealing and or contextually relevant articles. It was just a pair of drop-downs that users used to zero-in on the content based on memory rather than discovery.
The first version of Uberflip shout extension for gmail.
“It (the interface) was just a pair of drop-downs that users used to zero-in on the content based on memory rather than discovery.”
Research
Doing User research on my own time. I came up with the two personas that represent the key users of the plugins. The Marketing dept and the Sales department are the ones who use it and out of these the sales reps are the primary personas because they send out emails to prospective clients with articles an case studies to convince them whatever they are selling is the right fit for them.
Personas
The Sales Reps were the primary personas and were the key users of the plugins, I talked to sales users (the in-house sales team uses it) through informal interviews and water-cooler talks and tried to glean as much qualitative information as possible. The product was built in a way that no quantitative data could be collected from it using traditional analytics software so we didn't really have a lot of data to work with.
The Marketers were the other important group that would use the plugin and act as the secondary users. I talked to the in-house marketing team at Uberflip to understand the needs and pains about the current product to find out ways to improve it. They are the ones who create the content and have a better grip at understanding which content resonates well with particular groups of prospects.
Trying to understand the users better ...
As I delved deeper into the problem the sales users were facing I started forming my ideas around the product and what key things we should include in the new version. These are the key insights / product ideas I gleaned from the research I performed with internal users.
Key Insights :
1. Visual way of browsing through the content.
The key reason people wanted to use this product was to make the emails more appealing visually and present the articles and content in a manner that invited the users to read them. The visuals associated with the articles were the most important part of this process and were completely missing from the user flow while they are selecting the content to push into the email. Including the thumbnails of all the elements while browsing gives the users a better idea of what to expect when they will insert that content into emails.
2. Recommendations
One of the key value propositions for Uberflip is that they integrate with all the leading marketing automation software like salesforce and marketo and we have the data flowing to and from those systems. We can use this data to suggest what content will be best for the different prospects based on signals like position, company size, industry vertical etc. Solving the sales reps conundrum on what articles will resonate with the person they are emailing and reducing the workload for the marketers.
3. Sales Streams and Creation of Sales streams within the plugins.
Sales streams are like collections of logically relevant content for a target audience. Streams are what Uberflip has for groups of content and Sales streams as name suggests will be for a particular sales prospects or categories of prospects and can be reused and modified on the fly before sending via emails. I recommended that users be able to create and modify the target streams inside the plugin contextually while creating the mail rather than going to another screen/system.
4. Pinning stream in the main nav for highlighting important content
The marketing team usually runs campaigns to highlight certain parts of the product or new content across channels and they needed a way to shine a spotlight on relevant streams and content inside it. You can pin up-to three streams to the main nav in the plugins so that the sales reps can easily find the promoted content and use them in their communications.
5. Recently used content
When I talked to the sales reps, one of the key methods they used to find content was referring to what they sent out in the recent past. They would go to the sent folder and rifle through the emails to find that one key piece that they cant remember the name of. SO I included a recent tab in the main navigation to ease this behaviour and enabling quick re-use of content.
Platforms
The first version of the plugin was released for Chrome/Gmail combination but overwhelming feedback from clients was that they use Outlook or Outlook 360 for their emailing software and the team scrambled to release a version for outlook. the problem here is that outlook has a " 300px by screen height " form factor while the gmail version has no such limits and was roughly " 600 by 800 ". We needed to adapt the designs for these two very different form factors.
For the new version the sizes were changed and two distinct designs were created rather than trying to fit the features into a smaller size. It almost became a responsive design system where we used the same underlying code and visualized it differently for different form factor.
For Gmail the size was 1000 pixels wide and 700 pixels high. And for Outlook it was 300 pixels wide and as high as the screen size permitted. We put it at an average of 800 pixels based on teh screen size data from google analytics.
Wireframes and Mocks derived from User Stories :
The biggest reason people wanted to use the plugins is to embed visually appealing thumbnails in the emails they send to the clients or prospects however the users werent able to preview the thumbnail when selecting the content to embed in the older plugins. We changed the way people browse the content within the plugins and brought it close to the experience in the actual uberflip app itself. A grid of thumbnails greets the people when they open the plugins rather than a couple of dropdowns.
Gridview for all available content :
You can click on the images to enlarge them.
Reccomendations
One of the biggest problems people faced was identifying which content is best for the current prospect they are communicating with. So we made a new recommendations section that would help users find the best content they can send to a particular person. We use the email from the sent field in gmail or outlook and check with signals from the marketing automation software like Marketo or Salesforce. We take into consideration several parameters like the role of the prospect, the company size, the industry vertical etc and cross reference it with content sent to similar people before.
Then we show the best content in order of suitability with a inidcator below it to show how suitable it is .. going from 100% to the low 20s.
Sales Stream Creation
Often the sales representatives send more than one piece of content to a prospect. In fact sometimes they want to send more than 4-5 articles but adding a high number of thumbnails makes the email a little overbearing. Another problem with that is if they want to send the same kind of content they cant reuse this email as a template and send it to somebody else.
To solve this we came up with Sales Streams (earlier called Target Streams) which act like a container for related content. these sales streams are available across the sales teams once created so that people can use good examples created by other sales personnel.
Editing or adding items to existing Sales Streams
Once you have created a few good sales streams you would want to keep using them to save time and energy. However sometimes you want to add a few interesting pieces specific to a prospect along with the ones already there or remove a few pieces of content that might not be suitable.
Editing the sales streams on the go helps these use cases especially when several people are going to use them over time. Also sometimes there might be an update to a how-to video or knowledge base article in the sales stream which has to be updated. Different roles might want to edit these as needed.
Design : Redesigning Tiles/Thumbnails
As mentioned earlier the visual element of the plugins brought on by embedding the thumbnails is the main draw for these plugins. The old designs for these did not take into consideration how would these look inside an email or a plugin which had significantly small display area.
There were no stream or hub level thumbnails either because in the older versions they could not embed anything except a post. With this version all of that changed. We can now embed several different types of content and even add hubs and other streams inside sales streams. This prompted a redesign of teh thumbnail structure and how it look sin different applications.
The evolution from older cramped design to the new visual focussed thumbnail.
Three different modes available for hub thumbnail, first two show the size difference hen seen in gmail vs outlook due to the form factor of teh plugins. the third has a CTA link which aides in the click-through rates by giving a clear purpose for the embeds.
The different content types have a slightly different tile design. The Hub and Stream tiles are stacked cards showing that its a group and has more than one piece of content. the sales streams add a avatar of the sales person you are receiving the email from to add a level of personalization to it and makes people more likely to look into the content shared. The last on is a post which has a large juicy image dominating the tile.
If you notice there is a link at the bottom of each embedded tile design. our Marketing head was lamenting that some users don't get that the tiles are actually clickable and will take you to the article or content they are advertising. In order to help these kinds of user I added a "click here" kind of link so that they know and clearly understand what are they supposed to do with the thumbnail.
New tile design and gmail plugin in action.
Design : Empty and Error States
As with most software there are often edge cases that can result in errors of lack of actionable content on screen. This can be really frustrating and confusing for the users. I built a number of error states or empty screens for these kinds of scenarios so we can give users necessary instruction on why they are seeing this screen and if possible the steps to remedy that state.
I used a fun yet clear approach using ASCII emojis to make it less stern or condescending and add a little bit of humour to the situation.
Overall this was a good project, with lot of technical interaction design challenges along with constantly changing requirements. Still it was heartening to see the project finally done and out in the wild and getting great reviews by real world users.