Case Study: Create Offer
TLDR;
I updated TUNE's HasOffers signature workflow w, Create Offer, and collaborated with product management, engineering, and other stakeholders to bring my designs to life as part of a quick turn around beta program highlighting the future direction of the platform. My work touched on all elements of the process: from unearthing qualitative and quantitative data, to hi-fi and lo-fi design, to usability testing, to helping lead the project team.
Product Background
HasOffers is the backbone of TUNE and the leading performance marketing platform, servicing over 30,000,000,000 clicks per day. Many successful companies use it as the heart and nervous systems of their businesses. They distribute offers (ads) for advertisers to a network of affiliates that will run them. HasOffers is used to disseminate and track them.
Learning
The main thing we learned was while we were successful deploying an updated version of Create Offer showcasing improved usability and functionality, we discovered that there was no reason for the bulk of our customers to use it. They were not going to disrupt their current workflows to try something out that wasn't fully integrated into HasOffers
Visual Design: During the visual design phase, I further finessed the layout and ended up dividing it into two sections: Essentials, containing all of the basic elements required by HasOffers to get an offer into the system & Additional Options, containing the more detailed elements involved in finessing an offer that are not requirements.
Digging into the Data: In order to better understand how our customers were using the flow, I analyzed the data for all of the 45 available actions available to them. What I found was that most people were only completing 3 fields before saving their work! The two buttons users can click after filling out the required fields are represented by the fourth bar in the chart. This was very telling.
The Challenge: Creating offers is one of the main workflows in HasOffers. For example, over 50,000 were created during a three month period in 2017. Outside of reporting it is one of the most utilized flows on the platform and I wanted to be sure we were enhancing the current workflow — pictured above— without disrupting it.
Information Architecture & Paper Prototype: Based on the usage data, user interviews I helped conduct, and TUNE's design language I made several iterations of paper sketches to explore the layout. My goal was to give users the ability to create more offers in an expedient fashion so that they could run their businesses more effectively. Often times our users create a slew of offers just to get them into HasOffers so that they can edit them later. I wanted my work to honor this workflow. With that in mind, I created a paper prototype to demo the flow to the rest of the design team, engineers, product management, and other stakeholders.
Information Architecture & Paper Prototype: Showing the behavior when a rule is applied
Visual Design: Some of the advanced editing features
Visual Design—The Rich Text Editor: I also added a few elements to help with expediency and usability issues we came across during our user interviews: I designed a rich text editor to enable users to quickly add HTML styled text to the details section so they wouldn't have to use another application to do it.
Visual Design—The Rich Text Editor: In this screen the user has loaded a template
Visual Design—Rich Text Editor: In this screen the user has made some changes to the text and is now given saving options.
Visual Design: I also added a more robust way of handling and updating thumbnails.
Prototype & Usability Testing: After the visual design was completed and reviewed by all team members I worked with TUNE's user researcher to write a script for usability testing with 5 of our clients. I then built a prototype for the tests and helped conduct them. The overall impression of the updated flow was received favorably and we presented our findings to the entire HasOffers staff, including executives. The usability issues we discovered I addressed during the course of testing so that we could see if the changes made a difference to the results. They did. For instance, there was some confusion surrounding thumbnail management as the above image shows (it's taken from the presentation deck)
Implementation: I provided redlines to the engineers detailing new elements as well as noting which pieces already existing in our design pattern library, TXL (TUNE Experience Language). This example shows the layout and behavior of the rich text editor.
The Results: We shipped the beta at the end of the development period. It remained live for two quarters. It lived side by side with the current version of Create Offer and we saw some positive results: it had a 5% conversion rate and of those users that engaged with it 60% of them returned to it at least once to create another offer.
