ResumeRe-defining the Management Portal with a Unified & Cohesive Design System
Project
Remodel AI
My Role
Lead UI/UX Designer, Strategist
Timeline
8 Months, 2024
Tools
Figma, React MUI
Team
Designer x1, Front-end x 4, Back-end x 6
Background
Understanding the need
Many home improvement companies are adopting AI chatbots to manage inquiries across services like plumbing, HVAC, and roofing. However, most chatbot solutions are generalized, offering a one-size-fits-all approach that lacks the customization needed for this sector.
Additionally, not every chatbot provides essential features like customer management, lead tracking, and analytics, prompting companies to seek specialized platforms designed to meet their unique needs.
A Tailored Solution
Why Remodel AI
Remodel AI is specifically designed for the home improvement sector, offering tailored chatbot solutions unlike generic chatbot platforms, it provides advanced features ensuring businesses to streamline operations, improve conversions, and gain valuable insights for growth.
Lead Management &
Client Tracking
Data Analytics and Insights
Integrated Campaign and Ad Management
Quick Integration
Customizable Scripts
& Virtual Employee Setup
Efficient Appointment Scheduling
Problem
Where is the issue
When Remodel AI was in its early stages, initial users, including stakeholders and developers, encountered various challenges like:
Inconsistent Layout
Fragmented Sitemap
Confusing Interface
Complex Onboarding Process
Solution
What I Did?
1
The side navigation had a poor information structure, with elements randomly placed, making it hard for users to find important items easily.
2
The main landing page, intended as a dashboard, lacked any display of analytics or key insights.
3
The initial onboarding had minimal information, with action buttons like "Learn More" and "Add Entity" styled the same, causing confusion.
4
The top profile button was unclear, offering only basic options like name and settings without additional useful functions.
Solution
What I Did?
Created a Design System as a single source of truth for a cohesive UX
Redesigned the site with a modified navigation for better usability
Launched a chatbot widget to simplify client onboarding.
Designed a new scheduler engine for lead capture.
Solution
Impact
92%
Success in client onboarding and intial task perfomance during User testing
40%
Improvement in Task efficiency
95%
Achievement in user satisfaction with the modified User Interface
View Results
Solution
Easing the Onboarding Process
Introduced a Chatbot Widget to guide clients through setting up their profiles and adding organization and entity details for a seamless onboarding experience.
Simplified Onboarding by providing step-by-step assistance through the chatbot, ensuring clients can quickly and accurately configure their accounts and organizational information.
The Process
How it all started?
Conducted an in-depth analysis of the current site
Gathered insights by speaking with users and stakeholders
Synthesized the research, identified key pain points
Developed a design system and crafted an intuitive layout.
Performed user testing and handed off the final solution to developers.
Site Analysis
User Interviews
Strategize
Design
Testing & Handoff
Problem
Listening to the Pain Points
Conducted in-depth stakeholder interviews, to thoroughly understand their pain points, requirements, and workflow challenges. This phase provided critical insights into existing usability issues and desired outcomes, informing user-centric design strategies.
What did they say...
“
The interface feels inconsistent, the design elements don’t match, making us feel confused.
Onboarding is a hassle, new clients struggle to set up profiles and add organization details with the current guidance.
The navigation is disoriented, and we need to arrange everything in the right order to make it more intuitive.
The product’s UI is not visually pleasing; we need to elevate the design to make it more appealing.
Pain points
Confusing action buttons in many pages
Complex initial setup with multiple unclear order of tasks
Inconsistent navigation between dashboard and subsections
Opportunities
Organize navigation logically to improve user access
Simplify the initial setup with guided walkthroughs
Structure main and most used pages for easy access.
Dedicated design system for overall consistency
Strategize
Organizing the Site Map
Solution
What I Did?
1
Organization Placement: The "Organization" section was misplaced as the main element, disrupting the workflow and confusing users. It should have been part of the dashboard setup.
2
Empty Dashboard: The dashboard lacked key data, such as analytics and recent conversions, making it ineffective for users to gain insights.
3
Unorganized Main Sections: Key sections like Organization, Contact Center, and Marketing were poorly structured, making navigation and information access difficult.
4
Calendar Placement: The calendar, essential for scheduling, was not given its own section, leading to confusion and inefficient access.
5
Unclear Settings Section: The "Settings" section was incomplete, missing profile and subscription details, and lacked a logout option, hindering user management.
New Version
Solution
Easing the Onboarding Process
Reorganized Site Map: I restructured the site map into seven distinct sections-Dashboard, Inbox, Contacts, Calendar, Agents, Marketing, and Organization, based on hierarchy and use cases, improving usability and navigation.
Clear Categorization: I further segmented the site into dedicated areas for Entities, Locations, and Profile (with subscription, settings, and logout options), ensuring each section is logically grouped and easily access.
Design
Wireframe Layout Planning
Dashboard
Marketing Page
Conversations Page
Entities Page
The Main 7 Sections are arranged in Tabs to navigate
Side Navigation Bar Helps Users Navigate Between the
Sub Sections
Further Sections like Entities , Location and Profiles
Campaign Cards are Arranged Horizontally for Easy Selection
Data Table with Pagination is Arranged in Center of the Page
Component Library
I developed a scalable, reusable component library for Remodel AI, customizing MUI React components to align with our unique design requirements. This approach ensured consistency across the app while allowing flexibility for future feature updates.
Challenge
…and the Final UI!
The final UI design brought the Remodel AI platform to life, delivering a clean, intuitive, and visually cohesive experience. With streamlined navigation and a consistent design language, the updated interface effectively addressed user pain points and enhanced overall functionality.
Challenge
Not Done Yet! How about Lead Capture?
The scheduler engine is essential for streamlining client bookings, enabling efficient lead capture and appointment management by aligning client needs with available employee schedules.
Scheduler Engine for Consultation Appointments
This section allows new clients to book consultations by selecting available employee schedules. They provide key details like the service needed (e.g., Plumbing), a problem description, and contact info, then choose a consultation time. Once submitted, the process ensures efficient lead capture and appointment scheduling.
...and a lot more!
Visit live website
Key Takeaways & Learnings
Remodel AI Taught Me
Solving User Pain Points: Addressing user frustrations early through research and feedback is crucial. Identifying pain points allows for targeted solutions that enhance usability and overall experience.
In-depth User Understanding: A well-constructed design system provides consistency and efficiency, ensuring that the product is not only visually cohesive but also intuitive and user-friendly across various touchpoints.
Understanding the Industry: Gaining industry insights before designing is key to aligning the product with specific business needs and user behaviors, resulting in a more relevant and impactful design solution.
E-commerce
B2B
Gamification
Healthcare
Logistics
Fintech
Selected Projects
O'keeffes Care
Designed a skin condition recommendation platform with 90% usability and integrated e-commerce.
View Casestudy
