01 - Understanding the Landscape
Freightliner's truck pages had utilized various templates over the years, making it easy to determine a page's age based solely on its design. This inconsistency presented both a challenge and an opportunity for establishing a more cohesive visual language.
Content Planning Without Copy
A significant constraint was that the final copy would be delivered by a partner agency close to launch. To mitigate this risk, I:
- Analyzed existing Freightliner pages to understand content patterns
- Studied competitor sites to identify industry standards and opportunities for differentiation
- Created flexible layout systems that could accommodate various content types
02 - Establishing Direction
Component Showcase
To align stakeholder expectations early, I developed a component showcase demonstrating various UI elements that could be implemented. This visual inventory helped:
- Set realistic expectations about technical possibilities
- Focus the team on leveraging Freightliner's strong product photography assets
- Establish a shared visual vocabulary for discussions
Let's talk types of content
03 - Iterative Wireframing
The wireframing phase proved crucial for this project, and served as an important foundation as I continued to build out ideas. It allowed me to:
- Rapidly test different content hierarchies
- Present layout concepts to stakeholders efficiently
- Make structural decisions before visual design investment
- Accommodate feedback without delaying the overall timeline
A few component designs hit the mark
Through extensive experimentation, several components resonated particularly well with the Daimler team:
- Immersive full-width photography showcasing the truck from dramatic angles
- Modular feature blocks that could be easily updated post-launch
- Video components with pinned text during scroll
- Explore buttons under key sections that link to more imagery/info
- On-page navigation
04 - Visual Design Integration
Since Freightliner already has established fonts and brand colors, applying the UI design was a phase with less iteration. However, often seeing everything in full color can bring some additional changes to mind, and Freighliner had one big adjustment they wanted to see after receiving copy from the partner agency.
Safety, Profitability, Efficiency
These 3 key pieces of messaging came after our initial component exploration, and we needed to weave them into the page. With the adaptable components we defined during wireframing, this step
