CTRL+CLICK CAST - Mobile-Friendly Refresh
CTRL+CLICK CAST
We inspect the web for you!


CTRL+CLICK CAST is a web podcast featuring industry experts sharing the latest design and development techniques as well as cultural reflections on our work as a whole. In addition to producing, co-hosting, marketing and driving sponsorships for the show, I design all assets for the show, including the mobile-friendly UI and style guide for this project. I collaborated with Emily Lewis on the development, as the front-end development and accessibility lead, while I focused on the ExpressionEngine CMS upgrade.

Agency
Lealea Design
Bright Umbrella

Responsibilities
Research and Discovery
User Experience
Visual UI Design
Art Direction
Graphic Design
ExpressionEngine CMS development
Speed Optimization

Team
Project Management, 
Research and Discovery, 
Front-end Development,
Accessibility Lead 
— Emily Lewis

We have an amazing archive of over 200+ episodes released over eight years — but it was hard for people to navigate and find these episodes. And while the primary way people listen to podcasts are through their app of choice like Spotify or the Apple Podcasts app, the fact our site was desktop-only was a strike against all those who check our site on their phone. Especially since the RSS feed being sent to iTunes had a max limit for size and so the app feeds weren’t getting our entire library.

In addition, as leaders on the web attracting industry experts, it didn’t make sense for our own site to be so dated, and we couldn’t hide behind the cobbler-shoe dilemma for much longer.


I reviewed a variety of popular industry podcast websites, like the ShopTalkShow, Design Driven, Design Matters with Debbie Millman, and devMode.fm in order to prioritize what content should be showcased while creating an inventory of design patterns for reference. This research led me to understand that less is more! Each competitive example I reviewed, with the exception of Debbie Millman's podcast, erred on the side of simplicity. I kept this consideration throughout the entire design process and especially when we started our content audit.

Emily Lewis created the initial content inventory of our website as well as the content flow diagram. Alongside our competitive research and understanding user pain points based on user feedback from contact form messages, this inventory Google Doc became a reference point and content priority guide for us to understand what pieces of content should stay, go, or be emphasized more prominently.

Once the content inventory was complete, I started doing rough wireframe sketches. Wireframes, in my opinion, are best used for brainstorming and internal conversation to verify content priorities. So, this stage of the site was very quick and I moved rapidly to a high-fidelity prototype.

Since this was an internal project in between client projects, I wanted to create high-fidelity prototypes to convey the visual design and direction of the site more quickly. So it went straight from sketches to this static comp for review.
From sketches to immediate tweaks and changes in a high-fidelity prototype
However, while the layout and order of elements reflected the content priority guide we created, the UI design elements and style were too much of a departure from our original established styles. While I utilized similar patterns and typefaces, my experimentation with a lighter scheme backfired.

This actually led to our major project delay, unfortunately!

Much time passed, and after prioritizing this project alongside client work, we restarted the design process again — from the beginning.

We re-reviewed our original content priority guide with new eyes and new skill sets. We made further cuts to the content since one learning we had over the years was prioritizing speed and site performance,  which directly affects user experience. We also wanted to launch on time, so we had to re-review why certain pieces of content were priorities and match it up with the set timeline we gave ourselves for launch.

Once that was re-addressed, we re-reviewed the original design. After establishing that the original site color scheme should be the way forward, I was able to break through the “design block” and move forward with the updated content and design.
The evolution of our desktop homepage from EE Podcast, to CTRL+CLICK CAST, to CTRL+CLICK CAST today
One major thing I learned during this process was just because you have a wide screen doesn’t mean you need to fill up the space. In the previous incarnation of this site, we filled it with extra sidebar items just because we could. However, based on our review of of Google Analytics and specific pages and areas being clicked, they were being ignored.

While making design decisions on layout and various views, we decided that due to our content we didn’t need an extra-wide view for the sake of dealing with widescreen desktops. So our “desktop” screen is technically a tablet-wide view. This saved development time since we didn’t have to code for or test other screens, but it was also the right decision due to the content.
Once I had all the main design direction solidified, my next step was further simplifying it all and assigning meaning and specific use cases for fonts and design elements. The mere act of doing so had me review all the variations I had in my design and narrowing down all the sizes and colors.
While I narrowed and finalized colors, I utilized the Accessible Colors tool to make sure that the design choices I made were WCAG 2.0 AA compliant. The tool not only provided confirmation about color contrast, but offered alternatives that were compliant if the original test failed. Also important was testing the font sizes with the color contrast as colors by itself aren’t compliant. It’s always in context of the font size and style combinations applied.
Interactions as well as the accessible color schemes in Adobe XD
I also took into account my team’s feedback on further accessibility tweaks post handover.
KEY TAKEAWAYS
I learned about prioritizing and editing content is key to better design decisions. This allowed us to ruthlessly cut out elements that weren’t necessary and rejig the overall layout based on that. I also learned to isolate the real design problem by rephrasing questions until I received the direction I needed that got me back on track.

I also learned that you need to truly commit and schedule internal projects or else it will never launch in favor of other client priorities!

In our competitive research, I was surprised at truly how minimal a lot of podcast sites are, including the very popular ones.

In retrospect, it made sense since the primary way people listen to podcasts aren’t necessarily on the site, but on podcast or audio apps. I was not quite surprised to see we were one of the few that committed to transcripts both for SEO and accessibility but our competitive analysis confirmed to us that was one of our competitive advantages.

The most difficult part of this project was prioritizing it alongside other client projects — so a bit of time management. There was also some miscommunication about what the real design issues were. I misinterpreted some feedback as meaning to start over, but truly, what was necessary was a review of what made our original site and branding work. 
More design evolution. The old social media graphics vs the new direction matching the new site
Once that was overcome, then I was able to standardize the direction of colors and fonts, as the layout, content and prioritization was already established.

KEY TAKEAWAYS

Compared to the quarter before the site refresh launch and the quarter after, we had gains all across the board:
However, at the end of the day, our largest success metric is our listener feedback. We had a quiet launch since we knew we would be podcasting and creating episodes to promote this refresh — but even without prompting, we received immediate feedback:
I really enjoyed testing and reviewing my design for accessibility! In the end, it helped me streamline a lot of my design decisions — so not only did it make our site more accessible, it made it more clear the whys of my design decisions while simplifying my design choices.

Listen to an unfiltered deep dive into both the design and the development of this site now!
A much-needed step outside the usual suspects.
RATING: ★★★★★

There are a million and one podcasts in the areas of design, web design, UX, product design and development, etc—and they all pretty much cover the same ground: best practices, processes, tactical methods, etc — constrained within very defined boundaries in the category of "doing the work."... Lea and Emily do an excellent job of covering the human part of Design, UX and product development work, the hearts and souls hard at work, making the Web more human. THIS is the stuff that people need most. This is the HARD part of doing this work, this is where people struggle most, and this is an area where there's high urgency around finding solutions. Well worth your time.

JOE NATOLI, UX EVANGELIST
ITUNES REVIEW
CTRL+CLICK CAST - Mobile-Friendly Refresh
0
12
0
Published:

CTRL+CLICK CAST - Mobile-Friendly Refresh

CTRL+CLICK CAST is a web podcast featuring industry experts sharing the latest design and development techniques as well as cultural reflections Read More
0
12
0
Published:

Tools

Adobe Photoshop
Adobe XD
Adobe Illustrator

Creative Fields

Copyright Info

No use is allowed without explicit permission from owner