UI Design & Front-End Development — GoodLife 45
Calendar page redesign: making the first impression count
During my first week as a web design intern, I identified a confusing hero image experience on GoodLife 45’s calendar page and took the initiative to redesign it — translating verbal feedback into visual mockups that were approved by both my supervisor and the CEO.
Context
A self-initiated project in the first week
GoodLife 45 is a Christian TV broadcasting station with a website that needed attention. During my first week as their web design intern, my supervisor asked me to explore the site and list the changes I’d make if I were in charge. The calendar page was high on my list.
When I started sharing my suggestions verbally, I quickly realized my ideas weren’t landing. Rather than give up or keep talking, I took it upon myself to design mockups that would show what I meant — letting the visuals communicate where words couldn’t.
The problem
A hero image raising more questions than it answered
The calendar page had a solid overall layout, but the hero image experience was creating friction. The font color, content placement, and call-to-action button were generating questions you never want a user to ask:
“What is the date for?”
Date information overlaid on the hero image without clear context
“Why is it blocking the image?”
Content placement obscured the hero visual without adding meaning
“What does the button do?”
The call-to-action lacked clear labeling and purpose
“What are these events?”
Event listings below lacked enough context for a first-time visitor
As Steve Krug would say: “Don’t make me think!” — the hero image was doing the opposite.
My approach
Design first, communicate second
Created in Photoshop, I designed a top bar to house a clear page description and call-to-action button. This removed the need for content placement over the hero image — particularly important since the image changes with different events. The color and typography stayed on brand, pulled directly from their existing style guide.
The solution was intentionally simple: separate the navigation context from the image, give the CTA a clear label, and let the hero image do what it’s meant to do — set the visual tone without competing with information.
Implementation
From mockup to code to deployment
The mockup was welcomed and praised by both my supervisor and the CEO. GoodLife 45 works with a contracted outside web development company, so implementation meant working directly with their developer rather than building it myself.
To make that handoff as seamless as possible, I went beyond just sharing the approved screenshot. I wrote the HTML and CSS needed to implement the change, giving the developer everything required to execute with no ambiguity or back-and-forth. This was my first experience communicating directly with an outside developer, and it taught me that a good handoff is as much a design deliverable as the mockup itself.
Reflection
What I learned
In my own words
Communication is key — and sometimes visual communication is the only kind that works. Early in this internship I learned that describing design changes verbally wasn’t enough. My go-getter mentality kicked in and I realized that showing my idea would always translate better than explaining it. That instinct — to make the abstract concrete — is something I’ve carried into every project since. This was also my first time collaborating with an outside developer, which taught me that delivering front-end code alongside a mockup isn’t just helpful, it’s part of being a good design partner.
Let’s work together
I’m always open to conversations about meaningful work — whether that’s a role, a collaboration, or just a good design discussion.