SUV Model Comparison

Responsive Landing Page

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

White

HEX: #FFFFFF

RGB: 255, 255, 255

Medium Gray

HEX: #666666

RGB: 102, 102, 102

Black

HEX: #000000

RGB: 0, 0, 0

Salmon

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

Layout Design Sketch

Screenshot of landing page design being wireframed in Adobe XD

Wireframing

Screenshot of landing page being coded in Adobe Dreamweaver

Hand‑coding and Developing