Tynker Web Application - Teacher's Portal
Tynker Web Application - Teacher's Portal
Initial Start
After took user research and some interviews, I finalize the teacher's need and provide some unique ideas of the structure of this products. From day 0 of getting started until evaluation system, easily to help teacher track student's class status and ensure the online class can be completed successfully. The students will be groups of kids who wants to learn coding, with learning and playing together, I find out the ideas to implete the game to the dashboard as individual class. Therefore, the evaluation system will automatically cauculate the grade once these students complete the game. With short brainstorming, I come out all the elements and content relate with this product.
Sketch
Lower quality design usually will speed up the product building process, I did draw the simple dashboad layout and conclude all the possible contents in. With the tile/card view instead of traditional table under class page, teacher is able to easily find out all the information list in each card. Also, after some user research, I understand a powerful product must have enough space to update without affact any initial layout and structure. In future, the card design will have more space to play around with more product functionality, such as popover, tooltip, dropdown menu, drug and drop, etc.
Product Site Map
To give some ideas of interaction roadmap/sitemap, this will according to my sketch after brainstorming. With lots of user research and user behavior studies, I understand most teachers care is how many students in the class, time management and process of project. In order to generate this metrics/reports, I conclude the stucture of the product with classrooms, courses, students, projects and getting started.
Wireframe
The user scenario is significant part of user experience. I collect some feedbacks from teachers in school and add students, classes usually not user friendly while they use in their school systems. With the traditional table will, they have type the students info one by one and fill out the complicated form. I the wireframe, I provide the ideas that if they can import the excel file or login with google account will save much more times.
Below is the partial adding students user story and UX requirements that I assign to myself.
• Solution A : show notification icon on the each card of class - add students(0 students)
• Solution B : force user to click the card of class to add students, if student has been added, user click it will get into manage class page
• Solution C (must have) : notification show on top nav, notify user add students with drop down menu - get into add students page
• Solution D: add student panel can be used as the tab solution.
• Add solution of adding students of login with google account
• Content on right part UI follow the dropbox solutions.First Time Experience
Visual Design
First time experience will be the intial experiance once user register the product. Dashboard with overview will show some information/notification of classrooms. Some other elements such as getting started, metrics, status, news and feeds will be important to let teachers understand what this product is and what kind of functionality they can use.
HI-FI Mockups
Visual Design
From user research and interview to sketch and wireframe, until the user testing and feedback. I collect all the information and build this HI-FI Mockup to meet user's need. Along with all design element that I defined, which provide the powerful user friendly teacher's portal and expand their multi sensory user experience.
© 2019