Google Squared Online

Design a place for students to learn digital marketing and leadership skills with Google experts

Client

Google

Duration

6 months (Contract)

Live project

avadolearning.com

Source files

Download .sketch

My scope of work

UX discovery > Schematics > Wireframes > Full mobile-first product design

My role

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

The Virtual Learning Campus

Avado designed the course, I designed the product.

Audience

Marketers of tomorrow

Insight

We learn more from experts

Output

Responsive VLC

LMS

Moodle

The problem

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

The solution

Google Virtual Learning Campus

A bespoke UX which enabled students to fully integrate their learning with their Google universe. Once signed in it was as if a whole world of online learning had opened up on their devices which was recognisably a Google product which felt familiar, welcoming and collaborative.

Download site map .pdf

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

The Dashboard

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

Course layout

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

The design

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

What's next?

Google Squared Online is available for you to enroll today over on Avado's website, where you'll be able to find the live version once you've enrolled. You'll be able to see all the changes they've made to it over the years as well, but who knows where they'll take it next.

Enroll on Squared Online today!

Next project:

Work with me, baby!

Get in touch

(+44) 07934014543