Case Study 3
WileyPLUS Mobile-Friendly Redesign
About
WileyPLUS is an eLearning platform used in higher education, at the time having around 2 million student users. This work was to redesign the dual-facing platform for instructors and students, making it more user-friendly, responsive for mobile screens, and meeting AA accessibility requirements. Additionally, a reduction in the customer support team prompted further redesign of the customer support pages.
Client
John Wiley & Sons
Role
User Experience Architect
Project Summary
I worked with an agile team consisting of a Product owner, overseas Engineers, a UX researcher, and a UI designer. My deliverables were wireframes for desktop, tablet, and mobile screens, and detailed annotations for developers. We used JAWS screen-reader software to test accessibility alt text.
Business Goals
→ Update the visual look and feel of the site and provide a responsive experience without altering existing functionality, to keep up with the foreseen growth of competition in the eLearning space.
→ Improve the customer support section so that customers can better utilize self-help as a first method of finding solutions to their problems, to cut costs.
→ Meet AA accessibility requirements to comply with laws.
Design Challenges
1
Update the visual look & feel of the site, without altering any of the existing architecture or functionality at this time.
2
Create an updated, manageable html styleguide for expected future site updates.
3
Adhere to 508 accessibility compliance for users with disabilities using high color contrast and appropriate code for screen-readers, which will impact our color styles.
4
Make the site responsive for tablets and mobile devices, without altering existing architecture or functionality at this time.
5
Improve the customer support section so that customers can better utilize self-help as a first method of finding solutions to their problems, which will reduce the call center experience for users.
The following is a screenshot of the previous home screen before the redesign.
Design Process
Planning
Once I discovered the overlap of multiple separate efforts within the company, I called a meeting and the separate teams got to work on merging the efforts into a single overall re-design. Overseas developers were involved early and they tested 3 different responsive frameworks: Google’s Material Design Lite, Bootstrap 4, and Foundation Zurb. The developers did a thorough evaluation of the framework that will best meet our needs and Bootstrap was chosen.
Research
In the meantime, I had already been testing the idea of mobile-friendly designs with students and instructors. Survey results showed that there were high expectations for students and instructors to be able to complete certain tasks on their mobile devices. Translating the platform (which has so many features and capabilities) into a small screen size was a challenge.
With the help of our UX Researchers, I validated several mobile designs with real users at a research facility.
Wireframes
While engaging with developers, I created some proof-of-concept pages with positive results during research, after which we fleshed out the remaining pages of the platform. The following screens are wireframes for the Student's Assignment section (with my annotations to developers referencing styles in our new style guide).
The following wireframes show the Instructor’s gradebook (with my annotations to developers).
Final Design
The following screens show the finished designs for the Student's course homepage.
The following screens show the Instructor's class announcement module.
Customer Support Pages
As for improving the customer support center, the reason behind this was a business decision to greatly reduce the customer access to Digital Solution Specialists (a live person who is available to train, set up a course, or answer questions when needed). Therefore, most customers who had previous access to a DSS were being left to rely solely on the tech support site.
Data
Surveying of customer support reps and DSS’s showed that customers had previously contacted a DSS instead of support for a number of reasons:
→ they had a negative experience with the tech support section in the past, or
→ they found tech support’s solutions to their requests for help didn’t meet their needs, either in delivery method or in content.
The typical usage statistics were: 4:1 student:instructor ratio; 30% of all instructors (of about 17K per semester) come to the support section vs. 5% of total student population (of about 500K per semester).
I performed a heuristic evaluation of the previous customer support section, gathered insights from the Customer Support Reps and viewed customers’ usage statistics.
The following screen is the previous design of the support center.
These are early wireframes of the redesign.
These are final designs of the customer support center.
Outcome and Achievements
This redesign provided a fully responsive site so that students and teachers can view and complete tasks on their mobile device. WileyPLUS is also now compliant with accessibility requirements. By performing a heuristic evaluation of the previous customer support site, gathering insights from the Customer Support Reps and viewing customers’ usage statistics, we enhanced the user experience of the site to a point where Digital Solutions Specialists and the number of requests to Customer Support Reps has been significantly reduced.