Portfolio Responsive Website

Project Summary

Challenge

The team was tasked with using the CMS component library to create engaging experiences like surveys and forms. However, the CMS’s limitations made it challenging to build these features in a way that would be intuitive and user-friendly.

Approach

Since we were working with a new CMS, I initiated training sessions to bring the team up to speed, ensuring they understood its capabilities and limitations. This preparation allowed us to design engaging user experiences within the system’s constraints.

Result

The project was recently launched, and there is currently no performance data available yet. The website is live.

My Role

As the Sr. UX Architect, I led the UX design, overseeing a Jr. UX Designer while collaborating with copywriters, product designers, and dev team.

Stakeholder insights uncovered

In the discovery phase, I conducted interviews with key stakeholders to gain a deep understanding of their goals and expectations for the responsive design project.

Key Findings & Considerations

Content strategy: The primary goal was to craft an engaging user experience that would encourage visitors to sign up for a care kit. This involved strategically designing content that resonated with the target audience, highlighting the benefits of the care kit, and making the sign-up process seamless and appealing.
CMS onboarding: During the CMS training, we discovered that the current component library had limitations in creating user-friendly forms. These constraints posed challenges in making the forms intuitive and easy to navigate, requiring us to find creative solutions within the system’s framework to achieve the desired user experience.
Accessibility: The CMS platform included an accessibility widget, which raised concerns due to its potential interference with assistive technologies.¹ Relying on this widget as a primary means of achieving accessibility was a questionable practice, prompting the need for a more comprehensive approach to ensure the website was genuinely accessible to all users.

¹ https://blog.usablenet.com/inclusive-accessibility-crushes-widgets-and-overlays

Mapping the website content

In the Define stage, I facilitated a co-op session with subject matter experts to collaboratively outline the content and define the website’s information architecture.

Sitemap

To align on information architecture of the website, I conducted a co-op session with the team to define the content strategy and key engagement points, such as forms and surveys.
During the co-op session, it became evident that we needed to implement a two-step form. The first form collects basic patient information and allows users to sign up for updates. The second form requests more detailed information in exchange for a care kit as an incentive.
I recommended using a progressive reveal approach for the second form, giving users control over the process and minimizing confusion. I further explored this approach during the wireframe development, ensuring a smooth and intuitive interaction flow.

Designed in Figma

Designing interactive experiences in CMS

Wireframes for both mobile and desktop were created to map out navigation and functionality, leveraging the CMS component library while working within its limitations to ensure a consistent design across all devices. The focus was on designing interactive experiences, such as the sign-up form and survey.

Wireframes: 2-Step Sign-Up Form

With a focus on user engagement, the wireframes include a detailed example of the two-step sign-up form, showcasing all states: blank, filled, error, success, and opt-out screens.

Sign-Up Flow. The user is prompted to provide basic information to sign up for updates. The required fields are enabled by default, guiding the user through the necessary steps to complete the sign-up process.
Get Care Kit Flow. After completing the sign-up form, the user is presented with a checkbox offering the option to receive a care kit by mail. If the user checks the box, additional fields become enabled to fill out.
Opt-Out Flow. Users can opt out of receiving updates at any time by clicking the link provided in the confirmation email. This ensures they have control over their subscription preferences.

Wireframes showing form flow, including blank, filled, error, and confirmation states

Designed in Figma

Wireframes: Patient Survey

Due to the limitations of the CMS platform, the survey experience was integrated into a chatbot modal, making it accessible from any page on the website. Wireframes were created for both mobile and desktop, displaying the functionality across different devices.

Question Flow: Users are asked to answer four questions, each with multiple-choice answers indicated by checkboxes. To proceed, users must select at least one answer, at which point the “Next” button becomes enabled. The wireframes display both default (unselected) and selected states to clearly guide users through the process.
Sign-Up for Results: At the end of the survey, users are prompted to sign up to receive their results by email, with an option to share this information with their doctors. The wireframes illustrate all states of the form, including blank, filled, error, and confirmation screens.

Wireframes of a chatbot modal illustrating the step-by-step survey flow

Designed in Figma

Accessibility audit of layout

To ensure the website was accessible to all users, I conducted a thorough accessibility audit of the layout, focusing on compliance with WCAG 2.2 AA standards.

Accessibility Audit Report

The accessibility audit focused on ensuring the website adhered to WCAG 2.2 AA standards, identifying and addressing key accessibility issues within the layout. The following areas were prioritized:

Color contrast ratio. Evaluated to ensure sufficient contrast between text and background for readability.
Link labels. Assessed for clarity and descriptiveness, ensuring users understand the purpose of each link.
Image of the text. Reviewed to avoid using images of text, which can create barriers for screen readers and text resizing.
Form Labels and Instructions. Checked that all form fields have clear labels and instructions, making forms easy to navigate and complete for all users, including those using screen readers.
Focus Indicators. Verified that focus indicators are clearly visible on all interactive elements, helping users who navigate with a keyboard to understand where they are on the page.

Device mockup showing an accessibility color contrast check tool in progress

Audit performed using Color Contrast Analyzer and WCAG 2.2 guidelines

Typically, a second audit would be performed on the live website to address backend accessibility issues. However, since we were working within a CMS platform, a backend audit was considered unnecessary, as the platform itself is designed to meet accessibility standards.

Finalizing and executing

In the Deliver stage, the focus shifts to preparing the layout, style guide, and functional specifications document for development. The final product was fully aligned with the CMS platform requirements, built using the component library, and verified for accessibility compliance.

Key Takeaways

Here are some key takeaways from the project:

Alignment with CMS Requirements: Despite encountering certain limitations within the CMS, we found effective workarounds to deliver intuitive user experience.
Accessibility: Conducted a thorough accessibility audit, ensuring the website met WCAG 2.2 AA standards and was verified for accessibility.
Performance Data for Further Optimization: The website was launched recently, and while performance data is not yet available, the plan is to analyze key metrics as they come in. This analysis will help create a backlog of updates to continuously improve the user experience.

Composition of a laptop, tablet, and smartphone displaying responsive website interfaces