Lease VS. Buy

Responsive Landing Page

Young woman standing beside open car door holding keys


Rice Toyota is a high ranking dealership which takes great pride in their ability to offer unmatched service and value. Through transparent business practices and a commitment to educate buyers, they've earned themselves generations of customer loyalty. One of the topics they like to educate buyers on are the difference between leasing or owning a vehicle. To help make this decision process easier for customers, I created this page demonstrating those differences.

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

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

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

Dynamic Beacon / June 2020


Light Gray

HEX: #E3E3E3

RGB: 227, 227, 227

Dark Gray

HEX: #2B2B2B

RGB: 43, 43, 43


HEX: #000000

RGB: 0, 0, 0



RGB: 255, 255, 255


HEX: #D71920

RGB: 215, 25, 32

Toyota Type Bold font

Full page layout of Lease Vs Buy Page

UX & UI Considerations

Tab System Design and Functionality page segment

Early on in the design process, the client vocalized the importance of providing enough content to answer any possible question a customer might have. Although a smart marketing approach, having too much information can sometimes overwhelm users causing them to bounce off the page or the website entirely.

To keep viewers engaged on desktop, I thought the functionality of a tab‑system would be the perfect solution. Essentially it would allow for a user to click through each category to compare information, without confusing or overwhelming them. On the UI front, highlighting the active tab state and dulling the inactive ones would also help users to keep their place while navigating through content.

On mobile however, the experience of having a tab‑system of this proportion changes for the worse. The smaller screen, the more condensed the content needs to be. For the tab‑system, this means categories would have to stack on mobile, causing the loss of precious screen space.

By switching to a drop‑down accordion or drawer system on tablet and mobile views, the interface is decluttered. Similar to the tab‑system UI, a red accented down arrow indicates to the user that drop‑down functionality is available. Users are now able to scroll with ease, opening and closing each section as needed.







New Sessions



New Users



Avg. Session Duration



Bounce Rate

Dealership Reopening Email mobile screens

Metrics gathered from Google Analytics.
Performance comparison dates: April 26, 2020 ‑ June 24, 2020 // June 25, 2020 ‑ Aug 23, 2020

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