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. Time on Task testing improved success and satisfaction rates.


As the Director of Design, I led the creation of a user-centric, visually engaging website for our company’s flagship product, developing both the branding and design elements.

Goal: improve engagement, simplify navigation, and align with brand.

Outcome: As a result, conversions rose 18%, abandonment dropped to 38% within the following 6 months, and new sign-ups increased by 2% within the following 3 months of deployment.

The Problem

Hostwinds’ customer facing site had no access to view products above the fold effeciently.

UX and visual design did not inspire trust. Low conversion rates for all products not in the hero area.

Dropoffs due to confusing purchase patterns mixing with account setup.

Setting a vision

Provide access to all products on landing.

Update design language to inspire whimsy, trust, and engage users visually.

Remove payment from account creation flow. Allow customers to set up an account and next continue to set up.


Research


Methods:
  • Email surveys sent to active customers to capture pain points at scale.
  • Analytics review of user traffic, dropoffs, etc.
  • 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.
  • Non-hero product setup were the top drivers of support tickets as related to the site.
  • Mobile demand — 12%+ of sessions were mobile, and workflows weren’t optimized.

Challenges & Solutions


User Diversity: The site needed to cater to a wide demographic, from tech-savvy users to first-time visitors. While mainly United States based, roughly 20% of users were based in China, and 10% Non-United States based.

Brand Consistency: We developed a cohesive brand identity that could adapt digitally, introducing fresh elements to ensure the site felt modern.

Scalability: The design needed flexibility to support future growth and additional product offerings.

Old site asked for payment upfront, causing drop-offs.

Site construction was not optimized for mobile and required complete redesign.

Process & Strategy


Research and Insights: My team conducted user research, including surveys, interviews, and usability testing, to understand customer needs and pain points. These insights helped us define the primary personas and user journeys.

New funnel: account first → explore products → add payment, reducing hesitation and boosting conversions.

Wireframing and Prototyping: We developed wireframes and prototypes, balancing layout clarity and aesthetic appeal. High-fidelity prototypes included interactions and animations for stakeholder previews and usability tests.

Visual Design and Brand Integration: We created the branding and design system, establishing a distinctive look with cryptid and mythological motifs to set the platform apart. This system, based on atomic design principles, included reusable components to ensure consistency and scalability.

Collaboration with Development: We maintained close communication with the development team through agile workflows. Having the developers at the table allowed for smooth handoffs, quick adjustments, and precise component implementation.

Results & Takeaways


Results:
he old site asked for payment information at account open, causing high abandonment and missed conversions. We restructured the funnel into three steps—account first, product exploration, payment support—reducing hesitation and making the process feel safer.

As a result, conversions rose 18%, abandonment dropped to 38% within the following 6 months, and new sign-ups increased by 2% within the following 3 months of deployment.

Takeaways:
This project underscored the value of structured research, cross-functional collaboration, and the strategic use of tools like Figma. By focusing on user needs, incorporating unique visual elements, and creating a cohesive brand identity, we delivered a website that met immediate goals and provided a flexible foundation for future growth.

In creating a visual language and atomic-based design system, I encouraged accessibility driven designs by defining the style guide contrast colors, typography size, and accessibility notation.