Quickloop is an Artificial Intelligence aimed to assist developers in solving their User's recurring problem.
Quickloop helps the developer with more time to focus on other important task by deploying a walkthrough for their users in real time.
Quickloop integrates seamlessly with products and generates a walkthrough for any user's problem. This also aims to solve the tons of videos users might have had to watch before finding a solution to their question.
Quickloop helps the developer with more time to focus on other important task by deploying a walkthrough for their users in real time.
Quickloop integrates seamlessly with products and generates a walkthrough for any user's problem. This also aims to solve the tons of videos users might have had to watch before finding a solution to their question.
The brief
The client briefs highlights a context at which the developers (at suble) comes to Quickloop (Artificial Intelligence) to help deploy a walkthrough on their User's (of Suble) several unending questions.
In this context, we have the users having a problem of deleting their account and the brief showing how the walkthrough will help the user navigate round the product until their problem is solved.
The Main goal of involving a Motion designer is to create an explainer/ product video that pitches the product and is very much convincing to prospective adopters.
In this context, we have the users having a problem of deleting their account and the brief showing how the walkthrough will help the user navigate round the product until their problem is solved.
The Main goal of involving a Motion designer is to create an explainer/ product video that pitches the product and is very much convincing to prospective adopters.
UI Visuals/Before Animation
The Quickloop AI Promo
The Entire project is divided into two main part
1. UI redesign of existing screen and UI design of new screens
2. Motion Design
1. UI redesign of existing screen and UI design of new screens
2. Motion Design
1. UI Design: Like with every animation, the design will always come first. This starts with a study of the existing webpage and taking peculiar feature of the existing webpage into UI improvement. Wireframes are designed and the Analytics screen is introduced into the product. The objective of the screen were to showcase the aesthetics without compomising its functionality. The UI highlights the developers backend and the Users screen, thereby informing the division of the animation into two interconnected parts.
2. Motion Design: Here comes the trickiest part. Being a product explainer, there is need to draw a detailed storyboard, write a detailed copy, calculate the motion trajectories, and create a story flow. Some initial concepts changed during animation as there was just a better thought on going about some scenes in After effects. The Developers interface was shown as much as possible with copies to bring life to the complicated snippets. The Users screen is shown with the users feel, immersing the user into what to expect from the Artificial Intelligence.
MOCKUP USE
Behind the Scene/The Process
Design Tools
The other tool used includes Pen and Paper, Microsoft Office and Calculator.
The Team
The persons that worked on this product explainer is Bamigbaye Habeeb as the motion designer and Adesiyan Richard as the UI/UX designer.
Credits
Image- Unsplash.com
Music/Sound- Pixabay.com
Image- Unsplash.com
Music/Sound- Pixabay.com
Inspiration- Moodcaster
Mockup-Envato elements
