Embedded Files
Timeline: December 19th - 25th, 2024
(Developed independently)
Project Objective / Challenge
Create a visual design direction that balances the magic of AI innovation (Use of AI or implement AI) with premium professionalism, where sophisticated design creates moments of amazement within a trustworthy learning environment (Secure - Address security concerns).
You are required to use AI tools to accelerate and enhance your design process.
My Approach
I highlighted keywords in the design objective such as: Innovation; premium professionalism; Sophisticated design; Trustworthy learning environmemt.
Researched each of these keywords using ChatGPT and what it means in the context of designing this learning platform. For example:
What colours depict each of these to the user;
What colour suits my persona? - users in the middle eastern countries;
How do they interprete certain colours e.g red;
How do I maintain my goal whilst considering my users in each design decision I make?
These are some of the questions I had and rersearched on to get answers.
Researched on existing web and mobile learning platforms (competitive analysis) with AI integration - to find out aspects of their designs and features has helped facilitate user retention - that users found useful.
Researched on AI tools I can use in creating a visual - UI of the platform after my research has been carried out.
Design Constraint
My designs had to fit into the existing Ingenius web interface. Hence, I was provided with a sample page to work with.
My Design Journey
Research 1 - Advanced enterprise platforms
I’ve highlighted features in these products that resonate with InGenius’s learning platform, offering insights for potential implementations that align with its Vision and Goals
Research 2 - Premium tech interfaces
I researched leading tech interfaces to identify features that could be implemented in InGenius.
Research 3 - AI and learning experiences
I researched on various AI-powered learning experiences to inform feature development for Ingenius and guide the feasibility of my proposed concepts for this project.
Research 4 - Examples of "magic" in professional products
My research focused on identifying 'magical' elements in professional products.
"Magic" in professional products means advanced technology works effortlessly, allowing users to achieve goals with minimal effort and maximum delight, often creating wonder or surprise.
ChatGPT was used for this aspect of the research.
Resources Used for Design
Pillars of My Designs
Layout Principles
Design System for Figma Design - Student View
Typography
Colour Style
Button Style
Cards
Designed Screens - on Figma
Below are some selected screens from the designs created in Figma.
Course Studio: Student Home
Course Studio: Student Home
This is the home screen designed for student (learner) users within the Course Studio platform.
A - The initial screen the student interacts with upon first login.
B - The use of "gamification interactions" to keep the learner motivated.
As the user progresses in the course, the trees grow and turn green.
(Green is proven to boost Motivation and Positive Outcomes)
"color green can have positive psychological effects on learners, such as promoting calmness, focus, and potentially creativity"
Course Studio: Course View
Course Studio: Course View
This is the interface a student interacts with when they select a specific course within Course Studio. It's the primary screen for course engagement from a learner's perspective.
A - The "text" view for the selected course.
B - The "video" view for the selected course. This has a transcript that can be viewed in the prototype.
Users can easily toggle between these two options, which facilitates quick access and enhances the overall user experience.
Design - Business View
View Full Output on Github - AI generated UI & UX design
This is my developed output for the "business view" - businesses integrating the Ingenius learning API into their platform. I integrated the colour style and typography, I mapped out on Figma in the prompts that were used to generate this user interface.
Two AI web solutions were used for this aspect of the design process and the outputs were compared: Loveable and Bolt.
After multiple iterations, I selected Bolt because its output best aligned with my conceptual design and prioritized optimal UI/UX.
I created a GitHub repository to showcase my design outputs along with notes to guide viewers through the process.
Some Screens
Google Sites
Report abuse