Industrial Design

Digital Design

Miscellaneous

Other Projects

Paintbrush Pioneers

Web Systems Development - Group Project
Fall 2023

September - December 2023
6-Person
Web Development, UI Design, and Education project

Paintbrush Pioneers is an art and color-theory education site for children. We created custom education activities, designed the user-interface with the help of Figma, and developing the site with front and back-end development languages.

My Role

I was the user-interface and visual designer, and the lead front-end developer of this project. I also adopted a managerial role, and assisted with presentations and pitches.

My group members built the site’s back-end and secondary pages’ front-ends. They also created the content for the site, such as the custom art activities.

Research & Preparation

Paintbrush Pioneer's core idea stemmed from our group‘s shared interest in art. We all researched webpages and online resources related to visual arts, looking for project inspiration.

We decided to develop a children's art education site with the following intentions:

PRODUCT GOALS

Develops Art and Life Skills

Encourages Real-World Activity

Engaging, Not Addicting

Filters Age-Inappropriate Content

TECHNICAL GOALS

Responsive Sizing
Not all kids have a laptop! Our webapp should be phone and tablet compatible

Easy to Navigate
Kids may be inexperienced with tech. Resources and pages should be easy to find

Visually Appealing
The webapp should use undistracting but appealing colors and thumbnails

Pitches & Brand Design

Leading front-end development, I created a brief, basic brand identity guide, a site map, and wireframe. I first sketched out some basic ideas for a logo and wireframe, and after checking in with my group members, created polished versions using Figma and Procreate.

Sitemap

Visual Identity Guide

Landing Page Wireframe

Activities Menu Page Wireframe

We then presented our project premise and materials to our professor and peers. After receiving significantly positive feedback, we began developing the first iteration.

Project Development & Pitches

Our group used Github to collaborate asynchronously and hosted the site on a Microsoft Azure Virtual Machine. This prototype was intended to display our site's front-end, testing for basic navigability, visual appeal, and findability.

I created the homepage and menu pages’ front-ends using HTML5 and CSS, keeping the 7 Principles of UI Design in mind.

Once our site's front-end was finalized and presented, we began creating content and developing the back-end.

We used Json and Javascript to populate the video and activities menu pages for easy updating, and used PHP and MySql to create a basic login and account system.

Project Conclusion

Although simplistic, I believe this project provided me an interesting experience to further learn about UI/UX development and web accessibility. It was also ranked Best Web Systems Development Project of the semester amongst 17 other projects.