Ecoling - Learn with Nature's Wisdom
Ecoling is a mobile learning app that smoothly combines the calmness of nature with the routine of learning. It allows users to access University of Minnesota courses while creating a stress-free and stimulating learning environment. The app's design is inspired by nature, with calming green and brown colours providing an appealing backdrop for educational material. Organic shapes, soft edges, and beautiful UI drawings improve the user experience, making the learning process more personalised and entertaining.
Key feature that stand out in Ecoling are the introduction of quizzes after video lectures, which allows users to evaluate their understanding and engage deeper with the content. The quizzes are designed with peaceful colours and smooth transitions to encourage focus and concentration. A flower also illuminates the navigation bar, leading users through the app while giving a humorous touch to the UI.
App Design
Onboarding Flow
Figure 1: This above flow design is the onboarding design. When the button "Explore the App" is chosen, it takes the user to the home page.
Course Selection
Figure 2: This above flow design is about course selection. When the user is in the home screen, they will select a course and enroll in it for free. Then this action will take them to the page where they agree for commitment for the course. Then they can click on the "Course Dashboard" to go to that page.
Course Learning
Figure 3: This above flow design is about the journey of learning. The map is inspired by the life of a plant. Every screen is carefully picked with light colours so it doesn't stand out as a biophilic design.
Design Inspiration
While Ecoling did not incorporate many biophilic design elements, the colour scheme was important in generating a tranquil and inviting ambiance. Inspired by the natural shades of green and brown, reminiscent of the verdant landscapes seen throughout trips, these colours were purposefully chosen to inspire a sense of tranquilly and closeness to nature. Furthermore, drawing influence from the Threads app, the idea of using a flower to highlight the navigation bar was conceived. This small yet beautiful element, suggestive of a spring sakura flower, adds fun and personalisation to the user interface.
User-Centric Approach
Ecoling was created with the user's journey in mind, aiming to make learning enjoyable and personalised. Screens with organic curves and soft edges offer a harmonious and pleasant interface, while charming UI illustrations and mascots add warmth and camaraderie to the learning experience. One notable feature is the addition of quizzes after completing video lectures, which allows viewers to test their understanding and engage further with the subject. The use of relaxing colours and seamless transitions improves the entire learning experience by encouraging focus and concentration.
Future Aspirations
Looking ahead, there is a goal to improve Ecoling with complex animations and interactive features. Learning new Figma techniques to add animated mascots and gamified components into the app's UI is a top goal for future development. Furthermore, ongoing research into the benefits of biophilic design in digital interfaces will shape future versions of Ecoling, with an emphasis on providing even more immersive and engaging learning experiences.
Sneak Peak at Other Features
Tutorial Flow
Figure 1: This above flow design is accessed on onboarding page when "Take a Quick Tour" option is chosen. This would take the user along a detailed flow of what to click and what will a specific feature would do.
Mascot Designs
Eco
Blaze
Ember
Luna
Surprised Luna
Figure 2: This above images are the mascots/characters used in the app design. Eco is the main mascot of the app. Other mascots could be gathered when the user has a daily streak and completes the quiz part of the game.
Design Showcase at Exhibition
Ecoling is a part of Last Call, University of Minnesota's class of 2024 Senior Graphic Design Exhibition
Check out the Last Call Website
Click on the arrow on the right side to see other photos