Hybrid MBA Canvas Redesign
Redesigned the program’s Canvas shell which serve as the central hubs for current students. Ensured content met accessibility standards and University brand standards. Some information has been blurred to maintain privacy and to avoid disclosure of proprietary information.
Role
Designer, HTML Coder
Company
University of Washington,
Hybrid MBA
Platforms
Desktop web browsers, Mobile
Areas
Strategy, Branding, Design, Coding
Software Used
Canvas, HTML editor
Background
The Hybrid MBA program uses Canvas to store resources, information, documents and communicate with students. All pages within Canvas had different layouts, designs, and were not screen-reader accessible. The html codes for all the pages were disorganized and broken in some areas, causing formatting issues on the pages. The program wanted to provide a seamless and consistent user experience for students, allowing them to better understand the content, how to navigate Canvas, and better fit the design and accessibility guidelines of the University.
Approach
I developed a new layout that included a global header with navigation links, consistent headers designs, and consistent font sizes and copy rules. I made sure to keep accessibility at the top of my mind, ensuring the layout and any content was as accessible as possible within the limits of the software. This project required a fast timeline but scrupulous attention to detail. The redesign was planned, developed, and implemented within 7 days. I single-handedly worked on this project from beginning to end.
Homepage
Developed global header with links.
Developed headers for copy.
Restructured copy.
Pages With Extensive Content
Developed an accordion structure to nestle information and ease scrolling fatigue.
Inserted jump links to allow users to jump to the top of the page from any point.
HTML Code
Rebuilt the html code from scratch.
Cleaned up the tags, elements, and text.
Ensured new code structure worked and fixed any bugs as they appeared.
All Pages
Developed consistent format structure and implemented it to all pages.
Inserted accordion filter for extensive information.
Aligned with brand style and guidelines.
Lessons
The main challenge for this project was working within such a tight deadline while producing high quality error-free content and materials. Since the work was being done on live active pages, I had to create a space to test the code I was building before implementing it. Ensuring the code worked as anticipated for everyone on every screen size was fundamental. I was able to develop my design and code skills to a new level with this project and am proud I was able to turn around a high quality product on a extremely short timeline.
Future Changes
Conduct user testing to identify any user pain points or issues.
Develop a resource library for commonly used icons and elements.
Continue accessibility testing to ensure standards are met and errors do not occur.