Website Redesign: Enhancing Accessibility

Role: Sole UX/UI Designer (Research & 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.

Enhancing Online Presence to Increase Signups

✅ Optimized 5 mobile‐friendly, webpage layouts, increasing website visits by 33% and newsletter signups within 2 weeks of launching

+ Besides receiving positive key stakeholder feedback and a LinkedIn recommendation

Served Mobile‐friendly

Issue: Incomplete details about Psystsem's Services

Solution: Streamline information access about 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.

Easy‐to‐find Signups

Issue: Unclear appointment signups due to the lack of content cohesiveness

Solution: Simplify the Webinar registration and newsletter signup steps 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

Issue: Scattered information across pages with outdated navigation menus

Solution: Added links to the App and updated Footer Menu links for quick and comfortable access to resources for all users.

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.

Why Redesign Now?

Psystem needed a website redesign to align with its new marketing campaigns and improve the user experiences for mobile users.

Problem Statement

How might we make information more accessible and mobile‐friendly so that they can easily find and sign up for Psystem's services without feeling overwhelmed by new details?

Root Cause Analysis

As the sole designer, constant communication and inquiry with Psystem's Project Manager were essential to understand and meet expectations.

I began by chatting with key stakeholders and users to understand the project's root cause and define the user and business needs.

What Users Care About

Through user interviews, I identified the following user pain points and expectations:

  • Users want Dedicated Pages: 2 of 5 participants expected more details for each service on a separate page to feel comfortable with different pieces of information all in one section.
  • Consistent Font Styles: All participants expected cohesive font styles for trust and readability of content.
  • Navigation Improvements: 3 of 5 participants rapidly tapped and searched for consistent menus, searching for easier navigation.
  • Scannable Content Organization: Users wanted improved readability for the content on desktop and mobile experiences.

I then audited Psystem's website and cross‐referenced competitors to check for alignment with UX principles and any overlooked areas to improve.

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.

How Might We Increase Content Accessibility

From my audit, I summarized the key focuses to brainstorm using How Might We statements, focusing on enhancing value and user excitement on each webpage.

  • Mobile‐friendliness: Streamline information access on the Services page.
  • Webinar Signups: Simplify Webinar registration.
  • Tablet Users: Provides comfortable access to resources for tablet users.

Advocating for accessibility, I proposed features aligning with WCAG, such as visible hover states in menus and easy‐to‐select buttons for all screen sizes.

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.

Feedback to Iterations

After prioritizing essential ideas, unexpected feedback insights emerged that further elevated design principle execution and company branding.

Using Negative Space Intentionally

Wanting more “breathing room” or padding was a key feedback that improved the Discovery page's Why Psystem section and increased user engagement with the content.

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.

Emphasizing Relevance by Visual Hierarchy

What do we want users to feel excited about?” guided the Webinar page iterations to generate more signups.

Prioritizing the most time‐relevant webinar session and allocating its largest space made it easier for users to notice and engage with the signup call‐to‐action button on the Webinar page.

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.

Style Tile: Why add a Tertiary Colour?

The new long‐form content blended too well into the cream background due to a lack of visual separation, leading to abandoned experiences during testing.

To add visual interest, I trialed with the brand's colours from the hills illustrations but found them too dark for Psystem's desired feelings of peace, calmness, and security.

Introducing the tertiary colour Ocean Bay provided a brighter hue that

  • aligned with the desired emotions,
  • enhanced content accessibility,
  • attracted user attention and engagement,
  • added visual interest and separation between sections, and
  • contributed to the overall colour harmony.
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 for Journey Completion

Using the Webflow Staging Domains and our in‐house testers, I evaluated:

  • Navigation efficiency with updated menus
  • Initial content impressions for understanding Psystem's Services
  • Accessibility to book coaching appointments and subscribe to newsletters

Adding the Back to Top button is a crucial solution to endless scrolling, enhancing mobile usability and user journey completion of the above tasks.

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.

Another round of testing revealed increased user satisfaction and engagement as our mobile testers did not feel as fatigued to navigate between pages.

Project Insights

In my journey from research to deployment, I learned a handful of lessons:

  • Adaptability to Constraints while still achieving significant improvements in user experience, accessibility, and engagement metrics.
  • Early Stakeholder Engagement fueled effective design and project management strategies and decisions to meet project goals and expectations on time.
  • Continuous Communication ensured clarity in expectations and resolved concerns on time, building strong team morale and creativity fulfillment.

Scaling the Approach

To scale the webpage conversions, I plan to:

  • Key Performance Indicators (KPIs) Analysis and Insights for actionable insights for future optimization and enhancements.
  • Update Other Webpages with user feedback for visual cohesion and support evolving user and business needs.
  • Optimize CSS Styles on Webflow to document better design handoff for future designers and content managers.

🥳 Ready to elevate your project? Let's connect on LinkedIn!

Back to top

Connect with me

Want to learn more about me?

Connect with me in the following ways: