ArcFrame Website Redesign
Performance improvements and user experience enhancements for an architecture portfolio
Project Overview
ArcFrame, an architectural design firm, approached us to redesign their outdated website that was suffering from performance issues and poor user experience. The project focused on improving load times, enhancing mobile usability, and creating a more effective showcase for their architectural portfolio.
Timeline
12 weeks
Role
Lead Designer & Developer
Client
ArcFrame Architecture
Year
2023
Challenges
Slow Load Times
The legacy site took 3-4 seconds to load, causing high bounce rates and user frustration.
Poor Mobile Experience
The site was not responsive, resulting in poor readability and navigation on mobile devices.
Overwhelming Galleries
Project galleries lacked hierarchy and organization, making it difficult for users to find relevant work.
Project Goals
Sub-1 Second First-Paint
Dramatically improve initial load performance to under 1 second.
Fully Responsive Mobile UI
Create a seamless experience across all device sizes.
Improved Gallery Flow
Implement a 'Featured → All → Detail' gallery flow for better user navigation.
Maintainable Design System
Establish a consistent and scalable design system for future updates.
98+ Lighthouse Score
Achieve excellent performance, accessibility, and SEO metrics.
Research & Analysis
We conducted in-depth interviews with 6 users representing different stakeholder groups to understand their needs and pain points.
Key Findings:
- Users were frustrated by slow image loading in project galleries
- Mobile users struggled with navigation and reading text
- Clients wanted an easier way to browse projects by type
- Users expected to see featured projects immediately
User Personas
Architect
Professional architects looking for inspiration or potential collaboration opportunities. Interested in technical details and innovative approaches.
Enthusiast
Design enthusiasts and potential clients browsing for ideas and to assess ArcFrame's style and capabilities.
Developer
Real estate developers seeking to evaluate ArcFrame's portfolio for potential commercial projects.
Information Architecture
Design System
Grid System
12-column responsive grid
Spacing
1rem base with 0.5x, 1x, 2x, and 4x multipliers
Typography
Two-step typographic scale
Color Palette
Charcoal, white, teal primary colors
Performance Optimization
Image Optimization
- WebP format with fallbacks
- Lazy loading for off-screen images
- Responsive image sizes
- Image compression without quality loss
CSS Optimization
- Inlined critical CSS
- Deferred non-critical styles
- Minimized CSS bundle size
- Removed unused CSS
JavaScript Optimization
- Bundle size under 20KB
- Code splitting for route-based loading
- Deferred non-critical scripts
- Minimal third-party dependencies
Server Optimization
- CDN for global asset delivery
- Browser caching with long expiry
- Gzip/Brotli compression
- HTTP/2 for parallel loading
Results
First-Paint Time
0.9sAchieved sub-1 second first-paint time, a 74% improvement over the original site.
Mobile Bounce Rate
-42%Significant reduction in mobile bounce rate due to improved responsiveness and load times.
Inbound RFPs
+25%Increase in qualified leads and requests for proposals after the redesign.
Page Build Speed
+40%Improved efficiency in creating new pages thanks to the component-based design system.
Lighthouse Score: 98/100
The redesigned site achieved excellent scores across all Lighthouse metrics.
Performance
Accessibility
Best Practices
SEO
Next Steps
Project Filters
Add advanced filtering options to the project gallery.
Downloadable PDFs
Create downloadable project sheets for offline viewing.
Automated Lighthouse Monitoring
Implement continuous performance monitoring to maintain high scores.
Conclusion
The ArcFrame website redesign successfully transformed an outdated, slow-loading site into a high-performance, user-friendly platform that effectively showcases the firm's architectural portfolio. By focusing on performance optimization, responsive design, and intuitive information architecture, we were able to significantly improve user engagement metrics and business outcomes.
The established design system provides a solid foundation for future growth, enabling the ArcFrame team to maintain consistency while easily expanding their online presence as their portfolio grows.