From Twitter to Bluesky

Analyzing Twitter's strategy

Redesigned Bluesky Social to tap into users' emotions, in order to boost engagement.

Project Type
Personal Project
Category
Business Strategy / Redesign
Role
Business Development / UXUI Designer
Year
2025

Context

Since many Twitter users are looking for a substitute of the platform, Bluesky is rapidly growing.
However, Bluesky lacks personality---which might prevent more conversions from Twitter users.

What if Bluesky has more vibrant vibe, keeping the credible and calm image?
It could contribute retaining users.

Twitter

Since many Twitter users are looking for a substitute of the platform, Bluesky is rapidly growing.
However, Bluesky lacks personality---which might prevent more conversions from Twitter users.

What if Bluesky has more vibrant vibe, keeping the credible and calm image?
It could contribute retaining users.

Strategy

“More emotions are better than less”

John Maeda

  1. The brand color stands out and gives pleasant feeling, however, it is dull somehow.

    Add some other colors in minor parts and add some elements that users would find pleasant to use.

// Redirect to the main page on button click
 document.getElementById("lets-go-button").addEventListener("click", () => {
    window.location.href = "main.html"; 
});

  1. Fetch specific types of art pieces from The Art Institute of Chicago's API dataset using async function

// Fetch artworks of a specific type with images
async function fetchArtworksWithImages(type, limit = 10) {
    const artworks = [];
    let page = 1;

    while (artworks.length < limit) {
        try {
            const response = await fetch(
                `https://api.artic.edu/api/v1/artworks/search?q="${type}"&fields=id,title,image_id,artist_title,artwork_type_title&limit=${limit}&page=${page}`
            );
            const data = await response.json();

            const artworksWithImages = (data.data || []).filter(
                (artwork) => artwork.image_id && artwork.image_id.trim() !== ""
            );
            artworks.push(...artworksWithImages);

            if (data.pagination.total_pages <= page) break;

            page++;
        } catch (error) {
            console.error(`Error fetching artworks for type: ${type}`, error);
            break;
        }
    }

    return artworks.slice(0, limit); 
}

  1. Add buttons that filter art pieces by media.

// Add event listeners to filter buttons
function setupFilterButtons() {
    const buttons = document.querySelectorAll(".gallery-buttons button");
 buttons.forEach((button) => {
        button.addEventListener("click", () => {
            buttons.forEach((btn) => {
                btn.classList.remove("active");
         });
            button.classList.add("active");

            const type = button.textContent.trim();
            filterArtworks(type);
        });
    });
}

  1. Add hover effects on the art piece images using GSAP. 

// Add GSAP Glow Effect to Cards
function addGlowEffect(card) {
    card.addEventListener("mouseenter", () => {
        gsap.to(card, {
            scale: 1.3,
            zIndex: 10,
            boxShadow: "0 0 15px 5px rgba(218, 159, 147, 0.4), 0 0 30px 10px rgba(218, 159, 147, 0.4)",
            duration: 0.3,
            ease: "power1.out",
        });
    });

    card.addEventListener("mouseleave", () => {
        gsap.to(card, {
            scale: 1,
            xIndex: 1,
            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", 
            duration: 0.3,
            ease: "power1.in",
        });
    });
}

Check out the website here. Or explore from below embeded images.