Solution For Expensive Art & Design Course
Solution For Expensive Art & Design Course
Solution For Expensive Art & Design Course
Competition
Competition
Competition
Personal Work
Personal Work
Personal Work
Role : UI / UX Designer
Role : UI / UX Designer
Role : UI / UX Designer
2023
2023
Meet The Team
Meet The Team
We are participating in a national competition where students must innovate ideas that can solve a problem. Our team consists of 3 who will work in their respective fields.
We are participating in a national competition where students must innovate ideas that can solve a problem. Our team consists of 3 who will work in their respective fields.
We are participating in a national competition where students must innovate ideas that can solve a problem. Our team consists of 3 who will work in their respective fields.
Hendy Oktavian
Hendy Oktavian
Hendy Oktavian
UX Designer
UX Designer
UX Designer
Javier Ramadhan
Javier Ramadhan
Javier Ramadhan
UI/UX Designer
UI/UX Designer
UI/UX Designer
Ahmad Dziban
Ahmad Dziban
Ahmad Dziban
UX Researcher
UX Researcher
UX Researcher
1.Intorduction (Emphatize)
1.Intorduction (Emphatize)
Image
Image
National Competition PKM (Pekan Kreativitas Mahasiswa )
National Competition PKM (Pekan Kreativitas Mahasiswa )
Background
This e-learning application is one form of technological development that helps the world of education. Its existence makes it easy for teachers and students to still be able to carry out the learning process even though they are anywhere and anytime. And in this case, it prioritises art and design , where art is a form of self-expression of creative and imaginative ideas or ideas that the creator has.
This e-learning application is one form of technological development that helps the world of education. Its existence makes it easy for teachers and students to still be able to carry out the learning process even though they are anywhere and anytime. And in this case, it prioritises art and design , where art is a form of self-expression of creative and imaginative ideas or ideas that the creator has.
Expensive Art Course
Expensive Art Course
Image
Image
Expensive Drawing Course Make It Not Inclusive
Expensive Drawing Course Make It Not Inclusive
Digitalitation Education
Digitalitation Education
Image
Image
Most Of The Course Is Offline While We Can Digitalize The Course
Most Of The Course Is Offline While We Can Digitalize The Course
Community
Community
Image
Image
Lack of Learning Draw Community for Entry Preparation
Lack of Learning Draw Community for Entry Preparation
Collecting Data
Collecting Data
Based on the data and facts circulating around, drawing courses for university entrance preparation are very expensive and many people do not have access to learning at affordable prices or free. Therefore we are committed to creating video learning features and communities for free where students can learn drawing there.
Based on the data and facts circulating around, drawing courses for university entrance preparation are very expensive and many people do not have access to learning at affordable prices or free. Therefore we are committed to creating video learning features and communities for free where students can learn drawing there.
Design Thinking Method
Design Thinking Method
Empahtize
Empahtize
Define
Define
Ideate
Ideate
Prototype
Prototype
Testing
Testing
The Design Thinking Process
The Design Thinking Process
We use the Design Thinking method to ensure that every process can be done well and the problems faced can be resolved with this method as well as with additional usability testing.
We use the Design Thinking method to ensure that every process can be done well and the problems faced can be resolved with this method as well as with additional usability testing.
1.Intorduction (Emphatize)
Image
National Competition PKM (Pekan Kreativitas Mahasiswa )
Background
This e-learning application is one form of technological development that helps the world of education. Its existence makes it easy for teachers and students to still be able to carry out the learning process even though they are anywhere and anytime. And in this case, it prioritises art and design , where art is a form of self-expression of creative and imaginative ideas or ideas that the creator has.
Expensive Art Course
Image
Expensive Drawing Course Make It Not Inclusive
Digitalitation Education
Image
Most Of The Course Is Offline While We Can Digitalize The Course
Community
Image
Lack of Learning Draw Community for Entry Preparation
Collecting Data
Based on the data and facts circulating around, drawing courses for university entrance preparation are very expensive and many people do not have access to learning at affordable prices or free. Therefore we are committed to creating video learning features and communities for free where students can learn drawing there.
Design Thinking Method
Empahtize
Define
Ideate
Prototype
Testing
The Design Thinking Process
We use the Design Thinking method to ensure that every process can be done well and the problems faced can be resolved with this method as well as with additional usability testing.
2.Ideation And Making Guideline (Define & Ideate)
Image
National Competition PKM (Pekan Kreativitas Mahasiswa )
Making The Flow
We started to create a good user flow so that the application is easy to use, for pages we have many pages such as homepage, video, settings, avatars and much more.
Research
Image
Research And Making Structure Website
Wireframing
Image
Creating Wireframe For Visualive
Guideline
UPPER/LOWERCASE : TITAN ONE
UPPER/LOWERCASE : TITAN ONE
Image
Making Guideline Colour And Typography
Wireframe And Guideline
After we determine the user flow, features and methods, we start the wireframe design and also create a guideline for colours, typography and colours so that the design looks consistent.
Image
High Fidelity
The Result
And after a long process we finally completed High Fidelity with many screens and features, so next we can test this application through the Usability Testing method.
2.Ideation And Making Guideline (Define & Ideate)
Image
National Competition PKM (Pekan Kreativitas Mahasiswa )
Making The Flow
We started to create a good user flow so that the application is easy to use, for pages we have many pages such as homepage, video, settings, avatars and much more.
Research
Image
Research And Making Structure Website
Wireframing
Image
Creating Wireframe For Visualive
Guideline
UPPER/LOWERCASE : TITAN ONE
UPPER/LOWERCASE : TITAN ONE
Image
Making Guideline Colour And Typography
Wireframe And Guideline
After we determine the user flow, features and methods, we start the wireframe design and also create a guideline for colours, typography and colours so that the design looks consistent.
Image
High Fidelity
The Result
And after a long process we finally completed High Fidelity with many screens and features, so next we can test this application through the Usability Testing method.
2.Ideation And Making Guideline (Define & Ideate)
Image
National Competition PKM (Pekan Kreativitas Mahasiswa )
Making The Flow
We started to create a good user flow so that the application is easy to use, for pages we have many pages such as homepage, video, settings, avatars and much more.
Research
Image
Research And Making Structure Website
Wireframing
Image
Creating Wireframe For Visualive
Guideline
UPPER/LOWERCASE : TITAN ONE
UPPER/LOWERCASE : TITAN ONE
Image
Making Guideline Colour And Typography
Wireframe And Guideline
After we determine the user flow, features and methods, we start the wireframe design and also create a guideline for colours, typography and colours so that the design looks consistent.
Image
High Fidelity
The Result
And after a long process we finally completed High Fidelity with many screens and features, so next we can test this application through the Usability Testing method.
3.The Feature ( Prototype )
3.The Feature ( Prototype )
Image
Image
Prototype Of Visualive Application
Prototype Of Visualive Application
Determine The Features
Determine The Features
So in this application we have 3 main features There Are video learning, community. And Gamification And This Is Expected To Solve From Problems
So in this application we have 3 main features There Are video learning, community. And Gamification And This Is Expected To Solve From Problems
Online Learning
Online Learning
Image
Image
Watch And Earn Rewards To Trade In Avatars
Watch And Earn Rewards To Trade In Avatars
Gamification
Gamification
Image
Image
Exchange your Coins To Unlock Unique Avatars
Exchange your Coins To Unlock Unique Avatars
Community Support
Community Support
Image
Image
Community Page If You Need Some Question
Community Page If You Need Some Question
Making A Solution Based On Problem
Video Learning: With this feature, everyone can access drawing lessons at a low cost
Community: With the community we can interact with each other to share knowledge and tips and tricks, and of course there will also be mentors who can help you.
Gamification: Every time you finish watching a video, you will get a gift and can be redeemed by an avatar and you can customise your avatar freely.
Video Learning: With this feature, everyone can access drawing lessons at a low cost
Community: With the community we can interact with each other to share knowledge and tips and tricks, and of course there will also be mentors who can help you.
Gamification: Every time you finish watching a video, you will get a gift and can be redeemed by an avatar and you can customise your avatar freely.
3.The Feature ( Prototype )
Image
Prototype Of Visualive Application
Determine The Features
So in this application we have 3 main features There Are video learning, community. And Gamification And This Is Expected To Solve From Problems
Online Learning
Image
Watch And Earn Rewards To Trade In Avatars
Gamification
Image
Exchange your Coins To Unlock Unique Avatars
Community Support
Image
Community Page If You Need Some Question
Making A Solution Based On Problem
Video Learning: With this feature, everyone can access drawing lessons at a low cost
Community: With the community we can interact with each other to share knowledge and tips and tricks, and of course there will also be mentors who can help you.
Gamification: Every time you finish watching a video, you will get a gift and can be redeemed by an avatar and you can customise your avatar freely.
4.Iteration Process ( Testing )
4.Iteration Process ( Testing )
1
1
Users are tasked to watch one beginner architecture video and then navigate to the next video to earn rewards.
2
2
After getting the reward, the user is asked to redeem the reward by purchasing an avatar on the account page.
Task List For User
Task List For User
1
1
all test subjects successfully performed the task smoothly and could be understood easily
2
2
Many Test Subjects Provided Feedback and Some Suggestions for Better Application Development
Test Conclusion
Test Conclusion
Image
Image
List Of Task And Usability Testing
List Of Task And Usability Testing
Usability Testing
In the testing stage, we try to test our design to several users to test the navigation, readability, and effectiveness of our design to users. The method used in this testing is to prototype the application in Figma on Android.
In the testing stage, we try to test our design to several users to test the navigation, readability, and effectiveness of our design to users. The method used in this testing is to prototype the application in Figma on Android.
Fix On Navbar
Fix On Navbar
Image
Image
Fixing The Navbar On Community Page
Fixing The Navbar On Community Page
Changing Sign
Changing Sign
Image
Image
Changing The Colour Of The Level
Changing The Colour Of The Level
Imporoving The Flow
Imporoving The Flow
Image
Image
Fixing The Flow To Increase Effeciency
Fixing The Flow To Increase Effeciency
Conclusion
Conclusion
After going through the research, design, prototyping and usability testing process, we have several points where this can be used as a great potential in business and also the importance of testing our products on potential users so that we can provide the best experience when the product is released.
After going through the research, design, prototyping and usability testing process, we have several points where this can be used as a great potential in business and also the importance of testing our products on potential users so that we can provide the best experience when the product is released.
4.Iteration Process ( Testing )
1
Users are tasked to watch one beginner architecture video and then navigate to the next video to earn rewards.
2
After getting the reward, the user is asked to redeem the reward by purchasing an avatar on the account page.
Task List For User
1
all test subjects successfully performed the task smoothly and could be understood easily
2
Many Test Subjects Provided Feedback and Some Suggestions for Better Application Development
Test Conclusion
Image
List Of Task And Usability Testing
Usability Testing
In the testing stage, we try to test our design to several users to test the navigation, readability, and effectiveness of our design to users. The method used in this testing is to prototype the application in Figma on Android.
Fix On Navbar
Image
Fixing The Navbar On Community Page
Changing Sign
Image
Changing The Colour Of The Level
Imporoving The Flow
Image
Fixing The Flow To Increase Effeciency
Conclusion
After going through the research, design, prototyping and usability testing process, we have several points where this can be used as a great potential in business and also the importance of testing our products on potential users so that we can provide the best experience when the product is released.
You Can Also Watch This App Introduction
You Can Also Watch This App Introduction
You Can Also Watch This App Introduction
Reflection On This Project
Reflection On This Project
Reflection On This Project
Collaborating
Collaborating
Collaborating
Learning to co-operate between teams to solve a problem into a solution
Learning to co-operate between teams to solve a problem into a solution
Learning to co-operate between teams to solve a problem into a solution
Better Design
Better Design
Better Design
If given more time, I would like to improve the flow of the app and add some features and make the design better.
If given more time, I would like to improve the flow of the app and add some features and make the design better.
If given more time, I would like to improve the flow of the app and add some features and make the design better.
Importance Of Usabilty Testing
Importance Of Usabilty Testing
Importance Of Usabilty Testing
I learnt the importance of usability testing to make sure our design works or not, and also learnt to accept feedback from people around us to make the product better.
I learnt the importance of usability testing to make sure our design works or not, and also learnt to accept feedback from people around us to make the product better.
I learnt the importance of usability testing to make sure our design works or not, and also learnt to accept feedback from people around us to make the product better.
Check Other Study Case
Check Other Study Case
Check Other Study Case
Fiverr
2024
Landing Page
Freelance Work
Helping Small Business Through Landing Page
Fiverr
2024
Landing Page
Freelance Work
Helping Small Business Through Landing Page
Fiverr
2024
Landing Page
Freelance Work
Helping Small Business Through Landing Page
Let’s Collaborate Together You Can Contact Me Below This
Let’s Collaborate Together You Can Contact Me Below This
Let’s Collaborate Together You Can Contact Me Below This
@Javier Ramadhan 2024
@Javier Ramadhan 2024
@Javier Ramadhan 2024
Bandung , Indonesia
Bandung , Indonesia