Comcast Business: Business VoiceEdge Customer Portal

For each set of features, the team collectively conducted research through unmoderated user testing sessions and stakeholder interviews to better understand each audience’s unique needs. Using this research as a baseline, we set out to standardize UX and IA across the portal by conducting audits to find gaps or opportunities of improvement.

The design phase began with wireframes. Our UX designers built high-fidelity wireframes based on the business requirements and the research for each feature. Once presented and approved by our developers and system architects, each feature was passed to myself or the other visual designer. As visual designers on this CB team, our job was to clean up the flows, create components, make sure styles were connected to our Figma library, write documentation for developers, and create a final prototype that outlined all possible interactions.

As the only designer on the team with front-end development experience, I also spent time auditing the live web app for style inconsistencies, bugs, and WCAG compliance. I compiled all my findings and noted potential fixes for our developers to integrate into small stories to help balance out each sprint.

A large part of this project was evolving Comcast Business's design system for self-service products. Prior to joining the team, all product designs were built in Sketch and connected to Abstract for version control. A few weeks before I joined, each product team began migrating files to Figma. A sub-team made up of designers from various product teams assembled to build the foundational elements (colors, text styles, buttons, error modals, etc) that were shared across each app; meanwhile, each product team was responsible creating all new designs in Figma, cleaning up files from the migration, and creating their own product-specific library.

While my UX team members were working on wireframes or more in-depth research, I spent time cleaning up these migrated files and building out reusable components using Figma's auto-layout capabilities. By building variants with auto-layout, I was able to create variations that maintained all properties but could switch screen sizes, states, and content with a few clicks.

Although our team accomplished many goals in a short time, this project wasn't without its own challenges. Whether they were specific requests from company stakeholders that conflicted with user research or features we believed could have an impact that didn't get prioritized, our biggest challenge was alignment between all parties for some of our major feature work.