Revamping Digital Identity: The Bankston’s UI/UX and JavaScript Redesign Project

In 2022, early in my academic journey at Texas State Technical College, I completed one of the most influential UI/UX and graphic design projects of my college experience: a full redesign of a local comic book shop website, anonymized here as Bankston’s Sports Memorabilia, Comics, & Collectibles. This project was not only a cornerstone in my learning about responsive design and front-end development, but it also laid the foundation for mastering wireframing, prototyping, and integrating dynamic JavaScript functionality. I earned an A in this course, which contributed to my perfect 4.0 GPA in the Web Design and Development program.

Project Objective: Redesigning with Purpose

The goal of this assignment was to take a poorly designed, static website and transform it into a responsive, user-friendly, and visually engaging online experience. Our client, a fictionalized version of a real comic and collectibles shop, had an outdated site with minimal navigation, poor mobile usability, and no interactive features. We were tasked with completely reimagining the brand’s digital identity from a modern design and UX perspective.

Tools and Technologies Used

This project focused heavily on core front-end web technologies, including:

HTML5: Semantic layout and accessible structure
CSS3: Responsive styling, layout, and design detailing
Vanilla JavaScript: Dynamic interactions, content loading, and form enhancements
Figma: Prototyping and wireframe mockups
Adobe Photoshop & Illustrator: Graphics, logos, and image prep
Font Awesome: Iconography integration

These tools allowed for a complete visual and functional redesign of the site, all while staying light on load times and heavy on usability.

Design Strategy: Prototyping & Wireframes

Before writing a single line of code, I began with wireframes and mockups in Figma to establish a clear structure and user journey. From homepage to product category pages, each layout was thoughtfully planned with:

Clear navigation hierarchy
Visual branding consistent with comic culture
CTA placements designed for engagement
Grid layouts for responsive breakpoints

The user interface was crafted to appeal to fans of comics and collectibles while remaining accessible and easy to navigate across all screen sizes.

Enhancing UX with JavaScript

One of the most rewarding aspects of the project was implementing Vanilla JavaScript to bring interactivity to the site. Key features I developed included:

Collapsible mobile menus for improved mobile UX
Dynamic content rendering for sections like New Arrivals and Featured Items
JavaScript-driven form validation for contact and order pages
Interactive hover effects and modal windows for product previews

These additions elevated the site from a static brochure-style layout into a lively, user-focused experience.

Responsive Design & Mobile Usability

Just like with the Escape Room project, this website had to work flawlessly across all devices. I implemented:

Flexbox and media queries for fluid layouts
Optimized breakpoints from 320px to full desktop widths
Legible font scaling and padded tap targets

This mobile-first strategy ensured a consistent experience for users whether they were browsing from a smartphone, tablet, or desktop.

Graphics and Image Optimization

Using Adobe Photoshop, I refined all graphics for the site:

Resized and compressed product images for fast loading
Exported icons and logos in scalable vector formats
Used modern image formats like WebP where applicable

All graphics were optimized to retain quality without bloating the load speed, resulting in a faster, leaner site performance.

CSS Organization and External Resources

I made use of external CSS imports to organize my stylesheets modularly. I structured my CSS in:

Base styles (typography, reset, colors)
Layout styles (containers, grids, spacing)
Component styles (buttons, cards, navbars)

By following this modular architecture, the styles were easier to manage, scale, and debug. I also integrated Font Awesome for a polished visual finish using intuitive iconography.

Takeaways and Academic Impact

This was one of my earliest experiences combining graphic design, responsive UI/UX, and functional JavaScript, offering a full-stack front-end perspective. Key lessons included:

How design thinking and visual storytelling improve usability
The power of Vanilla JavaScript for real-time user engagement
Best practices in mobile-first development and browser testing

The A grade I received reinforced both the technical and creative proficiency I brought to the table. This project also strengthened my understanding of collaborative design tools like Figma and my ability to plan, prototype, and iterate effectively.

Conclusion

The Bankston’s redesign project was more than an exercise in HTML and CSS. It was a launchpad for my confidence as a UI/UX designer and front-end developer. From graphics and layouts to scripting and responsive styling, I was able to deliver a project that both functioned beautifully and looked sharp across all devices.

Not only did this early college project sharpen my JavaScript and design skills, but it also taught me the discipline of structuring projects, applying user-first principles, and meeting visual branding goals. These are lessons I still carry with me in every project I build today.

Bankston’s Comics