Wistia UI Refresh

Collaborated with a team of product designers to make the Wistia experience more simple and seamless, and expose core features for our target customers.

Responsibilities

UI Design, Iconography

Team

Product Design Director and Project Lead: Ingrid Pierre
Product Designer: Brock Lefferts
Product Designer: Jonathan Lampron

Background

The product design team organized a Strategic Refresh of the app – one that aimed to make the experience more simple and seamless, enhance and expose core features for our target customers, and carry our brand through the experience. There had been a growing divide between the styles of the website and the styles in the app, and it only grew during our recent Brand Refresh implemented across the site. And, our product offering and strategy had changed significantly, without a matching update to the way the product was organized.

I worked on a team of product designers to explore the future of the app – structurally and visually. My focus was on how our updated brand styles could be expressed through UI, but I also did independent explorations of the product, and collaborated with team members through each phase of work.

Explorations

Along with exploring visual styles, I collaborated on the concept of a dashboard, and what information would be useful to see when you land in your account.

Many of my explorations also reflect a change in how we organize content, how we incorporate our learning offerings into the app, and how we think about things a user can create with their content.

These mockups are not pixel perfect, and have some discrepancies between them (like border radius of media) that represent different phases of ideation, collaboration with other team members, and trying different things.

These patterns for displaying different content types (Media, Project, Podcast, and Channel) were developed by my colleague Brock Lefferts.

I explored ideas for a two-tier, collapsible navigation, in service of the goal around surfacing features and improving ease of use.

I also explored the idea of using color to delineate these different parts of the product. Pictured here is media organization with a project. Other details I incorporated were more organic icons, a header showcasing the user’s content, and a more visual indication of sharing status.

Examples of how color delineation could be implemented throughout the app, maintaining our Brand Blue as a primary action color:

Converging on a shared vision

The team discussed all of our explorations, what was working and what wasn’t, and started to build on each other. While the color delineation was received well by the team, it raised many questions as well. Our current product offering didn’t fit neatly into categories like this – Media doesn’t exist outside of Projects and Channels, and wouldn’t editing an episode of a Channel (green above) take you into a Media state (pink)?

Teammates Jonathan and Brock worked with their product teams to determine what the first phase of updates could be, that would step toward our shared vision without stepping further ahead than we were confident committing to strategically, and without jarring our users.

First came updating the color palette and fonts. Next, updating the look and feel of the side navigation to feature drop shadows. I designed the interaction and states of the main navigation, incorporating my idea for swapping our line icons for filled organic ones. With direction and rough guidelines on the style, teammate Holly Weinrauch created the icons.