Accessory Hub
All Your Devices. One Hub.
UX/UI, Motion, Branding
2023 - 2024
Available for download @Cisco
About the Project
The pandemic shifted work toward remote and hybrid environments. To support this, I designed a tool that makes managing audio and video settings across Cisco accessories simple and seamless.
Despite offering over 20 headsets and cameras, Cisco didn’t have a dedicated app for device management. This app fills that gap, providing step-by-step guides to help users optimize settings and better understand their devices’ features.
My Role
UX Design Lead
Interaction Design
UI/UX Design
Motion
Prototyping
Branding
Design system
Team
Me - UX design lead(1)
UX designer(1)
Design Manager(1)
UX researcher(1)
Product manager(1)
Industrial designer(1)
SW engineer(3)
HW engineer(3)
Designed for all
Cisco accessory users
Not just for Webex users – Cisco accessories for everyone
Problems
Complex device management.
Limited device insights.
Complicated firmware updates.
Opportunities
Stronger first impressions.
Effortless device management.
Enhancing Cisco’s brand.
Research & Key Findings
I collaborated with the team to conduct in-depth competitive analysis and market research, identifying key focus areas for both the desktop and mobile app.
Focus areas
Device connection status
Seamless firmware updates
Standalone app
All accessory product support
Mobile & desktop app store release
First-time experience tutorials
Users
During the pandemic in 2022, many people began setting up home offices, leading to a significant increase in demand for devices, particularly headsets and cameras.
Our users are who works at home, office, and hybrid. They are expecting high-quality call and meeting experiences.
Design
Design
I considered both single-panel and dual-panel layouts. While I initially preferred the single-panel design for its clean look and extra space—leading to the demo showcasing tutorials in a single column—the dual-panel layout ultimately offers better scalability for the final product. It’s especially useful when displaying additional products and managing device settings.
Dividing the content into two panels improves usability: the right panel displays visual information, while the left panel contains descriptions and controls. This approach makes it easier to swap out the right panel as we introduce new products, while keeping consistent functionality on the left.
Breakdown
I evaluated the key elements on the panel to prioritize delivering essential information to the end user and implemented a two-column layout for improved organization and clarity.
Showcasing a consistent product portfolio with key information
Design
To craft a signature experience, I gathered feedback from the internal user group and identified key information to prioritize, such as battery life, connection status, and firmware details. Supporting both administrators and end-users required multi-device management. Displaying multiple devices on a single screen offers a more efficient way to monitor device status, helping users quickly understand all relevant details at a glance.
Breakdown
In order to display connected device list, I've came up with a card design approach
3. Dynamic 3D Interactions
Responsive hover state animations
Design
Animation tutorials were well-received, inspiring me to take a dynamic content approach. Taking ownership of this section, I focused on creating standout material by replacing static images with animations. Additionally, I implemented seamless, sequential transitions between hover states to elevate the overall user experience.
Dynamic contents
Integrating dynamic content and micro-interactions wasn’t initially a high priority compared to supporting device settings, due to limited resources and the engineering team’s intense schedule. Introducing such high-quality content and convincing the team to invest the extra effort was challenging.
Although it was deprioritized in favor of other tasks, I collaborated with user researcher to gather feedback and continued advocating for the idea to engineering stakeholders. Ultimately, I successfully pushed the initiative forward, incorporating dynamic hover state motion into the app to elevate its overall premium experience.
Collaboration
I worked closely with the industrial design team, gathering 3D files, meticulously reviewing every detail, and applying precise materials and textures.
I also set up studio lighting and handled animation work in Cinema 4D to ensure consistent speed and high-quality renders. To maintain premium product quality, I collaborated with the software team to confirm feasibility and proper implementation.
I successfully delivered the ideal assets and completed the implementation with the team.
All Rights Reserved