Small Business website REVISITED
Introduction
This report provides a comparative analysis of two versions of the Recursive Records website, created for the same small business. The purpose of this redesign was to address usability challenges, improve performance, enhance accessibility, and refine the visual identity of the brand. By examining the original and updated versions, this report will explain the reasons behind each change and how they contribute to an improved user experience and business outcome.
Site Structure & Navigation
In the original website, all content was consolidated into a single-page layout. While this approach simplified navigation in the short term, it became increasingly difficult to manage as more content was added. Users had to scroll extensively to access information, and search engines had limited opportunities to index individual pieces of content.
The new version introduces a modular, multi-page structure using PHP files. Pages such as About, Events, Contact, and Accessibility are now separate and accessible through a clear navigation menu. This change improves usability by allowing users to reach specific information quickly while also enhancing search engine optimization by giving each page its own URL and metadata. From a maintenance perspective, it also becomes easier to update or expand content in the future.
Visual Design & Branding
The visual identity of the original website was functional but lacked distinctiveness. Typography was limited to basic fonts, and colour schemes, while consistent, did not fully reflect the character of the brand. Interactive elements were minimal, resulting in a flat user experience.
In the redesigned version, a more deliberate use of typography and color has been applied. The introduction of the “Oi” and “Coustard” fonts gives the website a more defined personality, aligning with the retro-modern aesthetic of Recursive Records. The color palette was refined using CSS variables, ensuring visual consistency and simplifying future adjustments. The design now incorporates hover effects, image filters, and subtle animations, all aimed at creating a more engaging browsing experience that captures user attention without overwhelming them.
Accessibility Improvements
Accessibility was a significant area of improvement. The original site lacked basic accessibility features such as skip navigation links, comprehensive alternative texts, and clear focus states. This limited the site’s usability for individuals relying on screen readers or keyboard navigation.
The new version addresses these shortcomings by introducing a “Skip to content” link, improving contrast ratios, and refining focus indicators. Interactive elements have been made more accessible through clearer states, ensuring compliance with accessibility standards and providing a more inclusive experience for all users.
Content Organization & User Experience
Previously, content was presented in large, dense blocks, making it difficult for users to scan and digest information. The lack of visual hierarchy and modularity hindered both readability and engagement.
With the redesign, content has been thoughtfully organized into dedicated sections for vinyl players, gallery items, events, and team members. This modular approach improves scannability and allows users to focus on the information that interests them most. Enhanced layouts, including card-style containers and hover-reveal interactions, guide users intuitively through the website while maintaining visual harmony.
Interactivity & Dynamic Features
The original website featured a basic JavaScript function to display the shop’s open or closed status. While functional, it lacked nuance and did not adapt well to varying schedules or user contexts.
The new version introduces a more robust script that dynamically generates greeting messages based on the current day and time. This contextual approach provides users with accurate, real-time information about the shop’s opening hours, enhancing the overall user experience and fostering trust in the business’s online presence.
Performance Optimization
Performance was another critical focus of the redesign. The single-page layout of the original version led to longer load times, especially as more images were added. Although some performance techniques like lazy loading were in place, the overall structure was not optimized for scalability.
In the new version, images are optimized and modularized, with galleries utilizing grayscale previews that load quickly and transform on hover. CSS has been streamlined to load only necessary styles for each page, reducing unnecessary bloat and improving load times across the site.
SEO & Scalability
From a search engine optimization standpoint, the original site’s single-page structure limited visibility. Only one meta description was present, and content was not segmented in a way that would allow search engines to index it effectively.
The new multi-page structure solves this by enabling unique meta descriptions and structured URLs for each page. This not only improves visibility in search results but also lays the groundwork for future content expansion, such as blog posts, product pages, or event updates, making the site more scalable and adaptable to business growth.
Conclusion
The updated Recursive Records website represents a comprehensive improvement over its predecessor. Through deliberate enhancements in structure, design, accessibility, interactivity, and performance, the new version offers a more engaging, inclusive, and user-friendly experience. These changes not only elevate the brand’s digital presence but also ensure the website is better equipped to support the business’s long-term goals of community building, customer engagement, and online visibility.