Content Library

C o n t e x t

A quick overview

Medallia hosts a conference each year, where the company makes product announcements and where many CX experts are invited to speak. Sessions are recorded and made available for event attendees to access after the conference and housed within the content library.

The problem

I was tasked with redesigning the content library in a way that better showcased the customer’s stories and creating a layout that would allow the users to more easily browse through the many sessions available.

The solution

The final design is a page containing all the customer and keynote sessions where cards contain only necessary information and users can hover over each to get more details. Bolder typography with larger headlines and customer logos are added to help users quickly scan each card.

Built for
Medallia

My role
Visual and Web Design

Tools used
Figma

Platforms
Desktop, mobile

Team
Events team
Dev team

C h a l l e n g e

The design restrictions

This page is built every year using a similar template each time, with only minor adjustments made each time. The previous template’s visual design relied heavily on using that year’s photos, which were taken at the physical conference. Since this was built when the conference went fully virtual, there were no photos to incorporate into the design. Additionally, the feedback we received from stakeholders is that the page should highlight the customer stories and that users sought a page that made it easier for them to browse through all the recorded sessions.

Inspiration & Wireframes

When brainstorming the design of the page, I looked at other sites that utilized tiles and overlays while maintaining a minimal design aesthetic. I pulled together some low fidelity wireframes in order to help me decide on how the page should be laid out.

S o l u t i o n

The design solution

 In an effort to make the page more digestible at first glance, I simplified the cards by showing only the essential elements and including secondary information, such as session descriptions, within the hover state. In terms of the overall page layout, I decided to expose all of the cards for the customer sessions rather than hiding them within a slider since this was the primary content Medallia wanted to focus on. To place additional emphasis on the customers, their logos are included at the top of each card. Lastly, in order to maintain communication with the user, I suggested including a form at the bottom of the page that would allow users to sign up to stay updated on the next year’s conference if they were interested.

As for the visual design of the page, I utilized neutral colors within the Medallia brand guide in the hopes of making the page more minimal and easier for users to scan through. With the challenge of having minimal imagery available, I used bolder typography (the boldest the brand guide would allow), pops of the purple as an accent color, as well as a few of the more whimsical visual elements in the hero and throughout the body of the page.

Learnings

Although the design, content, and development of the page had been finalized and was nearly ready to launch, the page unfortunately did not go live as there was a last-minute business change. While this page did not reach users, I truly enjoyed working on this project and it was exciting to get to see it fully built. I learned an incredible amount during the process and believe that there may be another opportunity to repurpose some elements for future projects.