( Teamfront / January 2024 – Present )
WikiPro Web
The redesign turned a fragmented, organically grown business tool into a cohesive modern SaaS experience unified under Align UI, covering nine core modules in both light and dark mode with interactive navigation states and a custom component library.
- My role
- Lead UI/UX Designer
- Timeline
- January 2024 – Present
- Category
- Enterprise SaaS Product Design
- Status
- Redesign, delivered
Tools Figma, Align UI Design System
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
Lawn care companies, cleaning services, legal firms, and retail operations all run on the same three things: staying in touch with customers, protecting their reputation, and winning repeat business. WikiPro is the cloud platform they do that on. It replaces six to eight separate tools with real-time SMS and team chat, calendar and appointment scheduling, review monitoring across Facebook, Google, Yelp, and Amazon, automated surveys with NPS tracking, payment and transaction management, a full CRM, marketing automation with campaigns and drip flows, and reporting dashboards. Businesses onboard their teams into an organizational model covering staff, departments, signatures, and role-based access, then reach their customers through SMS, scheduled messages, and templated workflows.
This project was a full platform redesign spanning nine core modules: Chat, Calendars, Reviews, Surveys, Payments, Customer Management, Marketing, Reports, and Settings. WikiPro had reached that scale the way most feature-rich platforms do, one module at a time, starting as a simple messaging tool and accumulating reviews, surveys, payments, marketing, and CRM along the way. Each addition solved a real need. Together, they had stopped feeling like one product.
The redesign existed to put the whole platform back under one design system, rebuild the information architecture around how service businesses actually work, and give data-heavy screens the visual hierarchy they had never had.
The problem
WikiPro carried the accumulated friction of a platform that had grown without a cohesive design strategy. Each module had its own visual language, navigation patterns, and interaction models, so the experience fragmented as the product expanded, leaving a steep learning curve for new users and daily cognitive overhead for everyone else. Six problems shaped the work:
- Inconsistent visual language and UI fragmentation. There was no unified design system. Buttons, tables, cards, typography, and color varied across modules, so the product read as a patchwork of disconnected tools. Users had to relearn interaction patterns moving between Chat, Reviews, Payments, and Marketing, which broke their workflow and slowed task completion.
- Weak information architecture and navigation complexity. Nine major modules and dozens of sub-features (campaigns, flows, keywords, templates, scheduled messages, departments, custom fields, API keys) sat in a hierarchy that was never clearly structured. Users struggled to find features, understand how modules related, and form a mental model of where anything lived. Sidebar navigation, sub-navigation, and the settings structure all needed a rethink that could carry the platform's breadth without overwhelming anyone.
- Data-dense screens with no visual hierarchy. Reviews, Surveys, Payments, and Reports are built on charts, KPIs, transaction tables, and multi-source aggregations. The legacy design gave critical metrics no priority over secondary information, and without progressive disclosure users met all of it at once, which made actionable insight hard to extract at a glance.
- Inefficient communication workflows. Chat is arguably the most-used feature for a service business, and it lacked the sophistication professional customer communication demands. Managing unread messages, switching between direct messages and team chats, scheduling messages, handling SMS against in-app communication, and using templates all cost too many clicks and context switches.
- No dark mode and accessibility gaps. The legacy product offered no dark mode at all, a real oversight for users who spend long hours in the platform, and the existing UI did not follow accessibility best practices for contrast ratios, interactive state clarity, or consistent iconography.
- No unified marketing view. Campaigns, drip flows, keyword tracking, and auto-reply were either absent or buried in settings, so businesses could not run coordinated outreach and follow-up from one place.
What I did
The approach was a module-by-module overhaul unified under the Align UI design system, so visual consistency and scalable component architecture came from the foundation rather than being negotiated screen by screen. Every module was rebuilt against that shared vocabulary, and where the platform needed patterns Align UI did not cover, I extended the system with a local component library rather than letting one-off UI creep back in.
On that foundation I reorganized the platform around the work service businesses actually do. Chat became the communication nerve center with a three-panel layout. Calendars, Reviews, Surveys, Payments, Customer Management, Marketing, and Reports each got an information architecture matched to their data: overview dashboards where users need a read on performance, sortable tables where they need to operate on records, and sub-navigation that adds depth without cluttering the top level. Settings moved to a two-panel structure that made a long list of configuration areas navigable. Three cross-cutting layers ran through all of it: light and dark mode variants for every module, interactive icon hover states with contextual tooltips on the global sidebar, and the local component library that keeps domain-specific patterns reusable.
Outcomes
- Unified nine modules (Chat, Calendars, Reviews, Surveys, Payments, Customer Management, Marketing, Reports, and Settings) under one design system, replacing per-module visual languages with a consistent vocabulary that reduces cognitive load when moving between them.
- Simplified the information architecture across a platform of nine modules and dozens of sub-features by pushing depth into consistent sub-navigation and restructuring settings into a two-panel model.
- Gave data-dense modules clear visual hierarchy through KPI cards, sparklines, donut and stacked bar charts, and sortable tables, so reviews, survey, payment, and reporting insight is readable at a glance.
- Rebuilt the most-used module, Chat, into a three-panel workflow that consolidates unread triage, direct and team conversations, and send-time controls including SMS toggle, scheduling, and file requests.
- Gave marketing automation a unified home, bringing campaigns, drip flows, keyword tracking, keyword analytics, and auto-reply out of settings and into one coordinated module.
- Delivered every module in both light and dark mode with attention to contrast, interactive state clarity, and consistent iconography, closing a gap the legacy product never addressed.
- Established a scalable design foundation, Align UI plus a local component library, that supports future feature development without reaccumulating design debt.
What I learned
When a product grows one module at a time, the design debt does not show up in any single screen. Every module in WikiPro was defensible on its own; the cost only appeared in the transitions between them, in the moment a user moved from Chat to Payments and had to relearn how a table behaves. That reframed the redesign for me: the unit of work was not the screen, it was the seam between screens, and a shared component system was the only thing that could fix it everywhere at once.
Extending the design system locally turned out to matter as much as adopting it. Align UI covered most of the platform, but Chat needed patterns no general system would carry, and that gap is exactly where one-off UI normally reenters a product. Building those patterns as named, reusable local components instead meant the parts of the platform most likely to drift stayed inside the system.
Treating dark mode and accessibility as core requirements rather than a later phase changed the work in a way I would repeat. Deciding color and interactive states against both contexts while the components were being built kept it a single system with two modes. Deferring it would have meant reopening every module and maintaining a theme that had never been designed alongside the thing it themes.
( Tags )
- Web
- Enterprise SaaS
- B2B SaaS
- Field Service
- Business Operations Platform
- Customer Engagement
- Service Businesses
- Design Systems
- Align UI
- Information Architecture
- Navigation Design
- Interaction Design
- Visual Design
- Dark Mode
- Accessibility
- Data Visualisation
- Dashboard Design
- KPIs
- Data Tables
- Messaging and Chat UX
- SMS
- Scheduling
- Reputation Management
- Reviews
- Surveys
- NPS
- Payments
- CRM
- Marketing Automation
- Reporting and Analytics
- Settings and Configuration
- Component Library
- Multi-Module Platform
- WikiPro
- Teamfront