BRIGHTSPACE HTML TEMPLATE REDESIGN
Brightspace is a Learning Management System (LMS) employed by higher education institutions across the country. As part of my work as a UI/UX specialist, I created mockups to change the look of the provided HTML template pages match the branding of the individual education center.
The HTML Templates provided by Brightspace are used to create more varied and engaging courses for end-users and students. However, they are definitely a bit basic visually and have nothing to do with the brand of the education center I work at.
I was tasked with creating Figma mockups to implement the new fonts and colors for the center as well as update the structure of the page as well. Accordions, tabs, drop downs, and other pre-built structures needed to be re-done.
COLOR
I started by using our general color palette to create color combinations for each of the five major courses we offer. Using colors from the brand's overall palette kept the courses consistent within the design system, but applying specific colors to each unique course allowed them to be easily differentiated from each other.
Using the 60/30/10 rule for design, each palette would use about 60% white for the background of the page, 30% of a main color (including tints and shades for accessibility purposes), and 10% of an accent color.
WEB VERSION 1
Once that was done, I created mock web pages that incorporated all of the necessary HTML elements shown prior (like accordions and tab system) with updated fonts, colors, and spacing.
I utilized a grid system to ensure equal spacing and indentation within and between elements and to maintain consistency across the board.
MOBILE VERSION 1
Since a large portion of our users access the coursework vie mobile app, it was also important for me to optimize the layout for smaller devices. I tweaked the structures and font sizes, changed how I used the grid, and ensured consistency between platforms despite the necessary differences between them.
CRITIQUE AND CHANGE
After sending my work to my colleagues for critique, we agreed that the designs needed to be further simplified, and the color work made more precise. This involved removing line work, cleaning up corners, using less overlapping shapes and circles, and making sure all text and colors are ADA compliant.
