Rol
UI UX Designer
Type
B2B Growth Design, CRO & Web Design System
Year I Duration
2026 I 6 Months
SpectrumVoIP
Redesigning for Conversion & Scalable Webflow Architecture
SpectrumVoIP is a leading provider of business telecommunications, unified communications, and managed IT services. I worked as a UI Designer on the team to help execute a major web redesign aimed at converting prospective clients across four core service verticals: Business Phones, Fast Internet, Managed Services, and Business AI Cameras. My role spanned from early-stage ideation and visual style exploration to designing responsive desktop and mobile layouts, creating multi-column navigation and visual components, architecting a modular, Webflow-ready Section Library in Figma.
Projected Impact
+24%
Increase in Demo & Quote Request Conversions
-28%
Reduction in Mobile & Service Page Bounce Rate
50%
Faster Time-to-Market for Launching New Landing Pages
The Challenge
The legacy website suffered from an inconsistent layout structure and a fragmented visual language, making it difficult for prospective clients to evaluate SpectrumVoIP’s specialized offerings. Building new pages was slow and inefficient because the team lacked a standardized set of reusable design blocks. Every new landing page or industry vertical required assembling sections from scratch, leading to visual inconsistencies, responsive issues on mobile devices, and handoff friction between design, copywriting, and engineering teams.
Goals
Working within our team’s broader strategy, my execution targeted three primary goals:
1
Participate in the ideation phase to define and establish a cohesive, modern UI visual identity for the SpectrumVoIP brand.
2
Build a responsive, modular UI component system and Section Library in Figma mapped directly to Webflow’s layout framework.
3
Translate structured copy decks provided by the Copywriting team into clean, visually engaging desktop and mobile layouts across various CMS’s, Industries, Services and product pages.
Alignment & Buyer Journey Mapping
To ground our visual decisions in actual user needs, we began by mapping the B2B buyer journey centered on key decision-maker personas, such as Tim (General Manager). We analyzed user actions, goals, emotions, and pain points across five distinct journey steps: Awareness, Consideration, Purchase, Retention, and Advocacy.
This exercise highlighted a clear emotional trajectory—moving the user from feeling "Concerned" and "Analytical" when evaluating fragmented telecom providers to feeling "Optimistic," "Relieved," and "Confident" when discovering SpectrumVoIP’s unified solutions. This mapping defined our visual direction: the website needed to strike a balance between enterprise-grade trust, human approachability, and technical clarity.
Visual Exploration & Style Ideation
During the ideation phase, I created and presented multiple distinct UI concepts to explore different creative directions and help stakeholders land on the ideal brand aesthetic:
Concept 1 (Clean Minimalistic Tech): Focused on a sleek corporate aesthetic with light blue tones, rounded card containers, modern sans-serif typography, and hardware-centric imagery highlighting cameras, antennas, and VoIP phones.
Concept 2 (Human-Centered / Organic Shapes): Emphasized human collaboration and approachable service using soft organic folder/tab shapes to frame team photography, paired with elegant serif headlines (The Spectrum Difference) for high-impact brand storytelling.
Concept 3 (Wireframe Techy / Dark Contrast): A high-contrast, technical approach utilizing dark mode blocks for key feature sections, technical line illustrations, and dense information grids tailored for IT integrators.
By presenting these concepts, we successfully selected and blended the warm, approachable elements of the Human-Centered direction with the structured cleanliness of the Clean Tech style, establishing the final visual language for the entire platform.
Solution & System Architecture
To eliminate production bottlenecks and ensure consistency, I focused on creating a scalable UI architecture categorized by component types in Figma. Rather than designing static, isolated pages, I built reusable layout blocks organized into clear categories: Modules, Native UI (Navbars and Footers), Section Cards, Bento-boxes, Sliders, Videos, and Content Grids.
Each section was engineered with auto-layout and responsive constraints, allowing our team to quickly swap copywriting content and adapt designs for both desktop and mobile views. Additionally, I designed multi-column Mega Menus (Add-Ons, Industries, Resources) with direct call-to-action cards, helping prospective clients explore specialized solutions without losing context.
Full Section Library View With Status
Single Section View
Design Execution & Content Translation
Because the Copywriting team provided finalized copy decks for new landing pages, my daily workflow focused heavily on information hierarchy, visual balance, and component assembly.
I executed key landing pages and modular industry templates—such as Healthcare, Retail, and Automotive verticals—by taking structured copy and framing it with visual trust signals, clear typography scales, and consistent card layouts. For every desktop section, I designed its corresponding mobile view to ensure that cards, mega menus, and CTA sections collapsed gracefully for smaller screens, guaranteeing a smooth implementation for Webflow developers.
1 / 4
Next Steps
Our design for the main dispatch dashboard underwent significant iteration. The initial proposal was a simple list of days for each visit cycle, but it lacked visual clarity. Office administrators expressed a strong preference for a comprehensive overview of the entire cycle to spot potential overloads.
We pivoted to a full cycle board displaying all routes and visits; however, this initial layout presented too much dense information at once. In the final iteration, we refined the board to give admins a complete overview of all cycle visits as the primary screen of the platform, while adding a dedicated "Ver Sobrecargas" list view that isolates overleveraged days across Routes A, B, and C for quick, accessible decision-making.
The system's navigation architecture was split into two distinct experiences:
Desktop (Administration): Utilizes an expandable side navigation to prioritize screen real estate for complex data tables handling inventory, invoicing, and contracts.
Mobile First (Technicians): Offers immediate access to daily routes through two main views: Navigation and Visit Lists. Based directly on feedback from technicians, we also added a remaining-visit counter that serves as a progress bookmark, giving them a satisfying impression of advancement as they complete their route.