Prototype

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.

Screen Shot 2017-11-22 at 11.47.59 PM

 

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.

 

Moodboard and Style Tile

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.

Moodboard
Moodboard

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.

Style Tile

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

User flow and Wireframe

 

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.

IMG_1949

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

Screen Shot 2017-11-05 at 10.46.30 PMWhat 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