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.
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.
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.
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.
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.
The Before appearance of the Services page on Desktop and Mobile screens with highlights for opportunity spaces.
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.
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.
The Before of the “Why Psystem” section in the Desktop view on the Discover page.
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.
First two iterations of the Upcoming Webinar Sessions section layout to brainstorm how to generate interest while informing users of upcoming events.
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 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.
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!