END TO END UX/UI PROJECT
Google Squared Campus - Design a place for students to learn digital marketing with Google experts
The problem
Squared Online was already up and running but it was using an old Moodle theme which was completely unstyled and had very low user engagement ratings with the current journey.
The brief
Redesign the current campus journey and make it look and feel like a real Google product using the Material Design graphic system.
Site map
Create attention
Create relevance
Convince
Convert
Care
Journey
The solution
My initial sketch was a simple scamp of what looked like the YouTube and Gmail layouts at the time. A left aligned course layout and progress enhanced the Ui and simplified each stage in the journey.
The journey
Users are guided through the journey using their progress as the key motivation to complete the course. Each module has project downloads, links, tool kits and course content covering specific requirements and is organised in an accordion on the left navigation.
The ability to resume from their last place in the journey and to skip to previous and next tasks were key in making the campus fast and easy to use.
What I did
- Full site map and wireframes
- Ui kit
- Complete page design
- Worked with Moodle developers to build
Full design
The dashboard was one of the key pages in the new design for users to gain a solid overview of where they currently are in their Squared Online journey, and also to encourage users to be organised and good at managing their time.
Each module would be locked before the user completes the module before, but the support centre contains lots of content and help points regarding other modules.
Graphic system
Everything had to live and breath the Google brand, the Material Design guidelines and also Squared's guidelines. All course content had to feel part of the family and users needed to feel welcome and included in the space.
This enabled the Virtual Learning Campus to have the same vibrant culture as the face to face program, but this time it was all online.
