Rationale . Inspiration
What is EDUO? EDUO is an educational website that aims to make study fun and engaging for high school students and reduce the cultural barrier between teachers and students to build better connection between two very different groups.
Why? Level of education that many societies are expecting from the youth is increasing in parallel to this rapidly developing world. Furthermore, the way that younger generation acquire information and consumes entertainment contents has shifted from long television shows or movies to a short and fast paced video contents due to leading social media platforms such as Tik Tok, Instagram reels or YouTube shorts. As a solution, instead of limiting students from consuming these contents and guiding them to focus on the traditional way of studying, EDUO will implement the features from leading social media platforms, such as delivering notice/ announcement to students in a similar style to ‘posts’ from social medias, features to edit profile or making communication between teacher and students easy by message function.
How would it be delivered? For this project, EDUO will be presented as a functioning prototype built through Figma. Coding and publishing will not be conducted.
Project Timeline
- Current Stage: Summarise all works created during the previous stages of the project.
- Feedback: Gather feedback from acquaintances in design field and summarise results.
- Further Research: Based on the feedback, further researches will be conducted and set a clear direction of UI design.
- FlowChart: Full flowchart will be created.
- Social Contents Creation: Research existing social media platforms to create contents regarding communicating function.
- Prototype: Based on overall researches and experiments, rough wireframe of the website will be created.
- Final Deliverables: Functioning prototype via Figma.
Feedback
To gain more inspirations and take a strong step to proceed into the project, I've requested and summarised various feedback from various acquaintances, including;
- Robyn (Yellow): Visual communication student
- Stella (Red): Not related to design, normal user
- Henry (White): Landscape architecture student
- Kevin (Green): Currently working as a front end developer
Summary
Too enhance current progress of EDUO's website design, these feedbacks will be implemented.
Further Research
Chegg
Analysis of Leading Education Website
I've dissected the leading education website, Chegg, and created a flowchart to gain an inspiration for the actual learning contents of the website. However, further modification will be made to design the EDUO's website, so it is more suitable for the high school's teaching team and their students.
Contents Worth Considering
- Recommended books
- Expert Feedback/ proof reading - Too much work for the educator?
- Sell Books
- Practice Quiz
Analysis of Leading Social Media Platform
Instagram, a leading social media platform used by 57% of Australian youth (2021), is a great example to be benchmarked for EDUO as we are aiming to implement the characteristics of social media platforms into the website and increase the engagement of the young students.
Contents Worth Considering
- Upload posts/ stories
- Interact with contents; likes, comments, share
- Message, form group, audio/ video call.
- Log in/ register pages
Flowchart
After benchmarking both leading education website and social media platform, I was inspired to create a final flowchart of EDUO's website. I've gathered and altered the learning tools that were successful in the real educational industries, and implemented the characteristics of the social media platform to increase engagement of students and make learning fun. Furthermore, since this is an initial flowchart, more improvements will be made in further design progress, which will be shown through wire frame.
Student's Website
- Some elements from "My Subject", "Study Tools" and "Library" were inspired by existing educational websites with addition of calendar and time table, which will be an interactable time management tool.
- Posting features, notification, message and profile function were inspired from social media platform with slight alteration that inhibits young students from potently uploading an inappropriate image/ texts.
Educator's Website
The aesthetic elements of educator's website will be same to a student's website, however EDUO provides more features available for the educators. Including:
- Tool to upload learning contents
- View assignments
- Authority to manage students or view their learning progress.
Similar contents were planned for the educator's website but for educators to upload to students.
Social Contents Creation
After planning clearer direction of overall contents of the website, I've decided to research more detailed contents for social functions such as Message tool and notification bar.
Analysis of Message Tool
I've gathered various UI designs of message function and created a mood board to gain inspiration. Some features worth looking into are;
- Simplicity - Minimal varieties of fonts in each design, very simple layout, two-three ranges of colour.
- Hierarchy - Fonts with different weight or opacity creates great hierarchy, making navigation easier.
- Coherency - Colour coordination, similar fonts, etc.
Also, it is important to take notes in numerous functions that these examples have included in their design. These features include:
- Bar to input the texts
- Emoji/ stickers
- Voice mail
- Upload files, images, video
- View profile
- When the messages were sent
- Profile images
- Group text
Design for EDUO
Analysis of Notification Bar
To design a notification bar for EDUO, I've scrapped two very differently styled notification bars to choose from. Referenced example on the left side has minimalistic design with succinct contents, and it is displayed as a small pop-up page. However, the example on the right side is a seperate page with larger size and more detailed contents.
Simple Succinct Notification Bar
- Strength: Easier to see the contents, doesn't take any time to load, simple style (less distracting)
- Weakness: Has to click on each contents to view all detail.
Detailed Notification Page in Seperate Page
- Strength: Can view more detail without actually clicking on each notification.
- Weakness: Requires a seperate page to be loaded, which makes user navigation less convenient.
Design for EDUO
To match one of our key words from this brand's design direction, Simplicity, succinct pop up notification bar instead having it in a seperate page. After gaining inspiration from these examples, rough wireframe for the notification bar was designed using Figma.
Prototyping
After receiving feedbacks for the previous UI design of EDUO, researching and experimenting various features from the leading educational website and social media platform, I've finally decided to start the website design for EDUO. The first stage of this prototype will be constructing a rough wire frame of the full website.
Wire Frame Student
Educator's Features
There will be a few number of functions that's only accessible for the educator's. It is annotated by pink. This features will be added when this project is officially launched, however the prototype will only include student's side of the website.
