Problem

Creative education in the modern context is usually associated with STEM kits, subscription-based programs, community learning centers, hackerspaces, etc. While these concepts are valid for a developed-world setting or urban areas, they are either not accessible or sustainable in resource-constrained environments. There is a lack of tools, resources, internet connectivity, and capacity of teachers. Creativity, in general, is far less of a priority in traditional classroom settings within those environments.

Solution

Unstructured Studio wanted to continue building on ZubHub, a hub of creative hands-on projects built with low-cost materials, activity ideas, and an awesome community of kids and educators. On ZubHub, any child anywhere will be able to join, get inspired by the collection of ideas and peers' projects, build with low-cost materials and tools available around them, and share their creations with others. 

We worked to improve the Zubhub app by adding additional features to parts of the site. We implemented notification events for the whole site, added additional project creation functionality, revamped search behavior, and finished many other related features. We identified areas of improvement in design and fixed them.

Design

ZubHub’s user base includes mostly children from different areas ranging from rural to metropolitan. Because of this, we aimed to create an experience that guides the user through the website step by step while encouraging them to explore its many projects. 

To do this, it was crucial to understand the end goal as well as create an efficient and cohesive user experience on both a web and mobile interface. This impacted the way we viewed new and pre-existing features and how they affect the usability of the website. 

Tech Stack

Zubhub is a full-stack project using React on the frontend with Django on the backend. The frontend also consists of a component library called Material UI for rapid development and consistent design. The backend is composed of various services like the PostgreSQL database service, Celery service, RabbitMQ service, etc. Docker Compose is used to containerize all parts of the application and provides a network for inter-service communication.  For user notifications, the project uses Twilio’s API and supports channels like email, SMS, and WhatsApp.

Features

Notification Events

Helping tinkerers connect is a major goal of Unstructured Studio's ZubHub, and we helped them improve at this effort by developing a custom notifications system. Like social media platforms, users receive on-site alerts for events like project comments and likes in addition to new followers. These notifications are visible in a dropdown from the navigation bar and include helpful details about any unread information. Users can also enable SMS, WhatsApp, and email notification channels if they wish to receive notice of events in a more familiar fashion.

Project Creation

At ZubHub's core, the ability to post creative and innovative projects is what makes it such a powerful tool for tinkerers across the globe. We worked to make the project creation process smoother and safer for all users, starting with a project drafting system to provide a place to save good ideas that aren't quite finished yet. In addition, we added an autosave system to the new drafts feature, which helps ensure internet issues don't make projects disappear unexpectedly. Lastly, our understanding of most projects posted on ZubHub led us to a beneficial quality of life improvement: video compression for all project videos. Both reducing video playing bandwidth and decreasing video storage space, this change ensures ZubHub is efficient now and will scale well for years to come.

Project Discoverability Improvements

Equally as important as ZubHub's project posting system, project discoverability helps give the site life in showing just how many unique projects there are to view and try. We made significant changes to several ZubHub components to make sure project discovery was front and center. First, we added several search filters that allow users to search for projects, creators, and project tags in the same search bar. The search UI itself was also updated to include project thumbnails and creator profile pictures. Users also had trouble bouncing from project to project, which is why we added a recommended list of projects on both project pages and before posting. Lastly, we wanted to promote shareability as a way to have ZubHub's reach extend past its existing domain, so we added several different types of sharing options across the site.

Moderator Edit Capabilities

With an understanding that ZubHub's user base consists primarily of children, we recognized that content moderation is of even more importance than other online platforms. We took the initiative to improve the state of moderator capabilities on ZubHub by giving moderators the ability to edit projects and unpublish them if they violate community guidelines.