Responsive Web Design - UI/UX - Branding
Driving the Future
of EV Sales
A responsive homepage redesign for an electric vehicle dealership, built as a working prototype using atomic design and a cohesive pattern library. Designed to improve accessibility, drive conversions, and support dealership goals through high-impact consumer funnels.
Overview
Role: UI/UX Designer
Type: Personal Project / Concept Redesign
Tools: Figma, FigJam, ChatGPT
Prototypes: Desktop • Tablet • Mobile
Pattern Library: Open in Figma
This project explores the design of a modern, responsive homepage for a fictional EV dealership. Inspired by years of experience designing for automotive clients, this concept addresses the growing need for cleaner, user-focused digital experiences in the automotive space. The goal was to create a brand identity and interface that balances accessibility, responsiveness, and dealership business priorities.
Research & Discovery
Leveraged prior experience working on dealership platforms to guide layout and feature prioritization.
Researched EV consumer behavior and color psychology; selected blue tones to signal trust and technology, with green accents for eco-conscious appeal.
Identified key dealership priorities: trade-ins, financing, used inventory, and online tools like chatbots and payment calculators.
Considered mobile behaviors, especially a 78% rise in click-to-call actions since 2014, emphasizing mobile optimization.
Goals & Constraints
Goals
Design a responsive homepage for an EV dealership concept.
Reimagine the digital dealership experience with a focus on accessibility, user experience, and modern visual design.
Build a new brand identity to explore fresh creative directions while drawing from real-world dealership knowledge.
Constraints
NDA restrictions from prior automotive work required a full rebrand and original interface design.
Adherence to a defined Bootstrap grid and atomic design methodology.
Design Process
Ideation
Mapped out potential UI components and page structure aligned with dealership needs and user goals.
Created a sitemap in FigJam to define the site’s structure and navigation flow.
Chose a modular design approach, defining layouts for desktop, tablet, and mobile breakpoints.
Revamped an earlier design as a foundation, updating it to meet current goals and visual standards.
Developed a simple brand identity, including a wordmark, color palette, type scale, and spacing system, to guide the visual language and maintain consistency across components.
Design Execution
Sourced copyright-free imagery to enhance visual appeal while ensuring legal compliance.
Built out components using atomic design principles and Figma’s auto layout features for flexibility and consistency.
Assembled components into templates and full-page layouts, establishing a cohesive and scalable UI system.
Focused on accessibility by testing color contrast, applying a clear type scale, and adding features like a language selector in the header.
Left internal notes and comments throughout the Figma file to guide my own revisions, document design decisions, and keep momentum during the refinement process.
Used self-critique and iterative adjustments to continuously improve layout, hierarchy, and visual clarity over time.
Prototyping
Developed a static prototype with distinct mockups for desktop, tablet, and mobile breakpoints to demonstrate responsive design intent, even though the prototype does not dynamically adapt to screen sizes.
Implemented a sticky header and a mobile menu featuring expandable submenus for easy navigation.
Included interactive elements such as carousels, modal windows, hover effects, and sticky icons for chat and AudioEye fixed at the bottom of the screen.
Designed a footer with accordion-style navigation to optimize usability on smaller devices.
Style Guide
Defined core brand elements including a logo, color palette, type scale, spacing system, and icon set to establish a cohesive and consistent visual language across the interface.
View the full style guide in the Figma file.
Components
Built using atomic design principles and Figma’s auto layout. These components ensured consistency and adaptability across templates.
Site Map
Created in FigJam to map out core content structure based on user needs and dealership goals.
Grid System
Established a 12-column responsive grid to maintain structure across breakpoints and simplify layout decisions.
Challenges & Solutions
Challenges
Simplifying content structure to avoid overwhelming users.
Prototyping realistic dropdown interactions on mobile.
Managing scope creep by prioritizing features and maintaining clarity of project goals.
Solutions
Streamlined the site map and content hierarchy to enhance scannability and reduce cognitive load.
Worked through challenges setting up interactive dropdowns on mobile, iterating to reach a functional MVP with usable touch targets.
Maintained focus by prioritizing core features and clearly defining project goals to prevent scope creep.
Outcome & Reflection
Outcome
Developed a responsive homepage prototype for a fictional EV dealership.
Delivered a clean, functional brand and interface that reflects real-world dealership needs and user behavior.
Reflection
Strengthened skills in building scalable design systems and responsive UI.
Gained new insights into transitioning design methodologies and adapting to constraints.
Identified opportunities to deepen prototyping capabilities, particularly in mobile navigation and interactivity.