forest.com/login

Project Overview

Forest designed for positive editing experience with a modern interface and animation, with the primary goal in mind of quick produce experience while using Forest application, a workflows were defined for users that create daily content.

Video editing can become complex. I provided solutions for the application that instantly recognized by both novices and expert users — As an outcome, Forest editors got animated micro-content templates that converted to videos via Forest technology.

The Challenge

Define the user flows using the product, in order to create and edit animated micro-content videos in as few steps as possible.

Create templates that will be able to fill a variety of micro-content like data-driven stories, news bits, social media quotes, etc. that will also let editors focus on new ideas on every new edit.

Forest users should be able to explore templates fast, by testing their content on these templates.

Define and design experience of features like creating, editing, and download final results of a video.

The Solution

Designed the product in a way that helps users achieve their goals quickly. Users are able to produce micro-content videos in 5 steps.

Created an efficient information architecture of the application and provide navigation to all levels of the hierarchy. Defining categories for "Templates" and "Generated" drafts.

In order to allow users to maintain the context of their task and focus on editing the selected video, I used a pop-up module approach to edit templates.

In order to let the editors focus on their ideas and content, I created a clean of a content preview on the "Templates" page.

Outcome

I created Forest's templates, that been designed using a modular approach to fill any kind of micro-content. Here are 3 concepts of the micro-content videos created by me using Forest application.

The Grove
> Templates

The main header behavior designed to hold the Hierarchical Navigation structure contains "The Grove' as the main page, additional to "How to" and "About" user information. On the scroll, the main header collapse to provide a better experience while browsing content.

The top ribbon is a "sticky" ribbon, and it contains only the necessary interactions to provide all relevant actions to the users, while Forest users are oriented in Forest's content, "The Grove".

"Templates" and "Generated" are the primary tabs of content in Forest application. Users are able to filter by different Template Formats and by Available Edits for each template.

"My grove" and "My Media Library" pages are holding user's personalized content. When a user creates a micro-media, it saved on the "My Grove" page. This micro-media is automatically saved on the cloud and is available on their next edit. This micro-media is now available and managed on the "My Media Library" page.

"Plant" option is available to admin users only, to manage and create new templates, which I'll describe later.

Observe the scrolled "Templates" page; there are categories like Data-Driven, News, Quotes, etc. templates that fall within these categories, are cataloged by their driven content.

forest.com/the_grove/templates

Available edits informed on each template

On MouseOver event of each template's icon, by showing a tooltip, the user gets an indication about available edits and video length. There is an indication if a template has an ability of loop animation by a Loop icon.

Highlighting the most important segment on each template allows users to quickly find what they are looking for in each visualization type of content.

Pop-up Module Approach

Edit a new micro-content template using a pop-up module approach. This way, we allow users to test their content as fast as possible on different templates, with no loading pages required while using the module.

The background is dimmed, and the page is disabled until the user explicitly interacts with the overlay. This experience designed to keep users focus on their main goal, focus on content creation.

With this approach, we keep the user in context while navigate thought different templates, without external navigation delay.

forest.com/the_grove/templates/edit

Review results

On each new edit, the user is able to get the edited results by clicking on the "Update Preview" button. This button creates a call to action to Refresh the video with the latest changes made by the user. "Update Preview" button also available on the video MouseOver event.

forest.com/the_grove/templates/edit

Trending Now

"Trending Now" section of the user interface designed to suggest trendy content that has been generated by Forest using third-party APIs to Forest users. Those generated micro-content drafts allow users to test and edit relevant stories.

Users are able to preview and edit those micro-content drafts, in the same way using a pop-up module approach. By clicking "Saving As Draft" saves this micro-content in the "My Grove" tab as a draft.

Users may choose to visit the source that been used to generate this content story by clicking on "Source" next to the "First Scene" which opens as an external link.

forest.com/the_grove/templates/edit

Modify style

All templates are designed using a modular approach to fill any kind of micro-content, but some issues may appear in terms of readability, like white text on light background.

Therefore I designed a variety of different styles on certain templates as a solution, making sure that won't affect branding and may fit the topic by choosing a different color. Users may choose "Light" or "Dark" style for some templates.

Generated

Forest users can get inspiration from this generated micro-content by Forest concept, and it also allows users to test stories on the same template category in different styles.

Same as on "Trending Now" users can visit the source of each found story by clicking on "Source" which opens an external link to those stories.

forest.com/the_grove/generated

View and edit generated templates

Users can preview generated templates and edit these micro-content drafts the same way using a pop-up module approach, reusing the module component, and keep the consistency of the app.

As I mentioned in the previous section, by clicking "Saving As Draft" saves this micro-content in the "My Grove" tab as a draft.

forest.com/the_grove/generated/preview

My Grove

Once the user renders a micro-content draft, into a video, the result appears in "My Grove" tab in a "Videos" section, including essential details such as template type, a template name, and date of creation.

Rendered videos and videos that are currently in the render process live together in the same section and use individual feedback of system state for each item, like:
  📹 Rendering sate (with a Progress Bar)
  ✅ Success sates
  ⚠️ Error state (with Try Again option)

Drafts of a micro-content are listed in "My Grove" tab in a "Drafts" section, including essential details such as template type, a template name, and date of modification.

forest.com/the_grove/my_grove

Users will be notified on Slack getting the number of videos that been rendered. Once the rendering process completed, users will able to download the video on "My Grove page" as a file.

Users are able to edit, duplicate or delete video, sort "Videos" and "Drafts" by Recent or by Date created, and filter by templates kind or search by name on the left side of the header.

Establishing visual style and brand identity

As an outcome, using animation for the micro-content videos, and unique branding - provided a positive experience to Forest users that allows creating daily content.