Interactive Website Design
Designing Blueprint: Shaping Digital Spaces for Future Homes Through Modern UI and Immersive Storytelling
Project Overview
Blueprint’s original website didn’t fully capture the brand’s vision of building future-ready homes in collaboration with clients. The challenge was to create a sleek, modern digital experience that not only showcased projects and services, but also conveyed the company’s values through immersive design elements like video reels and before-and-after animations. The goal was to craft a user journey that feels inspiring, informative, and intuitive—helping visitors imagine the possibilities while making it easy to take the next step through streamlined appointment booking.
Timeframe
14 Weeks
My Role
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing
Tools
Figma, Photoshop, WordPress, Elementor
The Challenge
Blueprint needed a website that reflected its modern, future-focused vision.
Blueprint’s previous website didn’t reflect the brand’s innovative approach to homebuilding. It lacked modern design, clear user flow, and emotional impact—making it difficult to convey the process, values, and potential of working with Blueprint. The challenge was to create a digital experience that felt inspiring, intuitive, and aligned with the future-focused nature of the brand.
Objective/Goal
Redesign Blueprint’s website to reflect its future-focused vision through a clean, modern interface. The aim was to highlight services, values, and projects while guiding users smoothly toward booking a consultation.
My Design Process
EMPHATIZE
Research
COMPETITIVE MARKET ANALYSIS
We reviewed websites from homebuilding and architectural firms to understand how they present their services, values, and projects. Many lacked emotional engagement, clear user flow, or modern UI. This helped shape Blueprint’s redesign into a more immersive, story-driven experience—highlighting transformation, trust, and user clarity from the first interaction.
RMJE Construction
STRENGTHS
• Clear emphasis on professionalism and credibility
• Strong client testimonials and portfolio presence
• Detailed service descriptions
• Clean, easy-to-navigate layout
WEAKNESSES
• Visual design feels dated compared to modern trends
• Limited interactive elements or storytelling
• Project pages lack emotional impact or transformation
FEATURES
• Service breakdown by project type
• Project gallery with brief descriptions
• FAQ and contact form
• Client testimonial section
• Company profile and mission statement
Flores Builders
STRENGTHS
• Emphasis on “dream home” narrative
• Warm, approachable tone and brand voice
• Clear layout for services and project types
• Mobile-responsive and fast-loading
• Strong visual presence with consistent branding
WEAKNESSES
• Lacks interactive features
• Minimal content on design philosophy or process
• No dynamic appointment or client engagement tool
• Portfolio images are low resolution and not immersive
FEATURES
• Service list with icons
• Visual gallery of completed homes
• Contact form for inquiries
• Simple About Us and Values section
• Clean navigation for desktop and mobile
Top-Notch Construction
STRENGTHS
• Straightforward messaging with a strong trust tone
• Highlights reputation and years of experience
• Organized and readable project showcase
• Simple, informative layout
• Includes detailed contact and inquiry options
WEAKNESSES
• No video, animations, or interactive content
• Site lacks emotional storytelling and client transformation emphasis
• Doesn’t showcase values or process visually
• Limited mobile UI enhancements
FEATURES
• Project portfolio with images
• Quote request and contact form
• Service listings
• Brief company background
• Testimonials and client quotes
USER INTERVIEWS
To understand user needs, I conducted interviews with people looking to build or renovate homes.
To understand user needs, I interviewed people planning to build or renovate. Many felt unsure about where to start and wanted clear steps, visual inspiration, and proof of credibility. These insights shaped a design focused on trust, clarity, and ease of action.
Key Insights
Process Transparency
Users wanted a clear understanding of how the homebuilding journey unfolds. Highlighting Blueprint’s step-by-step process helped reduce uncertainty and build confidence in taking the next step.
Visual Inspiration Builds Trust
Interviewees responded strongly to real project visuals and transformation stories. Before-and-after animations and video reels were essential in helping users envision possibilities and trust the brand.
Simple, Guided Experience
Overwhelming layouts were a common pain point. Users preferred a clean, modern interface that guided them intuitively—making it easier to explore services, view projects, and book consultations.
User Personas
Based on insights from user interviews, I created personas to represent key audiences looking to build or renovate their homes. These profiles reflected user goals, frustrations, and expectations—guiding design decisions toward clarity, inspiration, and a more intuitive experience.
POV
Points of View
People planning to build or renovate their homes—whether hands-on creatives like Carla or remote clients like Jon—need a way to clearly understand the construction process, visualize potential outcomes, and feel confident in the team they’re working with. With varying needs and locations, users seek transparency, inspiration, and guidance throughout the journey.
HMW
How Might We
How might we design a home construction website that inspires trust, showcases real transformation, and makes it easy for users—both local and remote—to explore services, understand the process, and confidently start their homebuilding journey?
Project Goals
The goal is to create a clean, modern website that emphasizes visual storytelling, outlines the full project journey, and enables users to explore past work, book consultations, and feel assured about the company’s expertise—whether they’re involved in the process directly or managing it from afar.
Low - Mid Fidelity Wireframes
To establish the foundation of the redesign, I created low to mid-fidelity wireframes that mapped out content hierarchy, interactions, and layout structure. These early versions helped define how Blueprint would guide users through the homepage, highlight services, and showcase transformations in a clear and engaging flow.
High Fidelity Frames
Once the structure and flow were validated, I moved on to high-fidelity mockups. These designs brought Blueprint’s modern aesthetic to life using a consistent UI system—clean typography, warm neutral tones, and bold imagery. The final visuals aimed to evoke professionalism and approachability while aligning with Blueprint’s brand values.
Usability Testing
To ensure the design was intuitive and goal-oriented, I conducted usability tests using interactive prototypes. The focus was on user clarity, navigation, and engagement with Blueprint’s key sections.
TASK 1
Users easily scrolled through the homepage and understood the purpose of the site within seconds. The hero video and headline messaging were especially effective in setting the tone.
TASK 2
Participants interacted with the before-and-after animation smoothly, which helped them visualize the design transformation process. This feature resonated strongly, particularly with users exploring their first home renovation.
TASK 3
Users were able to locate the appointment form without hesitation. Many appreciated the minimal fields and the clear call to action.
User Feedback:
“I wanted to see what kind of homes Blueprint has actually worked on—some before-and-after visuals or finished projects would really help.”
“The site feels a bit static. I was expecting something more dynamic, like videos or animations, to show what the company stands for.”
“It wasn’t obvious how to book an appointment. I kept looking for a form or button that tells me what to do next.”
Iterations
To solve this, I added a before-and-after animation, embedded video reels showcasing Blueprint’s vision, and introduced a clear, easy-to-access appointment form at the bottom of the homepage.
