Medallia’s Crowdicity is a powerful platform that makes crowd sourcing for ideas from employees simple. And with the various crowd sourcing methods offered by Crowdicity, the platform engages all levels of an organization. Crowdicity was acquired by Medallia in 2020 and never had a dedicated designer working on the platform until after the acquisition.
One of Medallia’s biggest clients needed Crowdicity to be web responsive for their employees with low vision and meet the standard set in WCAG Success Criterion for Reflow. Since we did not want this Client to churn, our nimble team was given the priority to build a web responsive platform and an opportunity to fix user experience problems we uncovered along the progress towards the deadline.
What’s Reflow and How does it make a Website Accessible?
Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.10 Reflow is to assist users with low vision who are working on desktop and needs to enlarge their web browser so they can easily see the content. There are nuances to the WCAG Success Criteria, but the key takeaway is to present content without loss of information or functionality that would require the user to scroll in two dimensions left and right because part of the content is off the screen.
In the demonstration, the browser starts at 100% zoom then increases from 150%, 200%, and 400%. The content becomes enlarged as expected with zooming a browser website. The key criteria for a Reflow website is to not lose content. Another way of supporting Reflow, is to support web responsive. When a website is at 400% zoom, it essentially looks like a mobile responsive version of the desktop.
The Problem and Opportunity
{ The Full Story }
{ Demonstration of Reflow }
We audited the platform and listed all web pages in a shared document. Then we evaluated and estimated the time to deliver redesigns and develop each page.
Auditing and Scoping
We categorized our audit and prioritized global settings over web page such as the navigation, footer, profile set up, posting ideas, and page settings. We believed that these global settings were more pertinent than webpages since they have are omni-present and thus more influence on the user’s experience.
Identifying the Steps
We designed and developed in parallel to keep in step on progress. I would work on multiple redesigns and incorporate feedback into the designs while Engineering were researching on their end to support their development work. I providing engineering with accessibility annotation for keyboard navigation and screen reader.
Design and Develop
The entire team performed quality assurance tests on the team’s pre-production instances and wrote bug tickets. My primarily focused my tests on keyboard accessibility, the screen reader experience, and notified any unexpected visualizations when reflowing the platform that were not in the submitted designs.
Testing and Reporting
The team included one Design Lead (me), one Product Lead, four Full-Stack Engineers, and one Quality Assurance Engineer. We had nine months to deliver on our commitment to the Client. To navigate through this feat, we met twice every week for stand-up, messaged each other in our group chat regarding updates, design files, and test links, and we worked alongside each other for 1-2hrs twice a week during Library Time.
Highlights of Our Process
{ role }
Design Lead
{ status }
Delivered
{ duration }
9 months
Build a responsive web version of the entire Medallia’s Ideas platform to meet WCAG’s Success Criterion 1.4.10 Reflow
Reflow
Our Estimated Timeline
We quickly got into the rhythm working alongside each other, identifying issues, and solving them. More importantly, everyone had a great attitude which made working fun and kept our Stand-Up and Library Time lively.
Applied Medallia’s Component Library
Since the acquisition, Crowdicity had not fully adopted all of Medallia’s Component Library on the platform. Part of my audit was finding opportunities to replace designs with the Component Library. The purpose for including this in my estimation is so we can also support accessibility at the component level since Medallia’s Component Library were designed to support accessibility. Secondly, utilizing components from Medallia’s Component Library and Style Guide would visually align Crowdicity’s interface with Medallia’s. Last, but not least, identifying opportunities to replace components would shorten development time since Engineering can utilize preexisting components instead of rebuilding them.
The Client wanted to know a general timeline of when we could deliver on our commitment to reflow Crowdicity. So the Engineering Leads and I conducted an audit by listing all the pages, forms, modals, global components, etc... so we could work from the same inventory. We also compared our Client’s account and our demo accounts to see if there were any customization that our client had done on the platform. Though there weren’t, having access to their account gave us an understanding of their experience with reflowing the platform.
Auditing and Scoping
Couldn’t Leverage the Mobile App Interface
Another part of my audit focused on analyzing Crowdicity’s mobile app design and experience to identify any preexisting patterns for the web responsive designs. Unfortunately, I discovered mobile app was in poor condition since there had been little engineering resources dedicated to upkeeping the interface and user experience. The desktop and mobile app used different fonts, form, components, and buttons because all releases and updates were prioritized for the desktop web experience.
We saw an opportunity another opportunity to update the mobile app interface with the desktop’s reflow interface. So this endeavor would also help us give the mobile app a refreshed look consistent with the desktop’s interface.
With the team setup, our schedule set, the auditing and scoping completed, and agreed on how we would vaguely prioritize certain areas of the platform, we went in and worked earnestly through the multiple phases until we finished designing, developing, and testing the new web responsive platform.
Design, Develop, Test... repeat
During this project, I had organized two accessibility trainings for the Design Team with Deque Systems, a company whose mission is to bring web and mobile accessibility solutions so you can meet compliance goals and help make the web accessible to all users. In training, we learned about Accessibility Annotations. I shared what I learned with my Engineers and supplied accessibility annotations for keyboard and screen reader.
Accessibility Annotations
Leading the design efforts for this Reflow on Crowdicity came during the period when I volunteered to lead the initiative on bring more Accessibility awareness on our team, as well as, how to streamline accessibility support in our design and development process. This Reflow project has given me the opportunity to apply my newfound understanding and exchange with my teammates what I've learned. I was very fortunate to have a supportive Engineering and Product Lead who were open-minded to acquiring more skills regarding accessibility. So they always welcomed feedback on how else we could make Crowdicity accessibile - which was a dream for me leading the accessiblity initiative.
My Reflection
Other Works
{ TL;DR }
Medallia’s Ideas platform, formerly called Crowdicity, empowers businesses to source the best ideas from their employees and support employees to surface their ideas to management in a simple way. One of Crowdicity’s biggest clients needed the platform to be web responsive for their employees with low vision and meet the standard set in WCAG Success Criterion for Reflow. Our objective was very clear to prevent this client from churning. So our nimble team built a more accessible platform that’s web responsive for users who need to increase their browser zoom to see the content without losing context and functionality.
Long Story Short
