Building a Community Platform for Education from Scratch

The idea behind TigerJython Community was to build a platform which serves as an information hub for TigerJython products and also has a community area where students can share their projects, and have discussions of new ideas.

My Bachelor's Thesis' project was mostly focused on the technical aspects of the platform. Most of the design work was not part of the requirements and I just did it for fun. In this article, I will only talk about the design part of the whole project. If you are interested in the technical part as well, I have attached my Bachelor's Thesis below. Before I start, I want to add a small disclaimer. You always have to bare in mind, that the branding created in this process is not the official brand guide of TigerJython. It was just a fun side project next to the Bachelor's Thesis. Also, I will continue the article in the third person plural even though it was all done by myself, since the thesis is written in this form as well. Now, let's get started.

At the start of the project, we mostly spent time gathering information of competing platforms and analyzing this information. In addition to this information, we could find suitable personas of our target audience. With help of this information we were able to a requirements file which not only covered the functionality of the platform, but also the requirements for the user interface.

TigerJython Community has two quite different user personas. One are the users using the community area, which are generally in the range of ages 12 to 18. The other are the users who make use of TigerJython Community as an information hub of all TigerJython related stuff. Those users are mostly parent or educational personal such as teachers. So we had to find a user experience and visual language which can cover both user groups well in both visual design and user experience, which turned out to be quite challenging, especially on mobile devices.

First, we had to get a clear understanding of the brand itself. TigerJython Products so far, had a bit of an outdated design. So there was not much in the way of doing a complete rebranding of TigerJython itself. We chose the topic Tiger and Jungle, based on the name. Next to the logo and smaller design elements, we also created a mascot. The mascot depicts a tiger as teenager to empathize the general age of TigerJython's users. The full brand guide created in the process is attached below.

New TigerJython Logo - using the T with tiger scratches

A big part of the thesis was analyzing and organizing all all the content of the platform. For this we first create a rough structure of all the subpages and how they are connected. This way we could already sort the contend roughly and could better concentrate on details on each part of the platform. Based on the information architecture we then created user flows to analyze the possible paths a user could take when navigate through the system. I attached the complete user flow study below, if you are interested. After organizing all the content and analyzing the user flow, we proceeded with created a user interface.

The user interface was a bit of challenge, since it had to be interesting for children between age 12 to 18, but also for parents and teachers. So it had to be a clean and modern design with a bit of playfulness to be attractive for the younger audience but also not too much such that it can still be taken serious by educators.

With the user interface we followed the mobile first approach. This is because today the larger part of the Internet users are on mobile devices, and this is especially true for main user group, the students, of this platform. We started with wireframing all the different parts of the platform. We already created Hi-Fi prototypes with the wireframes to make sure we had a easily understandable user interface and a good user experience early on. The main challenge with the user interface was the different needs for the two parts of the platform. The information hub and the community platform have two quite different needs in usability. The community platform has to be inviting to the user to share and explore, whereas the static parts have to provide the sought information. So we decided to have different menus and navigation for those two parts.

Wireframe example for the adaptive header and footer navigation on mobile devices

After we had all the wireframes we proceeded with the mock-ups. As already defined in the visual language, we used a mix of bright colors and white background. Overall the design should look clean an modern, but we spiced it up a little with some Jungle elements and our mascot, the tiger. Since we had the break in the interface between the two part of the platform we tried to connect them with design. So we tried to find a consistent usage of the colors and design elements between all the pages to create a consistent feel.

TigerJython Community Desktop Landingpage Design
Vielleicht gefällt Ihnen auch