A Cloud Guru
Making the cloud more accessible through education.
UX Design
UI Design
Motion Design
A Cloud Guru is the worlds #1 online cloud-computing education platform. Having undergone rapid growth and attaining over 1 million active learners it acquired competitor, Linux Academy in late 2019.
Previously, the mobile app had a limited feature-set and had not received dedicated product design support due to business priorities. After the acquisition, the business set a goal to migrate the learners across to the A Cloud Guru platform. This created a need to reach feature parity and create a cohesive experience with the web app.
As the Product Designer on the mobile team, I worked with a cross-functional team of engineers and a product manager to design and deliver new student experiences for assessments, in-app purchases and video.
🔒
Password required for full case study. Please contact me if you have any questions 🙏.
Show Full Case StudyUI Design Decisions
Accessibility Considerations
Design System
UX Writing for Error States
Celebrating Quiz Success
App Purchase
Video Player Microinteractions
Methods & Insights
Existing App Review
User Journey Mapping
Workshops and Ideation
Prototype User Testing
"
As a learner, I want to practice for a certification exam so that I can assess my knowledge and prepare for the real exam.
Epic
Deliberate UX friction to simulate the real exam.
Aiming to more closely emulate the real Amazon AWS exam experience, this interaction was deliberately designed to create UX friction.
In an actual exam, multiple steps are needed to confirm or revise an answer. Easing learners into this flow helps to avoid errors when taking the real exam.
Sparking joy when passing an exam.
When passing a Quiz or Exam learners are presented a success animation.
This confetti animation was designed in After Effects and exported to a library called Lottie.
Resolving learner frustration in varying environments.
A research insight indicated that learners had experienced frustrating moments where they lost their exam progress if they were interrupted or lost internet while traveling.
I advocated strongly for a pause/resume feature in the initial release - after a technical investigation by the mobile engineers it was found that offline progress saving was a low effort endeavour.
Mobile Design System
Existing Design System
The A Cloud Guru mobile app had an existing style guide called 'Skittles' which was based on the 'Cumulus' design system in the wider organisation.
There were existing divergences between design specs and development which resulted in areas failing to pass accessibility guidelines and usability issues.
Designing a Light Theme
I collaborated with our engineers to revamp Skittles into a shared component and style library to resolve these issues. As a result of the new styling I also designed a 'light mode' that was implemented.
This made the process of design QA substantially faster and helped with cross-functional collaboration.
Ensuring accessibility in design decisions.
Designing within the existing A Cloud Guru brand guidelines to choose colours and typography that would conform with WCAG 2.0 accessibility guidelines over light and dark theming.
Components for iOS and Android
I also designed other foundational styles and components covering: depth, typography, button types, input fields and native-styled navigation components across iOS and Android.
"
As a learner, I need to purchase A Cloud Guru so that I can access the courses I want to learn.
Epic
Using motion to hide waiting and create delight.
During technical discussions our finance tech lead confirmed that there could be up-to a 6 second delay while processing the payment.
In order to help allay the pain of waiting after a transaction, I wanted to instead use it as an opportunity to build anticipation with the animation.
UX Copywriting
Translating the error codes received by the payment library into language that is easy to understand helps learners to self-diagnose and resolve the issue.
Quick to iterate, low dev-effort solution.
There was no existing onboarding for new learners onto the app and research insights indicated learners were often confused at the initial blank screen.
As the scope for the sprint was extremely limited, I collaborated with our engineering lead to choose using ‘Firebase In-app messaging’ library to use for onboarding messages.
"
As a learner, I want to watch a course video and read the content so that I can progress my learning without English audio.
Epic
Making course videos more inclusive.
Previous feedback indicated a large segment of mobile learners have English as their non-primary language and wanted to read subtitles and a transcript while watching the predominantly English audio course content.
The search feature also provides additional utility on longer videos. Where the learner can search for specific phrases that are said and skip ahead to that point on the video.
Tablet Responsive UI
On larger screens, the UI adjusts to create a more usable experience for reading transcriptions and other content.
Reducing network error friction.
There had been consistent feedback from the support team that Chromecast was generating support tickets. Displaying short messages when a connection error occurs provides feedback to learners.
Motion Design
Video player microinteractions
Skip ahead animation attempts to hide loading as the video buffers - it also transitions between playing and pausing the player.
Purchasing A Cloud Guru Subscription
Designed to match the textured brand illustration style of A Cloud Guru. The animation deliberately builds learner anticipation while the chest is in an idle state prior to the transaction and while it is loading.
Quiz and Exam Success
Confetti explosion and radial graph completion when passing an assessment.
Research Insights & Impact
"
I preloaded a course and watched it at the laundromat. I hated losing my quiz progress on the bus... could’ve been my internet.
🔒
Password required for full case study. Please contact me if you have any questions 🙏.
Show Full Case StudyThe Team
Senior Product Manager
Ana Rowe
Mobile Engineer
David Sulivan
Jackson Zaloumis
Markim Shaw
Mobile Tech Lead
Sampson Oliver
Product Designer
Albert Brunda
