What is Tempest?
Tempest is a proprietary content management system designed to build, circulate and monetize digital media content for enterprise customers. Tempest is a SaaS product that supports beautiful reading experiences with responsive web design, and provides the modern day publisher with tools to grow and engage their audiences.
As a Jr Product Designer, I collaborated with product and engineering teams to design new features for Tempest, as well as improving and iterating on existing features based on market feedback, best practices and data analysis.
Video Paywall
The membership functionality within the Tempest platform allows for publisher partners to engage with their audience, build communities and create monetization opportunities. Readers can sign up and pay for exclusive benefits and content such as video courses and web series.
My task: To present locked paywalled video content on sites that have active membership programs, to potential new members.
The video paywall design needed to encourage readers to subscribe to a membership plan, while still maintaining a sleek and clutter-free look.
Additionally, the UI needed to accommodate all use cases, on all device sizes.
Snapshot of my research on how paywall is handled on other sites.
Research and Brainstorm:
Before I begin any larger initiative, I like to do research to see how other places have tackled this problem, and how trends can work with or against our product needs. Here is a snapshot of my competitor analysis research. I explored many different paywalled video sites and discovered some common themes. Check out my Realtime board to see behind the scenes - Paywall Video Research and Brainstorm.
A look into my brainstorm on the various ways I could set up the video paywall structure. Based on my answered questions, I decided to go with keeping the premium locked content visible to all users. This increases the chance of a member seeing something they’d like to watch, and signing up to get through the paywall.
End Results:
A subscribe button replaces the play button in the center of the video to indicate that the content is locked. Clicking the “Subscribe to Watch” CTA will take a reader to the Membership Info page, where they can learn about membership benefits, and choose a plan from there. The reader is also locked out of the remaining article content that’s associated with the video. This is achieved by truncating the article body and displaying another CTA to promote the membership program.
This video paywall design stays consistant no matter where it’s displayed, shown here as an embed in an article body.
A “Member Exclusive” badge is displayed on all video cards that have been marked as paywalled.
Hackathon 2019 Winning project
Our company hosts an annual Hackathon event, bringing various teams together to push the boundaries of our product. The catch - we have 48 hours - to design, build and implement our ideas!
After the recent merger of Say Media, Maven and Hub Pages, our team set out to integrate the 3 CMS platforms (Tempest, Salish and Hub Pages) that now make up the Maven coalition. We did this by rendering a HubPages site on Tempest, importing a WordPress site into HubPages through the Tempest Import Service, and integrating Salish’s robust comment platform onto Tempest.
My part in our project was the Salish integration into Tempest. The goal being that any Salish publisher who migrated over to the Tempest CMS should have access to Salish pre-existing conversations by default (instead of Disqus, Tempest’s third-party commenting integration.)
My task: Create a UI for logging in, registering, viewing and interacting with a Salish conversation on a published article in Tempest, without needing to leave the page. The UI needed to seamlessly fit in with the article page, and not feel intrusive.
People are often discouraged when they need to leave a page to go through extra steps in order to achieve the desired task. The goal behind this commenting flow was to allow an unregistered user to sign up and comment on an article effortlessly. As soon as the new user is registered, they are redirected to comment as a logged-in user. Simple and efficient. We didn’t want to limit functionality by forcing them to confirm their email right away, so we instead provided a time limit to verify their email address to continue to use this commenting feature.
The look and feel of this commenting field needed to feel a part of the overall brand of the site. This was achieved by inheriting the site’s styling settings so that typography and color settings were shared.
A user can submit a comment and instantly see it appear at the top of the stack. The option to view the original conversation on the Salish platform is available by clicking “View Older Messages.” Additionally, a simple drop-down menu allows them to log out or access their account settings with ease.
Bulk Manage VERIFY AND SEARCH system
The Bulk Action Tool in Tempest is an interface by which a user can apply an action to a wide range of content within the CMS. It’s essentially a query builder that allows the user to filter content to the selection that they want, with the intent to perform the same action amongst all of the results. The Bulk Action Tool can be used for a wide range of actions that pertain to either the Site Onboarding process or Site Maintenance. This tool has proven to be extremely valuable for internal and external users, however, requests were being received for a way to capture a group of items that did not have any shared attributes, revealing that our filter system did not satisfy all edge cases.
My task: Create an interface that allows users to perform bulk actions on content items that can’t be curated through a method of filtering.
The assumption was made that the user already has a compiled list of unrelated content items that they need to perform bulk actions on, they just have no way of collecting these items to perform an action in one fell swoop. If there is no need to search for this content, why can’t there be a simple method of submitting a list of items to the platform, for it to return the items back to the user in an ordered list? This was the basic functionality of our new Verify and Search system.
I added a tab system to the Bulk Manage page, “Filter and Search” and “Verify and Search” are now the two tools that can be used to assign actions in bulk. A user can only work with one tool at a time, therefore a tab menu was the right choice, as it enforces this rule.
A user must input the list of articles to verify they exist, before a search query can be initiated.
This system allows for a user to copy and paste their items from any external document into a text box in the form of a URL, slug or item ID with the expectation that the CMS will find and return these items in the search results. When a user arrives on this page, they are greeted with an expandable text box and directions on how to use it. The Verify Items button will be disabled until text is inputed here. By clicking Verify Items, the list is submitted to the platform to confirm that all items exist and have been inputted correctly. After a user clicks the Verify Items button, they will receive either a green success status bar or a yellow warning status bar.
If all items have been successfully verified, a green status bar will pop up to relay this info to the user. The Search button is then enabled, and the next step for the user is to click it to find all their items.
If a user clicks Verify Items, and some of the items inputted were invalid, a yellow warning status bar will pop up to relay this info to the user. There will be a link to a downloadable error report that shows a user how many items were invalid, which items they were, and the reason they failed.
A user can choose to ignore the invalid items and continue on to click Search, as it will be enabled after a user clicks Verify Items, and all valid items will still display in the search results.
Once a user clicks the search button, the Verify and Search menu will collapse to reveal the search results. From there, they can assign actions in bulk to the desired content.