Content Management System for Retailers Wireframe Design

ON is a small tech company who helps retailers and other clients turn their storefront glass into interactive screens using their projection technology. People passing by these interactive screens can engage with the content using hand gestures, mobile phones (through QR scans), facial recognition and more. Their tech can detect faces, guess age and gender of passersby in order to deliver content relevant to their targeted demographics. As people engage with the application, data is collected to measure its efficacy.

The task

As the lead designer I was tasked with designing a client-facing content management system to help clients manage their own content on their storefront screens.

Researching Target Users

The first step was research to understand our users’ pain points and needs. Since I was already familiar with plenty of our clients, in lieu of traditional user research methods, I reviewed meeting notes and client emails from past projects. My target users were retail store managers, in-house marketers and creative teams, so it was imperative that the user experience be incredibly easy to use and intuitive, no matter who was using it.

I identified a two main needs: to be able to easily publish targeted content to their displays and to analyze a current campaign’s performance.

Sketching a User Flow

With the top users’ needs in mind, I drafted a few iterations of a user flow on paper. I digitized the best version shown below:

wireframe design of ON's CMS

This is not an exhaustive flow, but enough of a starting point for this initial phase of the product. From the home page, users can decide if they wish to upload new content to their storefront’s interactive screens or monitor the current content. Content can be created by either uploading files or choosing amongst a selection of pre-created templates for content: VR, quiz game, 360-degree map, and more.

Content is added to a timeline to edit the start time and duration of the campaign. This page will also enable users to tailor their content to their demographics by using “triggers.” The triggers enable a user to condition their content to only appear to a specified age range, gender, and/or type of weather.

Wireframe Designs

  • Data summary page on content manage,ent system ux wireframes
  • data analysis with insights on chosen digital campaign

Once the content is launched, it goes live on the display. Each time it displays, the computer vision collects data on impressions (defined as when a user makes eye contact with the screen for more than 3 seconds), engagements, demographics of users, etc. All of this data is viewable selecting the campaign on the dashboard and clicking the “Data” button on the far right.

Think-Aloud User Testing

To test the wireframes, I used a a think-aloud testing technique with some ideal users: a store manager, a yoga instructor, and a project manager. These people show a range of users who would be in charge of promotional initiatives or have a special interest in self-managing content and have access to a retail glass storefront for use of the interactive display.

Think-aloud testing is a research method in which people are presented with a prototype of a product and asked to narrate their experience while performing a given task. In this case, our prototype is our wireframe printed out in paper.

During each testing session, we identified the key tasks we were testing the wireframes for— using the CMS to upload content to the display and to analyze their content’s performance. We instructed them, “the ON team has just given you credentials and you’re logged into the dashboard. Start by uploading a video from your computer to your display. Use your finger as your mouse cursor.” Here’s what our users thinking aloud shared:

  • The wireframes do not show a way to trigger content by number of people, so I am unable to tailor content to couples or groups.
  • How can I share results with my boss?
  • I wish there was a way to keep track of our goals for each campaign

Potential Solutions

Our testing sessions enabled us to receive a thought-by-thought account of their experiences, which helped pinpoint where the success and failure points are in our CMS design. We realized not adding group number as a trigger was an oversight as the software has the capability, and that there should be sharing options in addition to the “download as a PDF” option.

As for goal-tracking, adding a feature where a user can add some goal metrics at the beginning of a campaign and track them to periodically to measure progress seems like an obvious choice since the overarching goal of the ON product is to help retailers optimally achieve marketing goals by running customized content on a display that tracks performance.

To see what this goal-tracking addition might look like, I sketched a potential version of this feature below:

This pop-up would appear after the “Triggers” pop-up when creating a new campaign. Once it starts getting filled in with optional goals, the “Do Later” button turns into a “save” button. If the user decided to do it later, they can add goals to the campaign from the “My Campaigns” page. The option would appear in the form of a button between the “edit” and “data” buttons.

While the project is very much a work in progress, running user tests as early as the wireframing/sketching stage enables us to save time on countless iterations, and hear directly from target users on how well the proposed tech solves their needs.