Hello, I'm Emily Pan
& today I've got two things on my mind:

design
studio (experimental)

JW Player

JW Player is a platform for distributing, managing, and monetizing videos.
My first task at JW Player was to redesign the company website. I began by updating the icons to match company branding, then moved into a rehaul of the overall design along with design of a few products themselves, including parts of the dashboard, video trimming patterns, and search patterns.

Introduction Video

Original Icons


Redesign



Icons were redesigned to be brighter, more informative, and more varied for legibility's sake. The style later informed much of the rest of the site's redesign, which would be bold and graphic.


Video Trimming:

After uploading a video to the JW Platform, users are able to quickly trim and save their videos. While this feature is geared towards livestreamed videos (in order to cut out blank space at the beginning and end of livestreams), it could eventually be implemented for archived videos.

Product Design: Video Trimming Explorations





The product was meant for livestream and not for general video editing, and so we made decisions accordingly.

Questions asked and answered through the design process:

  • How do we use our primary colors vs. action colors consistently with our other products?

  • Are users already familiar with timelines and video trimming from programs like Premiere and Final Cut? How intuitive are markers?

  • How did mobile video and mass-consumer video editing apps like Youtube and Instagram influence existing design patterns?

Final Trim Patterns

Search Home

Search Action

Search Results

Company Home




Considerations:

  • How do we tell a story with our products, without resorting to limiting user cases like "agencies" and "publishers"?

  • Featuring product screenshots will help people understand what the product is from the get-go

  • Our goal is to get people to take action and sign up. A/B testing slightly promotes having one red action button over the design's two buttons. However, having two buttons provides both visual interest and product information. How can we reconcile visual clarity with hierarchy of action?

JW Solutions