Live UX DESIGN
See top UX Designers turn ideas into interactive experiences using Adobe XD.
Watch now
  • Add to Collection
  • About

    About

    Interface design for Biteable, the innovative online animated video making tool.
    Published:
Project
Interface design improvements
Client
Biteable

Responsibilities: Concepts, Prototypes, UI/UX Design, Front End Development (visual)

Biteable’s online animated video-maker allows everyone to create high-quality videos. With an impressive core product, the Biteable team are constantly working on new features and improvements to roll out to their rapidly-growing user base. 

Biteable keep agile by rolling out small, incremental changes in direct response to user feedback and analytics. My initial work was a combination of adding new features and thoughtfully enhancing existing elements. Both needed to fit within the established design style.

My Videos

My first task at Biteable was to look at the "My Videos" page. The requirements I was given were: to freshen up the design, to add extra functionality (renaming and deletion), and to improve how the rendering progress was shown to users. When thinking about the user needs, however, I identified the core requirement of this page was for users to easily identify and manage their videos. 

Identifying
Since the only identifiable part of each video in the listing was its title and the colour swatches to the left, my design added video thumbnails and video duration to aid identification and differentiation. 

Managing
In the early days of Biteable it was possible to remove watermarks from single videos, but it had since changed to be unlimited for subscribers. Since the "Remove Watermark" button was unnecessarily repeated, I removed it from the list and added a large call to action to the top section of the page. 

I could then reorganise the actions to emphasise the download button, as that was how users would see the result of their work and the core value of the product. I made sure to keep editing as the true primary action, which was available by clicking the row or the edit button.

The download button space could then also be used to consistently communicate the video's different states: edited (ready to render video), rendering (video render in progress), or complete (downloadable).
To make it easier for users to understand the actions available to them, I bundled the multi-coloured action buttons (edit, copy, and delete) into a group of secondary actions with consistent colouring. 

These minimal icon buttons reveal their text on hover and focus to help with accessibility and usability. As an added bonus, they were fun to prototype and implement!
Video Editing

My next focus was the video-editing workflow. In the Biteable app, users select from a range of scenes and add their own content (text and images) to create a custom video. 

Since the product is a new and unfamiliar way of creating a video, and the users have a very broad range of technical ability, it was important to think about how to make the interface extremely easy to understand.

My design and front end development work included the following:

I improved the usability of text fields by adding field labels and adjusting the layout to have a left-to-right workflow.
I improved the usability of the scene timeline by fixing it to the bottom of the screen and making the timeline scroll horizontally. This ensures the timeline – which holds the most  critical functionality for building a video – is always visible and accessible to users.
 I made the scene selection a dynamic overlay instead of a separate screen. This meant users wouldn't lose their context and could choose new scenes more quickly and with more confidence.
 I updated the "wizard steps" at the top of the page to more obvious, more distinguishable from the video-building area, and more descriptive. I also added a "next step" button to further guide users onwards.
 I added pre-made colour palettes for users to choose from, which helped avoid "analysis paralysis" and helped new users pick an attractive colour scheme with just one click.
 I implemented responsive styles for all new components and added basic responsive styles to the app as whole, so the app is now more natively usable on mobile and tablet devices.
In this portion of work, I particularly enjoyed prototyping the timeline and scene selection panel using FramerJS, designing the colour palettes (see the cover image for this project), developing the fixed scrollable timeline (screenshots above), and creating micro-interactions for the wizard steps (below).
Biteable are constantly improving and have some even bigger and nicer features in the works – hopefully I can share those with you soon!