Customer Engagement App
The central hub where users monitor engagement metrics and campaign performance.
Project Overview
Company:Saylent Technologies
Role:UX Designer (First in-house designer)
Timeline:2014-2016
Team: Solo designer collaborating with 2 Product Managers, 6 Engineers
THE CHALLENGE: Saylent Technologies' Customer Engagement App (CEA) was a critical platform for credit unions and regional banks to track customer engagement and manage marketing campaigns. However, the existing interface was outdated, cluttered, and difficult to use—resulting in frustrated users and inefficient workflows.
The company needed a complete UX overhaul that would:
- Modernize the visual aesthetic to match contemporary SaaS standards
- Improve usability and reduce time-to-complete common tasks
- Create a scalable design system for future product development
- Establish design processes and standards for the growing product team
THE SOLUTION: As Saylent's first in-house UX designer, I led a complete redesign of the Customer Engagement App from the ground up. I established user-centered design processes, conducted research with financial services users, and created a comprehensive design system that would serve as the foundation for all future Saylent products.
THE IMPACT:
- Reduced design-to-development time by 40% through reusable UI component library
- Improved user task completion efficiency through streamlined workflows
- Established design system adopted across multiple Saylent products
- Created first formal UX research and testing program at Saylent
- Set design standards that influenced company-wide product development
Sitemap (alpha)
Before starting on the updated design for the Customer Engagement App (CEA), I first took to creating an updated sitemap. This allowed me to set a basic path for users to navigate through the application, while also separating the pieces of the application into useful areas.
Wireframes
I created a set of wireframes that could be quickly iterated on for presenting ideas to project stakeholders and other interested parties.
Visual Designs
These screens represent the high-value interfaces that contained the majority of components used throughout the application. By designing these first, I established visual patterns and interaction models that could be applied consistently across the entire product.
Screens
Customer Dashboard
The central hub where users monitor engagement metrics and campaign performance. Key design decisions included:
- Clear visual hierarchy emphasizing most critical metrics
- Customizable widgets allowing users to personalize their view
- Quick access to common actions through prominent CTAs
Engagement Reporting
Comprehensive analytics interface for tracking campaign effectiveness and customer behavior. Design focused on:
- Clean data visualizations emphasizing trends and insights
- Flexible filtering and date range selection
- Export functionality for sharing reports with stakeholders
Updates / Settings
Configuration interface for managing campaigns and user preferences. Prioritized:
- Logical grouping of related settings
- Clear labels and helpful descriptions
- Inline validation and error prevention
- Confirmation dialogs for destructive actions
Color Palette
The color palette and simplified component examples were some of the first items created, in order to provide the development team with a baseline in which to build the environment from.
Component Examples
Navigation
Results & Impact
Adoption & Growth
- Redesigned interface launched to all Saylent customers in Q3 2015
- Positive reception from existing users, with reduced support tickets
- Component library adopted as standard for all future product development
User Feedback
- Post-launch usability testing showed marked improvement in task completion times
- Customer satisfaction scores increased following redesign
- Users consistently praised the "modern, professional" appearance
- Support team reported decrease in UI-related questions and confusion
Business Impact
- Reduced design-to-development time by 40% through reusable component library
- Improved development team efficiency through clear design specifications
- Established design standards that accelerated development of additional products
What I Learned
This project taught me invaluable lessons about establishing design practice at a growing company:
- Design systems pay dividends. The reduction in design-to-development time came directly from creating reusable, well-documented components. The upfront investment in building a component library saved countless hours on future projects.
- Being the first designer means building infrastructure. Beyond just designing screens, I had to establish processes for user research, usability testing, design reviews, and design-dev collaboration. This foundational work enabled Saylent to scale its design practice as the team grew.
- Financial services users value clarity and confidence. Through research, I learned that our users prioritized clear labeling, logical workflows, and confirmation steps over flashy interactions.
- Documentation is as important as the designs themselves. The component library was only valuable because it included clear usage guidelines, code snippets, and examples. This taught me that design deliverables must include the context engineers need to implement them correctly.
The success of this redesign demonstrated the value of user-centered design at Saylent and paved the way for building a mature design practice at the company.
Final thoughts
I believe that the process used for this project, albeit different, fit within the framework given and met all of the requirements as laid out by the Project Management Team. In the end, a new interface was created that met all of the requirements and was based off of clear steps and proper research. Competitively, this new design met, and often surpassed, expectations when compared to what was in use prior to this project.