Preview image. Unlock full-res
Three mobile card interface showing process steps with line illustration, grid diagram, and supporting photo for service explanation.
Summary
Three mobile card interface showing process steps with line illustration, grid diagram, and supporting photo for service explanation.
Visual description
Three smartphone screens arranged horizontally, each displaying a distinct type of content. The leftmost card has an emerald-green background with a simple line-drawn elephant illustration in the center, serving as a visual anchor. The center card uses a deep blue background with a geometric grid pattern containing red highlight circles, representing a methodical or analytical process. The rightmost card features warm photography of people in conversation, paired with explanatory body text and a dark call-to-action button. All three cards share clean sans-serif typography, ample whitespace, and consistent mobile interface headers. The overall composition balances illustration, diagram, and photography to communicate a complete service narrative.
Key takeaway
A three-part card layout that uses different visual languages (illustration, data visualization, photography) to explain a complex service without overwhelming the viewer. The color blocking (emerald and blue) creates visual interest while maintaining professionalism. Each card is self-contained yet part of a cohesive narrative, making it effective for onboarding or process-explanation content.
Reuse notes
Strong pattern for financial services, consulting, or professional services platforms explaining multi-step processes or service offerings. Works well when you need to show understanding (illustration), methodology (diagram), and human trust (photography) together. The compact card format works on mobile and desktop. Emerald and blue palette reads as trustworthy without being corporate-heavy. Good fit for landing pages, onboarding flows, or explainer sections.
