Education Platform
FlipRobot
Education Platform
UX/UI Design | Site Planning | Content Writing | 2018-2019 | Visit Site
FlipRobot is a STEAM education solution provider who is looking to build a platform that not only showcasing the product but also providing an online-offline learning solution for teachers; And a place for the students to discover numerous robotics projects. Thereby, build up a social network for teachers and students to explore and connect to each other.
User Research
Understanding your users
As FlipRobot has aimed to merge an existing official website and a customer portal, and make a cloud-based platform instead. To clarify this goal, I started out with user research of FlipRobot’s target customers: teachers and students with user research methodologies.
Key Takeaways
After making these user research, I picked some of the keywords to make sure the functions that will appear on the website. The keywords were aligned according to the importance of the functions.
Breakdown Into Functions
There are some functions that we can see from previous research; click to see more details.
User Interface Design
Distinct users and actions
by colors
While making flow charts and wireframes, I realized that there were functions and interface overlapped between teachers and students. So that means they’ll share the same user interface. Then I decided to make distinction base on colors. As it’s more obvious and intuitive. And of course a lower technical cost. And this color code will be implant throughout the whole website and CIS, and eventually became a brand language.
Rounded angle says:
“Hey, I’m friendly!”
There were lots of blocks used throughout the website; buttons, cards, containers, etc. The reason of using round corners was not only because it looks beautiful, but also friendly! According to the “Cognitive Load Theory,” rounded angle makes the information easier to process from our eyes to brains. And more importantly, it matches the brand image of FlipRobot that they tend to deliver a professional yet friendly impression.
#Academic #Trustworthy
#Professional #Refreshing #Friendly
#Energetic #Encouraging
#Challenging #Vivid
#Young
“Playful Cards”
content system
FlipRobot has three existing contents that are their crucial products: “FlipCurriculum” contains teaching materials for teachers to learn and teach, “FlipProjects” are robotics activities for students to explore and get inspired; “FlipBlog” introduces FlipRobot’s other professions which includes: teaching observations, feedbacks from teaching field, life technology, and press. These three contents were allowed to share similar interface by distinguishing them with the color system.
“Converge, converge…
and converge”
As we all believe that landing page plays a crucial role in a website; it determines whether your TA stays or leaves within seconds. So then the team tried to tuck everything in: product slide show, curriculum, 3D characters, projects, to infinity and beyond. Eventually I managed to converge the landing page down to only 5 sections. Where I decided to focus on elaborating FlipRobot core value and what makes us “the most trusted STEAM education provider.” Because I believe these are what attract people who shares the same values.
Outcome
The way you say it
The platform has gone live, feel free to take a look at our product: FlipRobot Education Platform.
It was my first UX/UI project and there were a lot of imperfections. But I've also learned that it is more important to make your product go live so it can be tested by the users, rather than design it only on papers. The process of converging was a lesson that I've learned it the hard way; Communication matters. It is important not only what you say but how you say it; Whether you can minimize your point and make it clear; Be the one who reminds everyone our main purpose, because as a project owner, you have to know the best. This project helped me grow quite a lot, and I've managed to improve my weaknesses and learn from others. Quite an experience.