Simplifying the Renovation Journey
I designed the web experience for Renovate AI Studio, a platform that allows homeowners, real estate agents, and enterprises to remodel spaces using AI. This case study details my process, decisions, and impact in creating this user-centered design solution.
Company
Renovate AI
Role:
Senior Product Designer
Industry:
Home Renovation & Real Estate
Timeline
7 weeks (May 2024 - June 2024)
Preview
My Role and Responsibilities
I worked closely with a cross-functional team consisting of a product manager, two frontend engineers, one backend engineer, and an AI specialist. My primary contribution was translating complex AI capabilities into an intuitive user experience that empowered users to visualize renovation ideas effortlessly.
Leading the end-to-end design process from research to implementation
Creating and maintaining the design system for customer-facing applications
Conducting user research with homeowners, agents, and enterprise clients
Designing the user interface and interaction patterns
Facilitating workshops with stakeholders to align on vision and requirements
Collaborating with engineers to ensure feasible implementation
Testing and validating design solutions with users
The Challenge
Renovate AI tasked me with creating a user-friendly design studio that would allow users to:
Instantly visualize renovation ideas without technical expertise
Explore design options and customize spaces intuitively
Receive AI-powered recommendations for their projects
Complete the entire renovation visualization process in minutes rather than days
The primary constraint was a tight timeline—I needed to deliver a complete platform redesign in just 6 weeks. This required me to balance comprehensive user research with rapid design iterations while maintaining a focus on usability and visual appeal.
Gameplan
My Research Approach
Research Methodology
I conducted a multi-faceted research approach to deeply understand user needs:
Key Research Findings
Through my analysis of interview transcripts and workshop outputs, I identified three primary pain points:
Navigation Confusion (8/12 participants)
Users struggled to navigate the previous version of the platform
Many found it difficult to effectively communicate their needs to the AI
Example quote: *"I never know if I'm doing it right or what to expect next.* - Homeowner participant
Control Issues (10/12 participants)
While users appreciated AI suggestions, they wanted more control over customization
Many felt frustrated when they couldn't make specific adjustments to AI-generated designs
Example quote: *"The AI gives me ideas, but I need to be able to tweak them myself."* - Real estate agent
Workflow Complexity (11/12 participants)
Users needed clearer prioritization of steps in the renovation process
Many wanted a more visually engaging and intuitive interface
Example quote: *"There are too many options and I don't know which ones matter."* - Enterprise client
I synthesized these findings into a research report with specific recommendations that directly informed my design decisions.
The Design Process and Decisions
Information architecture.
Based on my research findings, I created an information architecture that prioritized:
Clear step-by-step workflow
Contextual tools and options
Transparent AI processing
Intuitive navigation between project stages
I developed two distinct approaches to test with users:
Approach A: Side Navigation with Stacked Filters
I designed a layout with renovation steps in a side navigation bar
Users could stack styles and filters in a panel
This approach offered an animated bubble for the design preview
I created interactive prototypes to test this approach with users
Approach B: Canvas View with Central Action Bar
I designed a canvas-based interface allowing users to zoom and pan freely
All actions and styles were accessible from a central action bar
This approach offered more flexibility and aligned with existing design patterns
I developed detailed interactive prototypes for user testing
Before conducting A/B testing, I recommended Approach B to the team because it aligned better with our existing design system and offered a more scalable solution. However, I wanted to validate this with actual users before making a final decision.
User Testing Methodology
I conducted moderated usability testing with 8 participants:
4 tested Approach A
4 tested Approach B
Each session lasted 30 minutes
I created a standardized test script with 5 key tasks
I recorded sessions and took detailed notes
I measured task completion rates, time on task, and error rates
Testing Results and Iterations
My testing revealed that Approach B was significantly more successful:
100% of users completed all tasks (vs. 75% for Approach A)
Average task completion time was 30% faster
Users reported higher satisfaction
Key findings that informed my iterations:
Users valued the expansion accordion showcasing steps
The canvas view provided better context and flexibility
Users appreciated being able to return to previous steps without losing progress
Based on these findings, I refined Approach B with several improvements:
Enhanced step indicators to provide better progress feedback
Added more educational tooltips at key decision points
Implemented micro-interactions to confirm user actions
Refined the action bar organization based on frequency of use
Feature Deep-Dive: Dynamic Action Bar
One of the most critical features I designed was the Dynamic Action Bar, which deserves special attention as it addressed multiple user pain points simultaneously.
Problem Statement
During user testing, I observed a pattern where users would repeatedly tap "Next" without taking meaningful actions, thinking they were making progress. This indicated a fundamental issue with action discoverability and feedback.
Exploration Process
I explored two different approaches to solve this problem:
Static Action Bar
Pros: Familiar pattern, always visible
Cons: Limited contextual relevance, screen space constraints
Dynamic Action Bar (Final Solution)
Pros: Contextually relevant, consistent positioning, scalable
Cons: Required learning curve for first-time users
My testing showed highest task completion rates after brief orientation
Design Details
For the Dynamic Action Bar, I designed:
Consistent positioning at the bottom of the interface
Clear visual hierarchy with primary and secondary actions
Micro-animations to indicate state changes
Tooltips for first-time users
Scalable Design System Kickoff
I wanted to stay focused on user's journey and not worry about "Oh, whats the padding in the primary button on the left and right vs top and bottom?" and I don't want the developers to retype the code to create a button, accordion or input field every time we build something.
To ensure consistency and development efficiency, I created Renovate AI's first comprehensive design system:
Core Components
I designed and documented 35+ reusable components including:
Button system with 4 variants and 3 states
Form elements with validation states
Navigation components with active/inactive states
Modal system with 5 use cases
Card components with multiple content types
Product specific components
Design Tokens
I established a token-based system for:
Color palette with semantic naming
Typography scale with responsive adjustments
Spacing system based on 8px grid
Animation timing and easing functions
Documentation
I created comprehensive documentation including:
Usage guidelines for each component
Implementation notes for developers
Accessibility requirements
Interactive examples
This design system significantly improved development efficiency, reducing implementation time by approximately 40% for new features.
Final Design Solution
My final design for Renovate AI Studio included several key features I developed to address specific user needs:
Project Templates
Provide users with ready-made design presets to kickstart renovation projects and reduce decision fatigue.
Dynamic Action Bar
Inspired by Adobe Firefly, the action bar offers quick access to essential tools, giving users full control to modify, fine-tune, and experiment with their designs in real-time.
Save Progress Alerts
Warn users about unsaved changes, ensuring no work is lost during their design process.
Status Indicators
Keep users informed of project milestones and material availability throughout the workflow.
Loading Animations
Use micro-interactions, such as loading circles, to provide visual feedback, ensuring users know the AI is actively processing their design inputs.
Prototype
Business Impact
My redesign of Renovate AI Studio delivered significant measurable impact:
Challenges and Trade-offs
Throughout this project, I navigated several challenges:
Timeline Extension
While I aimed for a 6-week timeline, I advocated for an additional week to conduct more thorough user research
This decision ultimately improved the final product quality and addressed stakeholder concerns
Technical Constraints
After reviewing my initial designs with engineering, we discovered implementation would require a major refactor
I collaborated closely with engineers to redesign certain elements while maintaining the core user experience
This collaboration prevented scope expansion while preserving the essential improvements
Feature Prioritization
With limited time, I had to make difficult decisions about feature prioritization
I created a decision matrix based on user impact and implementation effort
This allowed me to focus on high-impact, feasible improvements first
Lessons Learned
This project taught me several valuable lessons:
Early Engineering Collaboration
Involving engineers earlier in the design process would have identified technical constraints sooner
In future projects, I'll include technical feasibility reviews at the wireframe stage
Iterative Testing
The success of the Dynamic Action Bar showed the value of focused feature testing
I'll continue to isolate and test critical interactions before full prototype testing
Future Plans
Based on user feedback and analytics, I've proposed several enhancements for future iterations:
Expand the design preset library with more styles and materials.
Enhance the AI recommendation engine by incorporating market trends and user behavior data.
Revamp the mobile version of Renovate AI Studio to provide a more accessible experience.
Introduce shopping directly through the App using the generated renovations.
Introducing cost estimates and budgeting to help users get cost estimates.
Conclusion
Renovate AI Studio's MVP is now live for approximately 20% of users, with a phased rollout plan I developed. Initial user feedback has been overwhelmingly positive, with users reporting significant time and cost savings.
I'm excited to continue evolving this platform based on user feedback and emerging technologies.