The biggest drawback of many of the existing formats for Whencasts is that while most of the content created are lists, the existing user-interface isn't optimized to get people a quick overview of the content. Most of the tiled interface options present the information in a very constrained manner that require the user to do extra work to navigate to the information for each event or data-point.

The proposed interface experience looks at the existing Whencast here:

I approached improving the user experience by taking a mobile-first perspective, giving the user a very simple, scrollable list that easy to return to, allowing the user to make their way through the information very quickly and find what they're looking for. The biggest difference between desktop and mobile is the ever-present nature of the scrollable list with the two-column layout.

I chose to design the mobile version inside a browser as opposed to a full application, since one of the most important parts of the Whencast is to be embedded across the internet. As a fluid layout, it would require no changes to the Whencast presentation interface, and only minor revisions, mainly involving an application menu system to traverse the applications other functions.

The desktop layout can be used in both a fixed size, fluid or full-screen mode. The only changes are the width of the content display panel and the height of the scroll list. In the desktop version, both list and content panel are scrollable.

The subcontents are designed to be used in either a one, two or three column layout depending on the user's preference. By eliminating the margin, padding and much of the existing whitespace and enabling the application to crop images for preview functionality, we can have a much more consistent design across the different types of content. Each type of content is clickable either expanding the container to fill the space, or launching a lightbox to show the full version of the contents.

The bottom bar has a play button, which would cycle through the list items. Instead of the existing draggable bar, changed this to use a circle/dot interface to outline the number of events/data points, plus indicate where the user currently is in the linear line of events.

Both layouts start the user at a splash screen, which provides a simple presentation that when embedded is more likely to be interacted with as it feels like a presentation they are being asked to interact with.

Built With

Share this project: