Overview
Role: Design Director
Deliverable: Customer-centric service portal for a mid-level ISP provider.
Timeline: 6 Months
Result: Architecture and UI patterns created that scale to needs. ToT testing improved success and satisfaction rates.
At Hostwinds, I led the redesign of the Service Portal — the central hub where customers manage hosting plans, domains, billing, and support.
I directed a small design team and partnered closely with developers, product management, and executive stakeholders. Together, we modernized the experience, reduced support dependency, and aligned the portal with Hostwinds’ customer-first approach.
The Problem
The Hostwinds Service Portal drove high support calls and tickets because basic tasks were confusing, navigation was difficult, and no mobile-friendly version existed.
We would have to design an entirely new architecture, define, and consolidate workflows.
Originial Hostwinds Service Portal Landing
Setting a vision
The Service Portal was redesigned around a “3-clicks-to-workflow” principle, balancing depth for power users with clarity for beginners through a unified navigation system.
A scalable, atom-based design system was created in tandem with the architecture. Supporting rapid iterative work.
Testing and iterating with Adobe tools and custom-coded prototypes, ensured accessibility, responsive layouts, and long-term consistency within budget.
The vision for the Service Portal was to create a smart, adaptive platform where users only saw what was relevant to their service portfolio, freeing them from unnecessary complexity, while maintaining the flexibility to grow and evolve as new products and features were introduced.
Final Design
Research
Methods:
- Stakeholder interviews with support leads, larger support team, and the Product Manager.
- Email surveys sent to active customers to capture pain points at scale.
- Analytics review of top support cases.
- Heuristic evaluation of the Service Portal.
- User interviews and testing with Hostwinds service teams and executive approved communities.
- Competitor analysis. Full evaluation of Hostinger, BlueHost, Digital Ocean, GoDaddy, Hostgator.
- Heuristic evaluation of the Service Portal.
Findings:
- Navigation clutter led to task abandonment.
- Technical jargon confused less advanced users.
- DNS and email setup were the top drivers of support tickets.
- Mobile demand — 12%+ of sessions were mobile, and workflows weren’t optimized.
Email Template example.
Later modified for survey linkage.
Information architecture
The Service Portal lacked a clear structure, leaving users unsure where to begin and often requiring multiple, confusing steps to complete even basic workflows. Beginners struggled to navigate broad product categories, while power users couldn’t efficiently access advanced tools. Without a scalable IA, the system created friction, increased support tickets, and failed to adapt to Hostwinds’ growing catalogue of services.
Previous dashboard
The existing portal contained 3 separate menus (2 stacked dropdowns)! No presentation of account info, and hidden pathways to basic tasks.
Adding a new service meant selecting from two different menus, being redirected to the marketing website, then being redirected again to a purchase portal. Each step pushed redundant information on to the customer, increasing decision paralysis and viewer fatigue. Accessing information meant going to the top menu.
How do we solve this?
Categorization of menu items still provided a massive list of options.
Providing an “Add New Service” button and changing the scannable structure simplified the experience to the tasks available. Automating the menu allowed for much easier viewing. Selection and purchase tasks were already created using the Marketing site. These could be mirrored and used in-window. Success!
Account information usability
An example of the previous dashboard. So much space had no use and very little utility was available.
Testing provided us with several pieces of information for this area:
1. Users want to be able to do more and see more from this page.
2. They want to know what their next bill is going to be on their billing cycle, and when it will be coming due.
3. Users want to be able to manage their services from the landing in the portal.
4. They need to know when they get ticket updates.
Initial explorations
We started looking at editable areas in lieu of sending users down a rabbit hole of pages to change basic account information. As this continued, I worked with the development team to ensure feasibility of the promoted designs. It was essential to the project to know the capability of the developer LoE, and further possible capabilities were discovered.
Design & Development hurdles
Around this time the team was investigating component usage of the platform code. Our initial idea for implementation was to use to use focused modals to imitate middle states and provide in-page editing. This would allow for account edits and shortcuts to be easily closed if needed and not send the user to a different page.
Ultimately this functionality was going to present too many variables in the future to be considered a scalable pattern. As I continued conversations with our developers, updating styling, style guides, and UI, we were able to find a much more stable solution within the platform code.
Final design – Home
Editing your profile, notifications, and shortcuts were moved to the left and given a left-to-right priority. My Services display populated immediately underneath. Adding links to directly manage each service from this area reduced the amount of menu hopping. This allowed for a much easier solution when moving to a mobile platform as less media queries would need to be involved on flex box structures. The Account Info component on the right provided editable at-a-glance information.
Final design – Add new services
Clicking the Add new service button from the left menu or clicking the shortcut link opens all Packages and Services Hostwinds has available, in-window. Searching and filtering can send users straight to any end result package or service.
Final design – Selecting services
Selecting one service category presents all the available options below. Using cards allowed for stacking in cases where a large amount of options may be presented. Deselecting the initial category would present the previous state. In this way users could add as many services to the cart as they needed.
Final design – Quick peeks
Users could click on the success snackbar to present a cart preview. Editable tables presented options available to edit ahead of the main cart review experience. This allowed power users to stack and modify servers, hosting, and tailored services before reaching the purchase stages.
Responsive tables
One of the biggest UX challenges in the Hostwinds Service Portal redesign was creating editable, responsive tables for tasks like DNS management, invoices, and email accounts. The legacy portal relied on static, scroll-heavy rows that were nearly unusable on mobile, forcing many customers to submit support tickets for simple changes.
*Early iterations showing “tray” overlays for selected tables. Ultimately these designs proved too cumbersome with the Floating Action Button as CTA placed far too high for ease of use. Placement at the bottom of the screen also presented issues as it interfered with functionality *
*Additional explorations arrived at an unpolished component that confused dropdown interactions with expanding table rows.*
Solution
Collapsed
My solve was a hybrid responsive model where critical fields remained visible while secondary fields collapsed into expandable drawers on smaller screens.
Expanded
Tables supported inline editing with real-time validation, allowing users to make quick updates without reloading pages. For accessibility, we ensured WCAG 2.1 compliance, added sticky headers for clarity, and retained actions for manipulating large datasets.
Reflections
Managing the Service Portal redesign reinforced the importance of cross-functional leadership. With consistent stakeholder alignment, I focused on guiding the design team while working closely with developers to deliver a high-quality, technically feasible solution.
The 3-clicks-to-workflow principle became the backbone of the project, proving effective in serving both technical customers and hosting newcomers. It demonstrated how thoughtful information architecture can reduce support dependency while improving upsell opportunities.
This project showed me that scalable design is like architecture—you build for today, but the structure has to stand tomorrow.
