BlueShirtMedia
BlueShirt Media offers AI-powered outreach solutions for treatment centers, helping them recover missed calls, re-engage cold leads, and follow up with alumni, without hiring more staff.
Web Design
Responsive Design
B2B
Live Product
My Contribution
UX Research
Wireframing
Prototyping
Mockups
User Interface Design
Project Overview
Full website redesign.
Client
BlueShirtMedia
My Role
Lead UX/UI Designer
BlueShirtMedia came to me with a clear goal: turn their message into a clean, mobile-friendly page that clearly shows what they do and gets people to book a demo.
The Problem
The original site had solid content and a working draft, but it lacked structure. Sections felt out of order, the fonts and visuals were inconsistent, and the mobile version was cramped and hard to use. There were no clear calls-to-action or responsive design patterns, and it was missing the finishing touches.
The Solution
Created a clear narrative flow using storytelling based structure.
Redesigned the layout to be fully mobile first and responsive, ensuring smooth usability.
Unified the visual language with consistent typography, colors, and spacing to reinforce brand identity
Streamlined the user journey by grouping related content and reducing visual clutter
The Goal
Transform their content into a well-organized, visually clean one-pager that made it easy for people to book a demo or get in touch. It needed to build trust with treatment center leaders, clearly explain what the product does, and look great on both desktop and mobile—while keeping the overall feel modern, trustworthy, and professional.
My Process
1
Content Audit and Structure
Reviewed all copy from the client's PDF guide
Recognized the site using a logical storytelling structure:
-
Hero/problem
-
Pain points
-
Features
-
Results
-
CTA/contact
2
Wireframes and Layout
-
Designed a mobile first, spacing-conscious layout
-
Structured sections to follow visual rhythm and allow breathing room
-
Created bold headers and consistent font styles to emphasize key info
3
Accessibility Considerations
-
High contrast between text and background
-
Large, tappable buttons for mobile users
-
Clear section headings and readable fonts
-
No reliance on color alone for meaning
4
Call To Action Logic
-
Embedded "Book a Demo" button that links to Calendly
-
No email or phone numbers displayed, aligning with client's privacy first directive
5
Visual Design
-
Used branded colors
-
Placed custom visuals alongside each section
-
Embedded videos of demos for clarity
Results and Key Takeaways
This project emphasized the power of UX clarity in a saturated B2B landscape. By decluttering the layout, focusing on benefits over features, and ensuring responsive design, I helped BlueShirtMedia turn a rough draft into a high converting business tool.
Want more?
View Another Case Study
JMS Behavioral Health
JMS Behavioral Health is a private therapy practice that offers compassionate mental health care to individuals and families. They provide personalized support for a range of conditions, including anxiety, depression, trauma, and relationship challenges.
Web Design
Responsive Design
B2C