Streamlining member interaction with
MEMBER PORTAL
As a UX Designer, I was responsible for crafting the entire user journey for our members to edit there membership account. Designed a digital tool featuring an intuitive interface, fostering increased donor engagement, streamlining donation management, and prioritizing accessibility through responsive design. This is also a sample of my work at CPR where I was assigned to help begin the creation of a new form pattern design system. I conducted research and created guidelines to be implemented in the new design system.
My role
Methods & Tools
UX Design, UI Design, Design system User Flow, Information Architecture, User Testing, Sketches, Wireframe, High-fidelity mockup & prototype
Team
2 Software Developers, Project Manager, Membership department stakeholders, UX Writer
Timeline
3 months
Colorado Public Radio (CPR) is a non-profit news, podcast and music network serving the state of Colorado. CPR operates a network of stations across the state, providing a mix of local, national, and international news coverage, as well as a diverse range of music programming. It provides digital content through its website and mobile apps, ensuring that listeners can access high-quality journalism and music wherever they are.
Primary Goals
Improve the upgrades on the subscription amount by 35% - Built a seamless experience & intuitive system design where members can easily upgrade their donation amount.
Reduce the manual work and save the time of staff by reducing the amount of phone calls - A portal that can help user to perform tasks like changing billing addrress, personal imformation, casd information, accessed their task invoice etc
Introduce new design system - There was a need for new design system for member portal being a new product, with new elements we also had to be consisten with current UI and evolve the design components
From user research and UX/UI design to user testing…
Let me walk you through the process!
Process
Challenge
The manual process of managing donation information at Colorado Public Radio (CPR) was inefficient and time-consuming, requiring numerous phone calls for members to access or update their donation history, amounts, personal, and payment information. This not only placed a significant burden on the administrative team but also resulted in delays and potential errors, detracting from the overall member experience.
Solution
Designed Member Center which is an online platform or portal designed to enhance the user experience (UX) and facilitate interactions with donors. Its primary purpose is to provide donors with a centralized hub where they can manage their donation-related activities, access/edit personal information, edit payment methods and engage with the organization effectively. The tool allows users to login and have an digital tool which they access through website, apps or mobile.
Intial exploration and Research
Data Analysis
1.
Over few months, we meticulously documented recurring activities, synthesizing them into a comprehensive list of donor needs and preferences. This served as the foundation for designing the Member Center, ensuring that it would cater to the primary requirements identified through user research. Through this process, we identified recurring themes and common activities that donors frequently sought assistance with.
65% of inquiries for change in payment information or personal details…
Users unable to change donation amount, change billing address, edit phone etc.
Users enquires about how to get tax document and donation receipt making
Users also made enquiries about how to download tax document and donation receipts.
User Survey
2.
Over few months, we meticulously documented recurring activities, synthesizing them into a comprehensive list of donor needs and preferences. This served as the foundation for designing the Member Center, ensuring that it would cater to the primary requirements identified through user research.
Inconvenience of Current System..
78% of users expressed dissatisfaction with the existing phone-based system
reporting long wait times, limited availability during business hours, and frustration with the need to make multiple calls for simple tasks.
Security Concerns..
90% of users expressed data security concerns
including secure login processes, data encryption, and the protection of personal and payment information.
Members expressed a preference for self-service options
with 75% stating they would rather update their information online than over the phone.
70% of members wanted more transparency and control over their donation information.
They wished to easily track their donation history, view current donation amounts, and make adjustments as needed.
3.
User Interviews
Conducted interviews with 10 users, including 7 existing members and 3 non-members, to gain insights into their perspectives and needs regarding the Donor Portal.
Many members cited their frequent use of online banking and self-service portals for other services, expressing a desire for similar convenience with CPR.
The ability to update personal information, and manage payment details without assistance was highly valued.
Members often call for simple information like their giving history.
A member expressed dissatisfaction with the lengthy wait times to connect with a representative for retrieving or updating information, coupled with a lack of assurance that the changes were successfully made.
Secondary Goals
We had two major goals with this project, first automating the member interaction process to increase the customer satisfaction and give members real time experience. Second goal was to reduce membership related inquiries by 50%. We aimed to automate few tasks that was performed by customer center.
Information Architecture
Sketches
Evolving Design System
The goal was to evolve design systems that is scalable with easily modifiable and reusable components, preventing us from building everything from scratch for future project. With project planning and management we were able to ensure ease of maintenance, including code documentation, regular code reviews, testing, and maintaining code quality.
The primary button is large enough for easy interaction, used action-oriented text, subtle rounded corners for a modern look, slight color change & underline to indicate interactivity. For accessibility ensured a minimum contrast ratio of 4.5:1 and add aria-label if necessary.
Minimalist Design for text buttons with no background, only text with a clear hover state (e.g., underline or color change).
Label Design: Labels were made always visible to user and not as a placeholder text-
Utilized top-aligned labels as we had to use them for long forms, makes it easy for quick scanning. Indicated mandatory fields with an asterisk (*)
Validation & Error Handling:
Showing validation errors in real time was not possible due to back-end constraints, but used error messages with clear, specific messages after submission (e.g., “Password must be at least 8 characters”).
Use red borders for errors and showed error messages directly below the field.
Long-form & table accessibility considerations:
Collaboratively with developers we made sure the display of the form fields are on the same order in HTML as they appear on the screen. Since screen readers and keyboards navigate forms in the order they appear in the HTML and not CSS
Style Guide
Figma Components
Buttons: Taking a button as an example, we used our typography styles for the text, our style guide to define the colors for every state and spacing presets to make sure everything could scale to different texts.
Secondary button with less prominent styling to not compete visually with the primary button. It is consistent with the the design language of the primary button.
Provided hover state with clear indication that the button is interactive also making it accessible b y not relying only on colors.
Input field design: Used sufficient field height for ease of interaction - 50px. Used subtle borders for clarity and highlighted the active field with a stronger border color.
Used rounded corners to match the form’s overall UI style. Used full-width inputs for mobile forms. Clearly highlight the active field.
Accessibility Considerations:
Keyboard Navigation: Ensured all fields are accessible via Tab and Enter.
Screen Reader Support: Used aria-label for additional descriptions if needed.
Color Contrast: Ensured form elements have at least a 4.5:1 contrast ratio meeting AAA accessibility standards.
Error Feedback: Provided both color and text-based indicators (e.g., “Error: Invalid email”).
User Testing
Step 1 Functional Testing : Initially, we conducted two rounds of testing for the site. In first phase we tested prototype that included different tasks and 3 iteration of login screen. The second phase involved an internal evaluation with 200 employees, utilizing a staging site. This assessment utilized a survey format primarily consisting of qualitative, open-ended questions. Testers were tasked with performing specific actions on the site before providing feedback through the questionnaire.
Step 2 Feedback Integration : Following the initial test, we received over 50 responses along with additional feedback from testers. We diligently addressed the identified issues and incorporated suggestions for improvement. For example, we identified the need of restricting minimum donation amount.
Step 3 User Acceptance Testing(UAT) : Upon rectifying the issues highlighted in the initial phase, we proceeded to conduct a second round of testing with a larger group of users. This time, we enlisted the participation of 1000 donors who interacted with the live site and provided feedback through a questionnaire. The outcome of this testing phase was overwhelmingly positive, with over 200 responses received and a remarkable 90% expressing satisfaction. With confidence in the site's performance and user acceptance, we officially launched the platform to the public.
Testing 3 iteration of Login Screen UI (Mobile and Desktop)
There was a requirement to design three different login options for users in a way that ensured an intuitive experience on both mobile and desktop while allowing quick access to the member portal. The three primary login options included:
Logging in with an email and password
Logging in via a one-time link
Requesting a new password (for users who forgot theirs or were new)
Incorporating all three options posed a challenge, especially on mobile. To address this, we adopted a mobile-first approach for the login screen. Three design variations were created and tested with users through a prototype.
Iteration 1 : In the first iteration, we presented two similar login options upfront under a "Login" tab, while a separate tab was designated for new users, allowing them to enter their email.
Iteration 2 : In the second iteration, we kept two similar login options under a "Login" tab but nested the email and password login under a text link with an arrow to minimize confusion from multiple login choices. A separate tab was provided for new users to enter their email.
Iteration 3 : In the third iteration, we presented a three separate tab on the main menu for all three different items - Login with one time link, Login and Request new password.
Key Insights:
Iteration 2 (Mobile) performed the best, with the highest success rate (95%) and the lowest confusion rate (5%), making it the most intuitive option for mobile users.
Iteration 1 (Desktop) ranked second best, with a 92% success rate and the fastest average login time (8 sec) on desktop.
Iteration 3 had the highest confusion rate (20-25%), as users found the three separate tabs overwhelming.
This data suggests that Iteration 2 should be implemented for mobile, while Iteration 1 is preferable for desktop.
But since we wanted to have consistent experience for mobile and desktop we went ahead with iteration 2 for both.
Final Hi-fidelity prototype
Clear and Simple Design: The design was clean and uncluttered. Used ample white space around form elements to avoid visual overload. Made sure the login form stands out prominently on the page
Clear label and placeholder text : Asked for essential information during login, and utilized clear labels and placeholder text to ensure accessibility.
Clear Menu Structure: Designed a simple, clear, and consistent menu structure to ensure easy navigation.
Personalization and Customization: Allowed donors to personalize their profile by updating their contact information, and communication settings. Provided clear options for them to control how and when they receive updates from your organization.
Brand Consistency: Maintained consistent branding with CPR’s visual identity, including colors, typography, and imagery.
Clean and Modern Look: Adopted a clean, modern design aesthetic to create a professional and appealing user interface.
Dashboard widgets for history: Used dashboard-style widgets to summarize donor information. Displayed total lifetime donations, status, date of donation, amount and it’s receipt.
Dashboard Widgets for monthly donation: Used dashboard-style widgets to summarize donor information. Displayed total recurring donations, status, date of donation, amount and link to edit payment.
Login with password and One-time Login button
Profile page
Edit profile
Change password
Donation history page
Recurring donation page
Edit payment page
Error Handling: Provided clear and immediate feedback when users make mistakes, such as entering incorrect credentials or leaving fields blank.
Visual Hierarchy: Used a clear visual hierarchy to organize information on the profile page. Highlight important sections such as donation history, personal details, and preferences. Utilize headings, icons, and contrasting colors to differentiate sections.
Visual Feedback and Confirmation: Provided visual feedback when users update their profile information or preferences. Used success messages to confirm changes and reassure members that their updates have been processed successfully.
Donor features: Added features like logout, option to get tax letter and filter option to organize the donation by year.
Help Center: Integrated a comprehensive help center with FAQs and guides to assist users.
Editable fields functionality: Enabled inline editing for fields that donors frequently update, such donation amount, billing address or payment type. This allows users to make changes directly on the payment page without navigating to a separate editing screen.
Mobile-Friendly: Ensured the member center is fully responsive, providing a seamless experience across desktops, tablets, and smartphones. Utilized flexible grid layouts and media queries to adapt the design to various screen sizes.
Results
57%
Reduction in phone inquiries
28%
Upgraded their subscription amount
Next Steps?
After achieving a successful launch and significantly reducing phone inquiries by 57%, we've gleaned valuable insights for the continued enhancement of the Member Center.
Currently, our team is focused on implementing a convenient "one-click login" feature to make the user journey more fast. This functionality eliminates the need for users to remember login details by providing them with a secure, one-time login link sent directly to their email address. Although this feature was identified as an important one during our initial research phase, it was not initially prioritized. However, we recognize its importance and next step would be to prioritize its implementation. We anticipate that this addition will not only streamline the user experience but also result in a projected 20% increase in Member Center usage. We will also look in adding more valuable feature as we gain more feedback from our users.
Our next step also includes increasing the donation through donation page, hence working on integration of apple and google pay into the payment method.