Carolyn Borkowski

Stylish with
Jenna Lyons

@ Warner Bros. Discovery

Designing for an intimate relationship between form and function.

Sketch

Sketch

Adobe Illustrator

Photoshop

Adobe Photoshop

stylish with jenna lyons homepage on desktop

The service formerly known as HBO Max

As a digital design intern at Warner Bros. Discovery, my team worked on several marketing projects for HBO Max, which had launched only weeks prior to my start at the company. While we technically worked for the cable division at Turner, it was all hands on deck for the promotion of HBO Max and its exclusive original content.

As new series premiered, oodles of supplemental content was released to further engage with viewership and elicit interest in prospective subscribers. How do we connect with prospective subscribers? It’s the age of streaming services, and a whole lot of people are “cutting the cord” and forgoing cable subscriptions, let alone purchasing additional premium cable services like HBO. Emerging sort of late-ish in the streaming service game with a 2020 launch and batting up against titans like Netflix definitely requires a little more pizazz (like podcasts…click here to see what I created for those).

The opportunity

I was tasked with designing the promotional website for the HBO Max Original series, Stylish with Jenna Lyons. The show follows fashion stylist Jenna Lyons and her creative team as they work on an array of design projects. A heavy focus of the Jenna Lyons brand is her aesthetic and taste, so the marketing materials dive into that in an effort to flesh out and contextualize the series.

I was provided a brand style guide documenting Jenna Lyons’ personal branding, complemented by various examples of editorial designs from previous Jenna Lyons projects. Many brand elements such as typefaces, colors, and the main show logo were already created, and my job was to translate those materials to an interactive digital product. 

I created the designs in Sketch, developing assets along the way in Photoshop and Illustrator. I went through extensive rounds of wireframing and experimenting with unconventional layouts for the project. A major creative challenge (in a good way) was the need for the design to be sufficiently “editorial” – a functional, responsive website with dynamic content pulled in from the CMS where the design doesn’t shout “corporate-sponsored marketing website!!!”. If users are being asked to trust the taste of an acclaimed stylist and designer (Jenna, not me…at least not yet), the online experience needs to represent the artistic value of the product. It had to represent the enrichment that would be provided to watchers of the series, a sample of the unique and valuable content only accessible with a paid subscription to HBO Max.

There was a lot of iteration for the project – I worked on it with the guidance of my team over the course of months (alongside our other work for Turner and the cable television division), receiving feedback from not only my manager and departmental leadership, but from the actual stars of the show themselves. Getting a document of feedback from Jenna Lyons on my designs was…kind of crazy. But it illustrates just how important the integrity of the design was for this project.

In addition to supporting the creative vision for the project, I also had to make it, y’know…be able to work. My job in this circumstance did not include the actual development and functionality of the site – but I did have experience with that, and was able to see my designs through that perspective, considering how the pages will need to be built by the developers to replicate the visual designs. 

Design concepts

Homepage

The homepage design had the biggest evolution over time – I experimented with a lot of different ways to arrange the content before we reached the final product. Below is a selection of drafts from the journey, followed by the end result.

Scroll on the images to see the full designs — Wanna see it live in-action as the real actual website? Click here

early homepage design wireframe
Early layout concept, before incorporating any brand elements
early draft of homepage design
Testing design with hero image — later scrapped after feedback that hero section with a full-width image background felt too conventional
early draft of homepage design
Layout begins to shape closer to the final designs, incorporation of more of the branding, including mixes of text styles and fonts and overlapping of images and text
final homepage design layout
Final design handed to development

Navbar

Before I get into the other pages – I want to talk about the navigation bar at the top of the site. In the homepage designs above, you can see that it changed over time. For a lot of the process, it was just text up there, “Stylish with Jenna Lyons,” (as you’d probably expect it to say).

The existing, official logo for the show didn’t work up there. The “Stylish” may be legible, but the tiny “with Jenna Lyons” down the middle renders it not quite useable for this purpose. In short, you can’t read it.

So, I reached out to the brand team and asked if I could have the working file for the logo, and took it upon myself to find a solution because with text instead of the logo, even in the right font, didn’t look right for the aesthetic of the project. In Adobe Illustrator, I took the components of the logo apart and created a horizontal version of it that was scalable and readable in use cases like the navbar. I felt confident in the value of the idea and knew that it worked the way I’d planned, but…I also knew it was a bit of a risky move pitching a taken-apart version of someone else’s particularly stylized design work. Branding can be sacred, and this project was all about a person known for their brand’s own personal brand.

buuuuut… they loved it! Hooray!

original small stylish jenna lyons logo

Official logo

horizontal stylish with jenna lyons logo

My modified version for scalability

The other pages

The purpose of the website (aside from enticing users to subscribe to HBO Max) was to provide content. I needed to create layouts built to organize an array types of blog-y content. The process for designing these components developed alongside the homepage to create the final product developed for the series.

Listicle (list-y article) page type

early wireframe for listicle page type
First wireframe concept
draft of listicle page type
Organizing content to better match the structure and style of existing branding elements
draft of listicle page type design
Testing more unconventional layouts inspired by homepage design
final design for listicle page type
Final product combining elements from previous iterations

Interviews

early wireframe of interview page type design
Initial interview structure wireframe
final design mockup of interview page template
Final product - this page design stayed the closest to the initial concept, but still needed the on-brand stylistic adjustments to fit the project.