Website Redesign: Enhancing Accessibility

Role: UX/UI Designer (Design & Implementation)

Timeline: 3 months

Company: Psystem offers health and wellness coaching for chronic pain and mental health management.

Opened laptop screen with Psystem's webinar page of introduction text, discover webinar button, and a woman staring at a computer.

Why Redesign Now?

Psystem needed a redesign for an upcoming marketing campaign to improve mobile user experiences and drive sign–up conversions.

Problem Statement

How might we make information more accessible and mobile–friendly so that users can easily find and sign up for Psystem's services without feeling overwhelmed?

Understanding User Needs

Through user interviews and stakeholder discussions, I identified four key areas for improvement:

  • Dedicated Pages: 2 of 5 users wanted separate pages for each service to simplify the content to remember from each page.
  • Consistent Font Styles: A consistent font style was essential to build trust and readability across Psystem's branding materials.
  • Improved Navigation: 3 of 5 users sought easier, more consistent menu navigation to save time and focus more on the content.
  • Scannable Content: Users wanted improved readability on desktop and mobile screens.

I then audited the existing website and compared it with competitors to identify accessibility gaps in design principles to communicate the sense of calm that Psystem aims to share.

Desktop and mobile screens of Psystem's previous Services page with labels of areas of improvement for the hero or top of the page

The Before appearance of the Services page on Desktop and Mobile screens with highlights for opportunity spaces.

Desktop and mobile screens of Psystem's previous Services page with labels of areas of improvement for the types of services section

The Before appearance of the typography and call‐to‐action buttons on the Services page in Desktop and Mobile screen views.

Increasing Content Accessibility

Using “How Might We” statements, I focused on enhancing value and user excitement on each web page.

  • Mobile‐friendliness: Streamlining Service page information.
  • Webinar Signups: Simplifying registration and access to event details.
  • Tablet Users: Enhancing access to resources on any screen size.

I proposed features aligning with WCAG standards, such as visible hover states in menus and easy–to–select buttons.

Three sketches of potential webpage layouts to outline Psystem's services, 3 steps to get started, and a final call-to-action section

Pen‐and‐paper wireframes during the ideation phase for the Services Subpages to explore the options in providing value to the users.

Integrating Iterative Feedback

From the initial iterations, stakeholder and internal testing feedback led to key improvements in Negative Space and Visual Hierarchy.

Using Negative Space Intentionally

Adding more “breathing room” or padding for better content engagement improved the Discovery page's “Why Psystem” section.

Two screenshots placed side-by-side to compare the changes in the webpage layout on Psystem's Discover page

The Before of the “Why Psystem” section in the Desktop view on the Discover page.

Final layout for the Why Psystem section on the Discover Page, making use of the negative space intentionally

The After of the “Why Psystem” section in the Desktop view on the Discover page.

Restrategizing Visual Hierarchy

Prioritizing the most time–relevant webinar session by allocating more space for it made it easier for users to notice and sign up for Webinar events.

One grey-scaled wireframe is placed next to a coloured mockup to compare the design iterations

First two iterations of the Upcoming Webinar Sessions section layout to brainstorm how to generate interest while informing users of upcoming events.

Mockup of the Upcoming Sessions section of the Webinar page, showcasing two button states

Final design of the Upcoming Webinar Sessions section with more contrast on the Call‐to‐Action button in Default and Hover states to register for the upcoming event.

Adding Tertiary Colour for Accessibility

Introducing the tertiary colour Ocean Bay added visual interest to improve content accessibility and engagement between sections while complementing the colour harmony and extending Psystem's “calm” tone.

Three variations of background colour changes next to a larger mockup of the chosen blue tertiary colour

Three significant trials with existing brand colours before finding the right blue hue to highlight important content while complementing Psystem's colour palette.

Refining Journey Completion

I used Webflow Staging Domains for testing navigation efficiency, content impressions, and ease of booking appointments

From testing feedback, I added a “Back to Top” button to address thumb fatigue from scrolling through content on mobile experiences.

Mobile screens of Psystem's website with and without a Back to Top button shortcut

The Before and After of the mobile screen size showcases the difference of having a Back to Top button to make the user's experience more enjoyable and accessible.

Responsive Designs to Increase Signups

✅ Optimized Psystem's five mobile‐friendly web pages, increasing visits by 33% and newsletter and webinar signups within 2 weeks of launch, with positive stakeholder feedback.

Streamlined Information

Unified Psystem's Services on one page.

Three mobile screens of Psystem's Services page, highlighting Psystem's various services with Back to Top and Book Discovery Call buttons at the bottom of each screen

Mobile screens showcasing the consistent, responsive interface while informing users of Psystem's services.

Clear Signups

Simplified Webinar registration and newsletter signup with clear call–to–action buttons.

A mobile screen of Psystem's Webinar page is placed on the left of a tablet screen of the Upcoming Webinar Sessions with the most recent event spanning across the screen

Mobile screenshot of Webinar page's hero section and tablet screenshot of Upcoming Webinar Sessions section to register for.

Accessible Shortcuts

Updated responsive navigation for quick resource access across the website.

A tablet screen of the PsyHealth App page's hero section is placed on the left of a mobile screen of global footer navigation

Tablet screenshot of the PsyHealth App page's hero section and mobile screenshot of global footer navigation.

Project Insights

From research to deployment, I learned more about myself:

  • Adaptability to Constraints: Achieved significant user experience improvements from productive collaborations.
  • Early Stakeholder Engagement: Fueled effective design decisions within the project timeline.
  • Continuous Communication: Ensured clear expectations and resolved concerns promptly for project success.

Scaling the Approach

To scale the web age conversions, I plan to:

  • Key Performance Indicators (KPIs) Analysis: for actionable insights for future optimization and enhancements.
  • Update Other Web pages: Incorporate current user feedback for visual cohesion and evolving user and business needs.
  • Optimize CSS Styles: Add best practices and personalized details to Psystem's website setup in design handoff for future web developers.
Back to top