Ruby Wu

Ruby is an end-to-end product designer based in New York 🍎
She crafts & ships B2C/B2B/AI products & brands for startups, agencies, & techs ☻

Work

Play

Resume

Writing

About

RUBY WU ©
2020—2026.

LooperRoom Site

A scalable identity system & site

A scalable identity system & site

I redesigned LooperRoom’s website to enhance usability, improve brand positioning, and better communicate our AI-powered mental health solutions. By optimizing the site’s structure, visuals, and content, I created a more engaging experience for users, clinicians, and organizations, driving clearer messaging and stronger user engagement.

Client

LooperRoom

Year

2025

Team

Ruby Wu / Product Designer

Wayne Sparks / Marketing

Julie Shumaker / Director of Business Operations

See it live

OVERVIEW

OVERVIEW

We aimed to improve the SEO and brand image by redesigning our LooperRoom website.

LooperRoom’s original website struggled with unclear navigation, low visibility, and outdated visuals, making it difficult for users to connect with our mission and product. This case study showcases how I identified key challenges, conducted research, and delivered a redesigned website that improves usability, aligns with industry standards, and enhances SEO.

LooperRoom’s original website struggled with unclear navigation, low visibility, and outdated visuals, making it difficult for users to connect with our mission and product. This case study showcases how I identified key challenges, conducted research, and delivered a redesigned website that improves usability, aligns with industry standards, and enhances SEO.

LooperRoom’s original website struggled with unclear navigation, low visibility, and outdated visuals, making it difficult for users to connect with our mission and product. This case study showcases how I identified key challenges, conducted research, and delivered a redesigned website that improves usability, aligns with industry standards, and enhances SEO.

LooperRoom’s original website struggled with unclear navigation, low visibility, and outdated visuals, making it difficult for users to connect with our mission and product. This case study showcases how I identified key challenges, conducted research, and delivered a redesigned website that improves usability, aligns with industry standards, and enhances SEO.

PROBLEM

PROBLEM

Where does our website fall short in meeting user and business needs?

I identified three critical problems:

I identified three critical problems:

I identified three critical problems:

I identified three critical problems:

People didn’t know about us

Users cannot find LooperRoom on Google due to poor SEO due to lack of sitemap.

Users cannot find LooperRoom on Google due to poor SEO due to lack of sitemap.

The message isn’t clear or impactful

The website lacks concise messaging and visuals that reflect an innovative AI company.

The website lacks concise messaging and visuals that reflect an innovative AI company.

People don’t understand what we offer

Visitors don’t clearly understand the app’s features and value.

Visitors don’t clearly understand the app’s features and value.

RESEARCH

RESEARCH

How can LooperRoom’s website better align with industry trends and user needs?

To inform the redesign, I explored user needs and industry best practices:

To inform the redesign, I explored user needs and industry best practices:

To inform the redesign, I explored user needs and industry best practices:

To inform the redesign, I explored user needs and industry best practices:

8+ Competitor Analysis

8+ Competitor Analysis

Reviewed AI companies and mental health startups to understand how they structure their websites, convey their message, and design for impact.

Reviewed AI companies and mental health startups to understand how they structure their websites, convey their message, and design for impact.

4+ Internal Feedback

4+ Internal Feedback

Conducted discussions with stakeholders to identify user pain points and goals.

Conducted discussions with stakeholders to identify user pain points and goals.

SEO and Trend Analysis

SEO and Trend Analysis

Researched effective IA, design trends, and SEO strategies to ensure improved discoverability and usability.

Researched effective IA, design trends, and SEO strategies to ensure improved discoverability and usability.

GOALS

GOALS

How might we build a modern brand that’s easy to find, visually engaging, and clear about what we offer?

Improve SEO to boost visibility

Optimize meta tags, alt text, and mobile responsiveness to make the site easier to find.

Optimize meta tags, alt text, and mobile responsiveness to make the site easier to find.

Craft clear and engaging messaging

Communicate our mission with concise language and visuals that reflect innovation.

Communicate our mission with concise language and visuals that reflect innovation.

Make our product easy to understand

Showcase what we build with clear visuals, step-by-step guides, and concise explanations.

Showcase what we build with clear visuals, step-by-step guides, and concise explanations.

IDEATION

IDEATION

How might we improve SEO and usability by reorganizing our website structure?

I redesigned the sitemap to group related pages logically, prioritize key sections like “LooperRoom App,” and ensure all pages are within three clicks. Adding a resource hub enhances SEO with long-tail keywords, while the new structure improves usability and aligns with LooperRoom’s goals.

I redesigned the sitemap to group related pages logically, prioritize key sections like “LooperRoom App,” and ensure all pages are within three clicks. Adding a resource hub enhances SEO with long-tail keywords, while the new structure improves usability and aligns with LooperRoom’s goals.

I redesigned the sitemap to group related pages logically, prioritize key sections like “LooperRoom App,” and ensure all pages are within three clicks. Adding a resource hub enhances SEO with long-tail keywords, while the new structure improves usability and aligns with LooperRoom’s goals.

I redesigned the sitemap to group related pages logically, prioritize key sections like “LooperRoom App,” and ensure all pages are within three clicks. Adding a resource hub enhances SEO with long-tail keywords, while the new structure improves usability and aligns with LooperRoom’s goals.

BRAND VISUAL GUIDELINES

BRAND VISUAL GUIDELINES

How might we express LooperRoom’s message through consistent and impactful visuals?

To reinforce LooperRoom’s mission and values, I developed a brand visual guideline that ensures consistency and impact across all touchpoints.

DESIGN DECISION 01

DESIGN DECISION 01

I added a clear hero section & CTA to make LooperRoom’s value instantly understandable.

Before: The homepage had a video but lacked a clear statement or call-to-action, making it hard for users to grasp the product’s purpose.
Now: I introduced a hero section with a strong statement, CTA, and a storytelling video featuring real user scenarios, ensuring visitors immediately understand what LooperRoom offers.

Before

Before

After

After

DESIGN DECISION 02

DESIGN DECISION 02

I shifted from a generic mission statement to showcasing real product impact.

Before: The site only displayed a mission statement without explaining how the app and services actually help users.
Now: Based on internal feedback, I redesigned the homepage to highlight LooperRoom’s core features and demonstrate how we support users, making the mission more actionable and product-driven.

Before

Before

After

After

DESIGN DECISION 03

DESIGN DECISION 03

I simplified the pricing page to help users compare plans easily.

Before: The pricing page had only one plan with overwhelming text, making it difficult to compare options.
Now: I created a clean, structured pricing section with three plans, allowing users to easily compare and toggle between monthly and yearly payment options, improving clarity and decision-making.

Before

Before

After

After

DESIGN DECISION 04

DESIGN DECISION 04

I improved blog readability by creating a consistent visual style.

Before: The blog lacked a uniform design, and the text was difficult to read.
Now: I refined the layout to align with LooperRoom’s design system, improve readability, and create a visually cohesive experience, making it easier for users to engage with content.

Before

Before

After

After

DESIGN DECISION 05

DESIGN DECISION 05

I redesigned the team section to better represent LooperRoom’s people and mission.

Before: The team section only had a ticker component that briefly displayed team members without much detail.
Now: I created a dedicated “About Us” page that includes our mission, a scrollable team member section, and a full team picture, giving users a better sense of the people behind LooperRoom.

Before

Before

After

After

DESIGN DECISION 06

DESIGN DECISION 06

I made the contact page more accessible by improving structure & visibility.

Before: Contact information was cluttered, lacked hierarchy, and had low color contrast, making it difficult to navigate.
Now: I redesigned the page with clear sections, improved contrast, and structured messaging, ensuring users can quickly find and access the right support.

Before

Before

After

After

KEY TAKEAWAY

KEY TAKEAWAY

Refining LooperRoom’s website improved SEO, brand clarity, and user experience, making it more discoverable, engaging, and aligned with its mission.

This redesign wasn’t just about visuals—it was about creating a structured, user-friendly, and impactful platform. By improving site architecture, messaging, and accessibility, I ensured that users, clinicians, and organizations could easily understand and engage with LooperRoom’s offerings, ultimately driving stronger brand trust and usability.

Logo