Improvement of a Content Editor to Maximize Customer Value
anybill (www.anybill.de/en), a provider of digital receipts, has already introduced a feature called "Content Areas," allowing B2B customers to display customizable ad spaces on their digital receipts. The next product milestone was to provide advanced options that allow customers' marketers to customize their content areas with greater precision and flexibility. This study describes the iterative design process that considered all the original requirements and ultimately resulted in this upselling feature being a clear win for users, customers, and the SaaS company alike.
Background
Content Management 1.0 ("CM 1.0"): Customers can edit the content of their digital receipts within anybill's portal website. The initial version of Content Management ("CM 1.0") already allows configuration (uploading a custom image file or using a simple WYSIWYG editor) and activation/deactivation on the receipts. Further details are presented in the following figures with screenshots from the official user documentation.
Figure 1. CM 1.0: Content Management menu in the customer portal: overview table.
Figure 2. CM 1.0: Main dialog of the content area.
Figure 3. CM 1.0: Image cropping editor dialog.
Figure 4. CM 1.0: Preview dialog with self-configured content areas on respective types of receipts.
Objectives
Develop an advanced content management feature ("CM 2.0") that provides more flexibility for advanced users of corporate customers, e.g. marketing specialists.
Develop suitable business logic that ideally considers all factors from the previous requirement analysis. These factors are: stores, time range, receipt type, and position (see "Insights" section below for more details).
Avoid confusing "simple" users who do not need the new advanced features with potentially overwhelming options.
Maintain the simple and minimalist aesthetic of the portal by not cluttering the user interface with a multitude of options, thus avoiding complex changes to the user interface.
Ensure that the mental burden on users from the underlying business logic is not too high and implement a UX design that supports the construction of an appropriate mental model.
Method
Formative usability tests accompanying the iterative design steps
Interactive 1:1 interviews to collect any kind of input and feedback on the design iterations
No predefined user scenarios or tasks, but unbiased simulation of the initial interaction with the user interface to gather impartial feedback
Participants
n = 12
Internal domain experts (SMEs; from product, management, sales and technical teams) as well as newcomers (new employees, colleagues from non-technical/non-product teams)
Repeated interviews with selected SMEs/newcomers to obtain detailed feedback on the iterations and discuss their UX and business-related expectations
Insights
CM 2.0 business logic
The following formal business logic was developed during the process: "For each store and time range and receipt type, only one content area can be active or pre-planned."
The individual factors within this business logic were specified as follows:
Stores. Individual ad spaces can be displayed in individual stores. Example: A coffee promotion on receipts from store A, a milkshake promotion on receipts from store B.
Time range. Ad spaces can be displayed in specific time frames. Ads can also be pre-planned, i.e. configured for future periods. Example: Pre-planning special coupon ads for the upcoming Christmas season.
Receipt type. There are four types of receipt delivery (mobile landing page, PDF, receipt email, app), and the ad spaces can be displayed individually per type. Example: The mobile landing page displays a general ad, the PDF displays a special promotion coupon.
Position. Ad spaces can be displayed at one of three positions within the receipt: top, middle, or bottom position. Only one ad space can be displayed per receipt, not multiple. Example: An ad containing a customer card coupon is displayed at the top of the receipt.
This business logic was refined and internally validated as part of the study, and specified for development and user documentation.
Implications on the UI: see Figures 5 to 12 below.
Overview table: new rows introduced "Status" (with toggle for direct state switching), "Stores", "Time Range", "Playout Channels" (= receipt types), "Position".
Figure 5. CM 2.0: Table overview in the Content Management menu.
Main Editor Dialog: "Enhanced Display Options" button with text tooltip added.
Figure 6. CM 2.0: Main editor dialog.
Stepper "Enhanced Display Options": Stores: assignment of one or more stores.
Figure 7. CM 2.0: Enhanced options, Step 1 "Stores".
Stepper "Enhanced Display Options": Time Range: selection of an individual time range with "open end" option.
Figure 8. CM 2.0: Enhanced options, Step 2 "Time Range".
Stepper "Enhanced Display Options": Playout Channel: assignment of one or more receipt types (mobile website, PDF, email, app).
Figure 9. CM 2.0: Enhanced options, Step 3 "Playout Channel"
“Enhanced Display Options” stepper: Position: assignment of either upper, middle, or lower position within the receipt.
Figure 10. CM 2.0: Enhanced options, Step 4 Position”.
Main editor dialog: Summary with clickable configuration to quickly make changes in any of the previous steps.
Figure 11. Summary of user configuration.
Warning Message
This dialog is displayed when the user tries to save a configuration that conflicts with another existing configuration (i.e. overlaps in store(s), time range, and playout channel). Example: The user wants to activate a new ad space in store A in February across all playout channels, but there is another active ad space assigned to store A in February for the PDF receipt.
Figure 12. CM 2.0: Warning message on conflict.
Conclusions
Successful development of CM 2.0 business logic
The new CM 2.0 logic was created, refined, and (internally) validated through an iterative design process.
This new logic was seamlessly and minimally invasive in the existing UX implementation by introducing more rows in the overview table and only one additional button in the main editor. Hence, it should not overwhelm "unpretentious" users with all the new possibilities (however, this study did not provide "proof" of this as no external users were surveyed; see also the "Limitations" section below).
Successful and efficient iterations in UI design
The design of the user interface was generally adopted from the original CM 1.0 version. This applied to almost all UI elements: overview table, editor and related subdialogs, interactive elements, general user flow.
Optimizations of the general user flow:
State changes can now be made directly in the overview table (cf. Figs. 1, 2 and 5 above).
The preview dialog is now an optional step, as the "Save" button has been moved to the main editor (cf. Figures 2 and 11).
Positive side effects on the UX process awareness from the corporate side
It turned out that although the originally specified requirements seemed clear and distinct at first glance, their concrete operationalization was a "tough nut" to crack. During the design process, the logic was specified step by step with the respondents, thereby raising their awareness of the underlying UX and UI challenges.
A positive side effect of the project was the creation of an adequate understanding of unforeseen implications of UX design within the management, sales, and marketing teams.
Limitations
As mentioned earlier, no "real" users were surveyed as part of the study, as participants were not available and the project team had limited capacity for recruitment. Business-related constraints (e.g. project duration until the planned release) also had to be taken into account. However, insights from internal participants from various areas and with varying levels of expertise were still very valuable and actionable UI implications delivered the desired product improvement, which now plays a key role for the company.
Validation with users and customers was not conducted in this study. However, feedback from the first CM 2.0 users was very positive and confirmed the project outcome, including the decisions on business logic and the implications on the user interface.