The final and most important part of my project is to create a prototype based on results of my previous assignments, I decided to resemble my app’s interface with Instagram because I believe that Instagram is not only easy to use but it does look professional. However, I need to modify to adapt to an educational app. Therefore, I choose green as the main color as it will give users a friendly feeling. Also, instead of using mono-color icons, I try to find multi-color ones that I think students will not get bored with. Beside that, I try to use a wide range of cute avatars that students can choose from. Most importantly, the quality of images and videos will decide whether my app is successful or not.

 

The flow of my app is simple. First, you need to sign in in order to use Ushine app. Then you can see Home Page consisting of popular and high-ranking projects from students. Second, you will move to Courses where you can choose a suitable course for you. After watching project videos in the course, you will need to build your own product and upload onto the app. The next step is moving to network where you can take a look at your classmates’ project as well as give some feedback for them. Finally, you need to know the date of live-streaming sessions in which you can interact, ask questions and receive feedback from instructors. The video below will help you understand how the app works:

However, after receiving feedback from my mentor, I have to rethink about the wireframe of my app as it does not have enough features to allow students to have the best experience while using the app. The good news is that my mentor agrees that my app design is quite good that it is suitable for students. What I need to do now is to come back and review my wireframe and then add or remove some slides of my app. Then I will have a complete prototype of Ushine project.

 

One of the most difficult parts of designing a website/app is to choose appropriate materials and colors. Therefore, it is extremely vital for me to create a Moodboard and Style Tile in order to get feedback from my mentors before building a complete prototype for my project. Because the aim of my project is for students ranging from primary, secondary to high school, the interface of my app should be friendly as well as professional. It appears to be a difficult task as children usually find it difficult to use an app with professional design while high school students get bored with elementary design.

Here are my Moodboard and Style Tile: I chose bright and eye-catching colors for my design because I think it will attract young people including both children and high-level students. Also, following the contemporary trend, I will choose a flat design for my app as it seems to extract a pleasant aesthetics. For the text fonts, I am still confused about what type should I use but I think the fonts usually used in games and entertaining content will be suitable for my interface design.

The next step is designing a whole complete prototype after getting feedback from my mentors based on wireframe, moodboard and style tile.

 

Deciding to continue with my previous proposal, I try to create a wireframe for my platform which shows how students will use it. There are three main parts of the process: choose and take courses, upload and give feedback on projects, attend live events and interact with instructors.

After sketching out a basic wireframe on paper, the next step is to design a basic prototype based on that wireframe.

What I learn is that web design is not only about making it beautiful or catchy, but it also allows people to use the platform easily without having to look for instruction or manual. What I am going to do next is to create a Mood board and Style Title before creating an ultimate prototype.

Here are my wireframe in PDF : Wireframe

In order to create an ultimate prototype, I need to design a simulated web/app and then learn coding/programming to make a real one based on the simulated web/app experience. Initially, I will have to decide the layout of Ushine app/web and then draw out on paper to illustrate clearly how users may experience it.

After that, I learn to use Adobe Xd which allows me to create an experience design for my project. The user flow that I drew will be used as a base for further development of app/website interface.

After sketching the whole process, I will have to design the interface for each step using Photoshop, AI or Adobe XD. Here is an example from my classmate in UX/UI Design and Prototyping class on Adobe Education Exchange website:

Eventually, the most challenging part is learning how to code with Javascript so as to create a trial version of prototype that users can try and give feedback. This is the book that my mentor recommended:

After delaying AR project, I decided to create a web-based platform where kids can learn creative courses through projects as well as interact with instructors and peers through the online community. The original idea is that kids will learn by doing with given projects and then upload products onto the web where kids share and comment on each other’s completed projects. Eventually, instructors will have a live-streaming event to review and give feedback on students’ products. Examples of projects:

 

(Retrieve from: https://jam.com)

After watching short project videos, kids have to do their own projects such as creating a craft, drawing a picture, cooking a dish, etc. Then they need to upload their products onto the web-based platform where they can see other people’s products.

 

(Retrieve from: https://diy.org)

Finally, instructors will host a live event which allows kids to ask questions, get feedback and interact with instructors.

 

(Retrieve from: https://www.panopto.com/panopto-for-education)

With this platform, project-based learning and flipped-classroom method are effectively applied into classroom. More significantly, online learning platform provides tools to personalise learning of children. (According to Howard Gardner (1983) who proposed the Multiple Intelligences, each individual would have a different way of learning depending on their types of intelligences).