My Role
Sole UX Designer
Developed and maintained a design language
User research, prototyping, UI design
Developer collaboration
Date
June 2015 - July 2022
The Challenge
When I joined the team, Total Connect's existing platform was built on outdated Adobe Flash technology, severely limiting functionality and scalability. The iOS and Android apps offered inconsistent features and confusing user flows. Additionally, the site could only display up to 10 users, a major limitation for locations requiring thousands of personnel. The immediate need was establishing a flexible, future-proof framework capable of handling growth.
User Research and Discovery Through surveys, interviews, and competitive analysis, I gained deep insights into the audience's needs and pain points. Key findings included:
Users wanted a unified platform to control security devices, cameras, and locks.
Complex, confusing usability was a top concern.
Optimization for heavy mobile usage was critical.
Old Total Connect Flash site
Design Strategy
Guided by research insights around tangled navigation, fragmented mobile experiences, and limited account management, I focused on simplifying information architecture and streamlining workflows. Top priorities included:
Intuitive menus and navigation
Unified platforms through consistent user experiences
Enhanced location switching and robust user controls
User profiles and flows tailored for mobile-first usage
User personas captured common goals and frustrations, informing decisions like the mobile-first approach to information architecture.
Early ideation
Iterative Prototyping and Testing
I rapidly visualized concepts through low-fidelity wireframes, using grayboxes to explore different IA and user flow options. Stakeholder feedback shaped multiple iterations. Higher-fidelity wireframes added detail on UI elements like buttons and menus, which I wove into interactive, clickable prototypes for visualizing and testing user flows.
After refining the wireframes based on usability testing, I designed high-fidelity visual mockups applying branding, imagery, and copy for final approval. This phased approach ensured optimal usability before aesthetic refinement.
Extensive user testing was crucial throughout the process. Early wireframe testing exposed navigation and menu confusion. Prototypes uncovered complex account management workflows. User feedback on high-fidelity designs further simplified elements like reducing clutter, clarifying labels, and enhancing user education.
The Impact
The final Total Connect 2.0 design provided a streamlined, consistent user experience meeting core needs. Simplified navigation, intuitive workflows, and robust account management enabled easy site and user administration.
Location setup was transformed with user-informed enhancements. The clean, modern aesthetic reflected Resideo's brand.
Measurable success metrics like the app rating rising from 1.6 to 4.6 stars validated the user-centered design process. I'm proud to have created a solid foundation primed for Total Connect's future growth and innovation.
Final App Design