UX/UI Design · Mobile-First

Mobile-First Design

Redesigning Praxis Counseling website with a mobile-first approach to help clients easily connect and access resources on-the-go

Role UX/UI Designer & Developer
Timeline 6 weeks
Tools Figma, React, Tailwind CSS
Platform Mobile & Desktop
Mobile Prototype Mockup

The Challenge

The existing website wasn't optimized for mobile users, who made up 68% of traffic. Potential clients struggled to find contact information and understand services, leading to high bounce rates.

The Solution

Created a mobile-first redesign that prioritizes ease of access to key actions: contacting the therapist, viewing services, and finding mental health resources. Implemented a calming, accessible design that builds trust and reduces friction.

The Impact

Mobile bounce rate decreased by 42%, appointment bookings increased by 58%, and mobile session duration increased by 3.5 minutes. Client feedback praised the "easy to navigate" and "calming" mobile experience.

01 — Research

Understanding User Needs

I worked with Praxis Counseling to determine what the user needs and pain points might be, as I couldn't interview any of their clients for confidentiality reasons. While navigating the site together, and through analytics data, we developed a list of goals and pain points of prospective clients when seeking therapy.

Client, 32

Working Professional Seeking Therapy

Goals

  • Find a therapist who specializes in relationship issues
  • Contact to make an appointment quickly during lunch break
  • Understand costs and insurance before committing
  • Feel confident the therapist is qualified and trustworthy

Pain Points

  • Current website is hard to navigate on phone
  • Contact info is buried and hard to find
  • Overwhelming text with no clear hierarchy

Context

Potential Client is searching for a therapist during their work breaks, primarily on their phone. They need quick access to key information and are feeling stressed.

Key Insights

  • 68% of users accessed the site from mobile devices
  • Average mobile session was only 42 seconds
  • Most users left without finding contact information
  • Users wanted to see therapist credentials immediately
  • UI design wasn't engaging users

Design Goals

  • Make contact info accessible within 2 taps
  • Create a calming, trustworthy visual design
  • Clearly communicate specializations upfront
  • Ensure WCAG AA accessibility compliance
  • Optimize for one-handed mobile use
02 — Design

Mobile-First Approach

I designed for mobile first, ensuring the core experience worked beautifully on small screens before enhancing for larger displays.

Adriane Andersen Portrait, Free 15 Min. Consultation

Free Consultation

Background and Credentials Overview Screen

Background Overview

Crisis Resources Screen

Crisis Resources

Mobile-First Design Principles

Thumb-Friendly Navigation: Placed primary CTAs (About, Fees, Contact) at the top of the screen for one-handed operation.
Progressive Disclosure: Showed essential information first (specializations, contact) with detailed content accessible through automatic scrolling links to reduce scroll fatigue.
Calming Visual Design: Used soft greens and tans, with ample whitespace to create a peaceful, welcoming atmosphere that reduces anxiety for users seeking help.
Fast Loading: Optimized images and minimized JavaScript to ensure the site loads in under 2 seconds.
03 — Features

Key Features

Every feature was designed to reduce friction and help users take action quickly and confidently.

Clear Specializations

Prominent display of therapy specializations helps users immediately know if the therapist can help their specific needs

Transparent Pricing

Clear information about costs, insurance acceptance, and payment options upfront to reduce anxiety and uncertainty

Credentials Display

Professional qualifications and experience prominently featured to build trust and credibility

Accessibility First

WCAG AA compliant with screen reader support, high contrast mode, and keyboard navigation

FigJam file showing Praxis Counseling user flow

FigJam file showing Praxis Counseling user flow

04 — Implementation

Technical Approach

Built with modern web technologies for optimal performance and user experience across all devices.

Development Stack

Used Figma for component-based architecture and CSS for variables and responsive styling. This combination allowed for rapid development while maintaining consistent design.

  • Figma for interactive components and UI mockup
  • CSS3 for responsive, mobile-first styling
  • JavaScript for smooth, calming animations
  • Google Analytics for key user metrics

Performance Optimization

Achieved excellent performance scores through careful optimization of assets and code splitting for faster initial load times.

  • 95+ Google PageSpeed score on mobile
  • Lazy loading for images below the fold
  • WebP image format for lean file sizes
  • Minimal JavaScript bundle size (< 50KB)

Accessibility Features

Screen Reader Support: Semantic HTML and ARIA labels ensure all content is accessible to users with visual impairments.
Keyboard Navigation: Full keyboard support with visible focus indicators for users who can't use a mouse or touchscreen.
Color Contrast: All text meets WCAG AA standards with 4.5:1 contrast ratio minimum, ensuring readability for users with low vision.
Touch Targets: All interactive elements are at least 44x44px to accommodate users with motor impairments and ensure easy tapping.
Responsive screen sizes mockup in Figma

Responsive screen sizes mockup in Figma

Results & Impact

The mobile-first redesign dramatically improved user engagement and conversion rates, making it easier for people to get the help they need.

42%
Lower Bounce Rate
58%
More Bookings
3.5min
Longer Sessions
95+
PageSpeed Score
05 — Reflection

Key Learnings

This project reinforced the importance of designing for real user needs and contexts, not just aesthetic preferences.

What I Learned

Mobile-first is essential: Designing for mobile constraints first resulted in a cleaner, more focused experience that also worked beautifully on desktop.
Context matters: Understanding that users were often stressed and searching during work breaks helped inform design decisions around quick access and calming aesthetics.
Trust is critical: For therapy websites, building trust through clear credentials, professional design, and easy communication is just as important as functionality.
Measure what matters: Following up with Praxis Counseling after the improvements went live provided clear evidence of success beyond just traffic metrics.
Accessibility benefits everyone: Features designed for accessibility (like large touch targets and clear contrast) improved the experience for all users.
User Testing

User testing sessions with coworkers and friends helped validate design decisions and identify areas for improvement

06 — Next Steps

Future Enhancements

Based on initial success and user feedback, there are several opportunities to further improve the experience.

Live Chat Support

Add real-time chat for immediate questions and concerns, reducing friction in the decision-making process

Client Portal App

Develop a dedicated mobile app for existing clients to manage appointments, complete intake forms, and access resources

Resource Library

Build a searchable library of mental health articles, worksheets, and self-help tools for clients between sessions

Appointment Reminders

Implement automated SMS and email reminders to reduce no-shows and help clients stay on track

← Back to All Projects View Next Project →