Google Squared Online
My scope of work
UX discovery > Schematics > Wireframes > Full mobile-first product design
I was hired as a freelance UX/UI designer to create the virtual learning campus as well as other websites and marketing collateral. This 6-month contract turned into 2 years and this project stood out for me as the one which kickstarted my career as a product designer.
Profile picture illustrations by Kate Muffet
Avado designed the course, I designed the product.
Avado Learning ran all its courses on Moodle, a Learning Management System which has all the functionality built in to run educational programs, apps and websites. Courses, modules, classes, exams, and chat are just some of the built-in components, but what's not included is the course content.
The team at Avado worked with Google to develop the course content and syllabus, but the UI was bare, off-brand and needed to feel like a fully-fledged Google product which could easily sit beside all the other Google products like Gmail and YouTube.
Base Moodle UI out of the box
Google Squared VLC Site Map
It starts with a sketch
After looking at all of the components in Moodle at our disposal and at all the functional requirements which the course content would need, I came up with a couple of sketches based on existing product layouts and the Material Design guidelines.
Initial sketch based on requirements
Learning is a journey, an adventure, and progress is so important when understanding how we and our peers are doing.
A dashboard area showed modules which each required progress indicators and useful tools such as calendars, news, messages, and forums all needed to be included to provide students with an approachable, simple and worry-free experience.
Responsive dashboard wireframe
When a user selects a module, they're then taken into the course layout where activities, live classes, discussions, and resources are arranged in a simple navigation. Users can pick up where they left off, revert back to previous steps, and interact with other Squares in their cohort in live chat.
Course layout wireframe
Material Design is a yummy UI system to integrate into a product. Card systems, bright colours, wholesome shadows, closing rings, and sticky menus overlapping other cards really brought the UI to life in an approachable and familiar way.
The modules were initially laid out in a grid, but it was later improved by making the modules sequential so users were always sure where they were, where they'd come from, and how far away they were from the next module.
Dashboard with full access to tools and resources. Modules are locked until users reach milestones and pass exams.
Full suite of module icons
Integrated calendar showing all the live classes and events coming up. The header nav changes depending on where the user is.
Updates and announcements appear in the news section, keeping Squares up to date on their learning journey.
Squares can interact with other classmates in the same cohort, giving kudos and feedback. Perfect for team workshops, course collaborations, and making new connections.
All course content available for download and editing can be found in Resources.
Students can join live classes run by tutors and special guests while interacting in live chat.
Discussions are the students' chance to discuss course topics and really get deep into subject matter together.
All course content tied together in an app that's recognisably a Google product
The future for Squared Online