WileyPLUS re-skin & mobile-friendly design

WileyPLUS is an online teaching and learning environment used in higher-education. It currently has around 17,000 instructor users and 500,000 student users per semester. This project started as 4 separate initiatives within the company:

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 the product; 
3. ensure 508 accessibility compliance for users with disabilities using high color contrast and appropriate code for screen-readers; 
4. make the site responsive for tablets and mobile devices.

Once I discovered this overlap in effort 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 very thorough evaluation of the framework that will best meet our needs and Bootstrap was chosen.

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 capabilties) into a small screen size is no easy task. With the help of our UX Researchers, I researched and validated several mobile designs with real users at a research facility.

Developers, a UI designer and I created some proof-of-concept pages that had very good results, after which we fleshed out the remaining pages of the platform. We worked following an Agile, iterative approach and checked progress and results daily.

researchresearch

course homepage

student's assignment list

instructor's class announcements

instructor's gradebook

GB_normalGB_normal