Jonelle Boyd Jonelle Boyd
  • Home
    • Main Demo
    • Technician
    • Marketer
    • Consulting
    • Instructor Fitness
    • Web Developer
    • Designer
    • Freelancer
    • Photographer
    • Senior UX Designer
    • Senior UX Designer Light
    • Doctor
    • Doctor Light
    • Lawyer
    • Lawyer Light
  • About
  • Services
  • Portfolio
  • Pricing
  • Shop
    • Shop
    • Single Products
      • Simple product
      • Grouped product
      • Affiliate product
      • Downloadable
      • Variable product
    • My account
    • Checkout
    • Cart
  • Blog
  • Contact
Jonelle Boyd

Jonelle Boyd, Product Designer (UX/UI)

  • Home
    • Main Demo
    • Technician
    • Marketer
    • Consulting
    • Instructor Fitness
    • Web Developer
    • Designer
    • Freelancer
    • Photographer
    • Senior UX Designer
    • Senior UX Designer Light
    • Doctor
    • Doctor Light
    • Lawyer
    • Lawyer Light
  • About
  • Services
  • Portfolio
  • Pricing
  • Shop
    • Shop
    • Single Products
      • Simple product
      • Grouped product
      • Affiliate product
      • Downloadable
      • Variable product
    • My account
    • Checkout
    • Cart
  • Blog
  • Contact
Find me

Archives: Projects

  • Home
  • Projects
Video
238

AI Chat Interface

AI Chat Interface

Designing a Conversational AI Experience for Cloud Infrastructure

LIKE THIS 238
Company

Pulumi

Role

Sr. UX/UI Designer

Tools

Figma

 

1. Overview

AI is transforming how users interact with technology—and cloud infrastructure is no exception. In 2023, Pulumi launched Pulumi AI, a generative AI tool designed to help developers solve complex cloud problems using Infrastructure-as-Code. Building on that success, Pulumi introduced Pulumi Copilot, a conversational chat interface integrated into Pulumi Cloud. Copilot empowers users to manage infrastructure, troubleshoot issues, and gain insights using natural language—making cloud workflows faster and more accessible.

My UX Goals:

  • Design a visually clean, intuitive interface for AI interactions
  • Maintain consistency with Pulumi Cloud’s existing UI design system
  • Ensure a seamless, fast user experience while interacting with AI features
  • Create distinct UI components that would cater specifically to a conversational interface
  • Enhance usability without disrupting the active dev cycle

2. Pain Points & Opportunities

While Copilot’s core functionality was established, several pain points presented opportunities for design refinement:

  • Visual appeal: The UI needed a more polished and cohesive look to match the overall Pulumi Cloud aesthetic.
  • Emerging UI paradigm: Conversational UIs were still new, and there were no established patterns within Pulumi’s design system to guide the project.
  • Identity: Copilot needed to establish its own identity while staying aligned with Pulumi Cloud’s established design language.
  • Technical constraints: Changes had to work within the limitations of an active development cycle, ensuring feasibility and alignment with release schedules.

These challenges allowed for a fresh design approach that balanced visual enhancement with functionality.

3. Inspiration

I drew inspiration from both developer-focused and consumer-facing chat UIs, such as Slack and ChatGPT, which provided insights into creating a seamless conversational flow. Additionally, I kept Pulumi’s brand palette and clean design language in mind to ensure Copilot felt like an integrated part of the platform.

Copilot – Dark Theme

Pulumi Copilot - Dark UI components and guidelines

Pulumi Copilot - Dark within Pulumi Cloud interface

 

Copilot – Light Theme

(with noted updates and changes from the alternate Dark Theme)

Pulumi Copilot - Light UI components and guidelines

Pulumi Copilot - Light within the Pulumi Cloud interface

Copilot Logo Options

After much deliberation, AI Sparkle – Version 2 was chosen as the best representation for the branding. 

Pulumi Copilot logo options

4. Broader Context

Pulumi Copilot is part of a broader effort to simplify cloud infrastructure management through AI-powered conversational interfaces. This project aims to provide developers with faster, more efficient workflows, allowing for easy access to cloud insights and management through natural language interactions. Copilot is just the beginning of Pulumi’s journey into AI-driven cloud solutions.

Key Results & Metrics

  • 30% increase in Copilot usage within the first 4 weeks of launch, indicating strong initial adoption.

  • 25% reduction in time-to-resolution for common infrastructure issues, based on user interactions logged through Copilot.

  • Zero critical usability issues reported during QA testing after implementation of the new UI components.

  • 15% boost in daily active users interacting with Pulumi Cloud’s AI features.

 

UX Principle Used: Fitt’s Law

Fitts’s Law states that the time required to move to a target is a function of the distance to and size of the target. This principle helped guide the design by ensuring key elements, like the input field and prompts, were large and easily accessible, reducing interaction time and making the interface more intuitive and responsive.

portfolio-12
External Link
284

Portrait of pretty blonde model sitting on table.

portfolio-12

Portrait of pretty blonde model sitting on table.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 284
VIEW PROJECT

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them.

Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

portfolio-11
Image
293

Beautiful african female feeling grateful.

portfolio-11

Beautiful african female feeling grateful.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 293
VIEW PROJECT
Strategy

A strategy is a general plan to achieve one or more long-term.

  • The Design Approach
  • Project Challenge
  • The Solution
Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

  1. Project Challenge
  2. The Design Approach
  3. The Solution
Client

ThemeForest

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commod viverra maecenas accumsan lacus vel facilisis. ut labore et dolore magna aliqua.

There are always some stocks, which illusively scale lofty heights in a given time period. However, the good show doesn’t last for these overblown toxic stocks as their current price is not justified by their fundamental strength.

Toxic companies are usually characterized by huge debt loads and are vulnerable to external shocks. Accurately identifying such bloated stocks and getting rid of them at the right time can protect your portfolio.

Overpricing of these toxic stocks can be attributed to either an irrational enthusiasm surrounding them or some serious fundamental drawbacks. If you own such bubble stocks for an inordinate period of time, you are bound to see a massive erosion of wealth.

portfolio-06
portfolio-05
portfolio-04

However, if you can precisely spot such toxic stocks, you may gain by resorting to an investing strategy called short selling. This strategy allows one to sell a stock first and then buy it when the price falls.

While short selling excels in bear markets, it typically loses money in bull markets.

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them. Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

portfolio-10
Standard
353

Fashion is part of the daily life photography.

portfolio-10

Fashion is part of the daily life photography.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 353
VIEW PROJECT
Strategy

A strategy is a general plan to achieve one or more long-term.

  • The Design Approach
  • Project Challenge
  • The Solution
Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

  1. Project Challenge
  2. The Design Approach
  3. The Solution
Client

ThemeForest

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commod viverra maecenas accumsan lacus vel facilisis. ut labore et dolore magna aliqua.

There are always some stocks, which illusively scale lofty heights in a given time period. However, the good show doesn’t last for these overblown toxic stocks as their current price is not justified by their fundamental strength.

Toxic companies are usually characterized by huge debt loads and are vulnerable to external shocks. Accurately identifying such bloated stocks and getting rid of them at the right time can protect your portfolio.

Overpricing of these toxic stocks can be attributed to either an irrational enthusiasm surrounding them or some serious fundamental drawbacks. If you own such bubble stocks for an inordinate period of time, you are bound to see a massive erosion of wealth.

portfolio-06
portfolio-05
portfolio-04

However, if you can precisely spot such toxic stocks, you may gain by resorting to an investing strategy called short selling. This strategy allows one to sell a stock first and then buy it when the price falls.

While short selling excels in bear markets, it typically loses money in bull markets.

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them. Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

portfolio-14
Image
275

Jessie Andrews is hard to define.

portfolio-14

Jessie Andrews is hard to define.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 275
VIEW PROJECT
Strategy

A strategy is a general plan to achieve one or more long-term.

  • The Design Approach
  • Project Challenge
  • The Solution
Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

  1. Project Challenge
  2. The Design Approach
  3. The Solution
Client

ThemeForest

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commod viverra maecenas accumsan lacus vel facilisis. ut labore et dolore magna aliqua.

There are always some stocks, which illusively scale lofty heights in a given time period. However, the good show doesn’t last for these overblown toxic stocks as their current price is not justified by their fundamental strength.

Toxic companies are usually characterized by huge debt loads and are vulnerable to external shocks. Accurately identifying such bloated stocks and getting rid of them at the right time can protect your portfolio.

Overpricing of these toxic stocks can be attributed to either an irrational enthusiasm surrounding them or some serious fundamental drawbacks. If you own such bubble stocks for an inordinate period of time, you are bound to see a massive erosion of wealth.

portfolio-06
portfolio-05
portfolio-04

However, if you can precisely spot such toxic stocks, you may gain by resorting to an investing strategy called short selling. This strategy allows one to sell a stock first and then buy it when the price falls.

While short selling excels in bear markets, it typically loses money in bull markets.

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them. Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

Please enter the password to
view the content.

You want password? Request Password

Demo password is: 54321
Standard
**

Restaurant Mobile App Figma Design.

Gallery
647

UI Library

UI Library

Pulumi’s first UI library, built to bring consistency, scalability, and efficiency to the design and development of the Pulumi Cloud Console.

LIKE THIS 647
VIEW PROJECT
Company

Pulumi

Role

Sr. UX/UI Designer

Tools

Figma, Hihayk.github.io, Icomoon

 

1. Overview

The Pulumi UX team lacked a formal UI library, which led to inconsistencies across the product and inefficiencies in both design and development. As Pulumi Cloud and the team grew, the need for a unified visual language became clear. A small team consisting of three senior UX/UI designers and a front-end developer came together to create Pulumi’s first UI library. The focus was on building reusable components and establishing foundational styles to support a more consistent and scalable user experience.

2. Pain Points & Opportunities

Before the UI library existed, our design and development workflows were fragmented. Designers frequently recreated components from scratch or worked from outdated files, while developers implemented UI without clear guidance or consistency. This led to duplicated work, visual drift, accessibility issues, and a fragmented user experience. We saw an opportunity not only to fix inconsistencies but to build a system that would support scalability and streamline collaboration across teams.

3. Inspiration

We drew inspiration from established systems like Google Material, Flowbite (a.k.a – Tailwind Figma), and Helios libraries. These systems demonstrated the value of a well-structured, documented, and extensible approach to UI. Their clarity and scalability helped shape our thinking around how to define tokens, components, and usage patterns in a way that would be both practical for our team and aligned with best practices.

Design Systems used for inspiration

4. Figma Library & Documentation

We built the UI library in Figma, where we created atomic components, established design tokens, and documented properties and use cases. I also contributed to writing guidelines that covered behavior, accessibility, and edge cases—ensuring our system was not only consistent but also inclusive and functional. Collaboration with our front-end developer was key: we regularly synced on implementation details, reviewed GitHub PRs, and maintained a feedback loop to keep the design and code in sync.

The design system is still a work in progress, with the long-term goal of building a public-facing website similar to Google Material’s—something that can serve as a shared resource internally and eventually externally. For now, documentation lives in a working Google Docs file titled UI Design System Guidelines, which serves as a living guide for how to create or update components within the Pulumi Cloud Console. This document is actively maintained and intended to evolve alongside the system until the full site is ready to launch.

Buttons

Grid System

Date Time Picker

Typography

Icons

Key Results & Metrics

  • 80% reduction in time spent designing repeat UI components, thanks to reusable assets in the Figma library.

  • 4× faster onboarding for new designers and developers, due to centralized documentation and clear component usage.

  • 100% adoption rate among Pulumi UX designers for the new Figma component set within the first quarter.

  • 20+ documented components and growing, each with usage guidelines, accessibility notes, and edge case considerations.

Methodology: Atomic Design

Creating design systems by breaking interfaces down into five hierarchical stages—atoms, molecules, organisms, templates, and pages—allowing for scalable, consistent, and modular UI development.

portfolio-large-04
Image
710

Workout Website Design And Development.

portfolio-large-04

Workout Website Design And Development.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 710
VIEW PROJECT
Strategy

A strategy is a general plan to achieve one or more long-term.

  • The Design Approach
  • Project Challenge
  • The Solution
Design

UI/UX Design, Art Direction, A design is a plan or specification for art.

  1. Project Challenge
  2. The Design Approach
  3. The Solution
Client

ThemeForest

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commod viverra maecenas accumsan lacus vel facilisis. ut labore et dolore magna aliqua.

portfolio-06
portfolio-05
portfolio-04

There are always some stocks, which illusively scale lofty heights in a given time period. However, the good show doesn’t last for these overblown toxic stocks as their current price is not justified by their fundamental strength.

Toxic companies are usually characterized by huge debt loads and are vulnerable to external shocks. Accurately identifying such bloated stocks and getting rid of them at the right time can protect your portfolio.

Overpricing of these toxic stocks can be attributed to either an irrational enthusiasm surrounding them or some serious fundamental drawbacks. If you own such bubble stocks for an inordinate period of time, you are bound to see a massive erosion of wealth.

However, if you can precisely spot such toxic stocks, you may gain by resorting to an investing strategy called short selling. This strategy allows one to sell a stock first and then buy it when the price falls.

While short selling excels in bear markets, it typically loses money in bull markets.

So, just like identifying stocks with growth potential, pinpointing toxic stocks and offloading them at the right time is crucial to guard one’s portfolio from big losses or make profits by short selling them. Heska Corporation HSKA, Tandem Diabetes Care, Inc. TNDM, Credit Suisse Group CS,Zalando SE ZLNDY and Las Vegas Sands LVS are a few such toxic stocks.Screening Criteria

Here is a winning strategy that will help you to identify overhyped toxic stocks:

portfolio-large-03

Most recent Debt/Equity Ratio greater than the median industry average: High debt/equity ratio implies high leverage. High leverage indicates a huge level of repayment that the company has to make in connection with the debt amount.

portfolio-large-03
External Link
545

Travel App Design Creativity & Application.

portfolio-large-03

Travel App Design Creativity & Application.

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 545
VIEW PROJECT

Most recent Debt/Equity Ratio greater than the median industry average: High debt/equity ratio implies high leverage. High leverage indicates a huge level of repayment that the company has to make in connection with the debt amount.

Gallery
1145

“About” Page Redesign

“About” Page Redesign

Redesigning the About Page to Tell a Stronger Brand Story

LIKE THIS 1145
VIEW PROJECT
Company

Pulumi

Role

Sr. UX/UI Designer

Tools

Figma

 

1. Overview

In Q4 2022, Pulumi set out to redesign its “About” page—transforming it from a static, generic section into a more authentic and engaging representation of the company’s mission, culture, and people. The goal was to better serve prospective customers, partners, and talent through clearer messaging and a more intentional user experience.

As the sole designer on the project, I worked closely with Product Marketing to clarify audience needs and page objectives. From there, I led the content strategy, information architecture, wireframing, and prototyping—shaping a layout that could scale with the company and effectively guide users through Pulumi’s story.

My UX Goals:

  • Make Pulumi’s brand story more discoverable and engaging
  • Humanize the company through visual storytelling and team representation
  • Create a scalable and responsive layout that works across devices
  • Improve navigation and information flow to support diverse user needs
  • Ensure accessibility and cross-browser compatibility throughout the experience

2. Pain Points & Opportunities

The original About page lacked essential storytelling. It didn’t communicate Pulumi’s mission, values, or history—and the visual presentation failed to reflect the personality of the company. Employee photos, once used to humanize the brand, had become unsustainable to maintain as the team scaled.

Additionally, the site had technical shortcomings:

  • Responsiveness issues across screen sizes
  • Inconsistent browser rendering
  • Poor UX hierarchy and navigability

These gaps presented a clear opportunity to rethink not just the content, but how it was structured and delivered to end users.

Lo-Fi Mockups

Lo-Fi Wireframes

 

View Hi-Fi Figma Prototype

Hi-Fi Mockup

3. Inspiration

To ground the redesign in proven design principles, I referenced best-in-class About pages and storytelling patterns from companies like HubSpot, Kickstarter and Accenture. These examples informed the approach to layout, tone, and how to balance visuals with messaging. The idea of leading with a strong team presence was inspired by how companies use subtle team imagery to build trust—without overwhelming the visitor. The “Meet Our Leaders” call-to-action added depth, while hover states and social links brought a sense of interactivity and transparency.

Inspirational "About" pages

4. Broader Context

This project was part of a larger effort to evolve Pulumi’s brand expression and unify its product and marketing experiences. The redesign supported recruiting, partnerships, and broader community awareness, creating a more consistent voice across channels. Technically, I collaborated with our front-end developer to ensure full responsiveness and cross-browser consistency—something that had been overlooked in the past. The updated About page now works seamlessly across devices and introduces a clean, modern visual language that reflects Pulumi’s growth and identity.

Key Results & Metrics

  • 2.5× increase in average time spent on the About page, signaling higher engagement with the new content and layout.

  • +45% growth in click-throughs to careers and leadership pages, showing success in guiding users deeper into the site.

  • 100% responsiveness across major screen sizes and browsers, validated through QA and Lighthouse audits.

  • 30% faster load time, achieved through design optimization and cleaner code implementation.

 

UX Principle Used: Hick’s Law

Fitts’s Law states that the time required to move to a target is a function of the distance to and size of the target. This principle helped guide the design by ensuring key elements, like the input field and prompts, were large and easily accessible, reducing interaction time and making the interface more intuitive and responsive.

Recent Posts

  • The Easiest Way to Become a Successful Writer and Authors.
  • The Quickest Way to Deliver Your Message? Make It Visual.
  • Why We Don’t Have Technical Interviews for Technical Roles at Buffer.
  • Why Successful People Wear The Same Thing Every Day.
  • What I Learned From Being a Broke, Unemployed Graduate.

Recent Comments

No comments to show.

Archives

  • September 2021
  • August 2021

Categories

  • Development
  • Gallery
  • Quote
  • Technician

Featured posts

pretty-curly-young-woman-writing-notes-startup-project
The Easiest Way to Become a Successful
  • September 7, 2021
  • 4 min read
road-sign-direction-perforated-paper-arrow
The Quickest Way to Deliver Your Message?
  • September 7, 2021
  • 4 min read
expressive-senior-woman-posing
Why We Don’t Have Technical Interviews for
  • August 15, 2021
  • 4 min read

Categories

  • Development
  • Gallery
  • Quote
  • Technician

Find Me

Tags

Art Fashion Happy Love Move Photography Travel

© 2025. All rights reserved.