SUV Model Comparison

Responsive Landing Page

2020 Lincoln Corsair

Project Overview

As part of a new SEO strategy for the dealership, Lincoln of Englewood needed an easily digestible landing page with information regarding the latest Lincoln SUV model line. The goal of conquest was to educate and attract drivers in the SUV market who typically shopped outside the Lincoln brand. In response to our clients needs, I designed and developed this page.

My Role: Digital Designer, UX/UI Designer, Web Developer

Skills Practiced: Collaboration, Sketching, Graphic Design, Wireframing, Coding, JS Manipulation

Tools: Pencil & Graph Paper, Adobe Photoshop, Adobe XD, Adobe Dreamweaver

Dynamic Beacon / July 2020

Project Branding



RGB: 255, 255, 255

Medium Gray

HEX: #666666

RGB: 102, 102, 102


HEX: #000000

RGB: 0, 0, 0


HEX: #F26147

RGB: 242, 97, 71

Green Slate

HEX: #293338

RGB: 41, 51, 56

Lincoln Miller Banner and Lincoln Proxima Nova fonts used

Full SUV Model Comparison page layouts on desktop and mobile

UX & UI Considerations

Triple Mobile Mockup of SUV Model Comparison page
  • Background height of the hero decreased to move content higher up.
  • SUV model information arranged into a card-like structure, with horizontal scroll functionality. Users can swipe through models for side‑by‑side comparison.
  • Important vehicle specs are displayed 3‑up
  • Buttons expand to full‑width to create larger touch‑points
  • Vehicle model information condensed into a toggle drop‑down. Users can easily view or hide info based on their interests.
  • First and second columns swap order so title appears above vehicle image, as a segway into the model section.
  • Non‑breaking spaces allow text to wrap, keeping complete thoughts and phrases together

Creative Process

desktop and mobile layout skecthes

Layout Design Sketch

Screenshot of landing page design being wireframed in Adobe XD


Screenshot of landing page being coded in Adobe Dreamweaver

Hand‑coding and Developing