Website Redesign: Enhancing Accessibility
Role: Sole UX/UI Designer
Timeline: 3 months
Company: Psystem offers health and wellness coaching for chronic pain and mental health management.
Responsive Designs to Increase Signups
✅ Optimized 5 mobile‐friendly webpages, increasing website visits by 33% and signups within 2 weeks of launching
+ Positive stakeholder feedback & a LinkedIn recommendation!
Served Mobile‐friendly
Issue: Incomplete or scattered details about Psystem'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 Webinar registration and newsletter signup with clear call‐to‐actions.
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 redesign for its upcoming marketing campaign while improving the experience 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:
- Dedicated Pages:
2 of 5 participants expected to learn more about each service on separate pages instead of everything on one page. - 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.
The first task on the list was iterating to maximize the negative space without sacrificing visual balance.
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 content blended in with the cream background due to a lack of visual separation, leading to missed opportunities for engagement during testing.
I trialed with the brand's current colours but found them too dark for Psystem's desired feelings of peace and calm.
Introducing the tertiary colour Ocean Bay provided a brighter hue to add visual interest:
- 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.
Style Tile to bring everything together.
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.
Another round of testing revealed increased user satisfaction and engagement as our mobile testers did not feel as fatigued to navigate between pages.
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.
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.
Three significant trials with existing brand colours before finding the right blue hue to highlight important content while complementing Psystem's colour palette.
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.