Janelle Chandass

Digital Design + Development Post-degree Diploma
2023 Post-graduate

Any activity that allows me to use my imagination, be it writing a story, holiday craft, art, or plating a dish, makes me happy. Doing them with my family is even better. Throughout my career  as an educator, learning new things was a part of the job description but it goes beyond that for me. If I don’t learn and explore I feel stagnant. So, I chose to build on my studies in computer science, experience teaching IT and love of art, to explore graphic and web design. I use several tools and languages, including Adobe Creative Cloud, CSS and Javascript. Having technical skill is important, but it is my drive, communication skills and attention to detail which ensure my success. I am excited to continue on my learning journey and hope that other people enjoy my creative work.

Connect with Janelle on LinkedIn.


Capstone project

Wave DS

Wave DS is a design system which was developed for a fictitious company, Caribbean Chef. Wave DS was built with the purpose of providing a comprehensive set of guidelines and elements for development of all Caribbean Chef’s digital products. Wave DS caters to designers and developers of all levels, providing clear and concise explanations, images of what each element should look like, code via CodePen links as well as access to a demo website.

One of the first steps in the design of Wave DS was to create a moodboard that  conveyed the Caribbean Chef ‘feeling’. This was an important step since it would indirectly speak to style elements such as color and typography.

Mood Board

Elements most commonly used in digital products were selected for the design system and categorised.These categories and the elements within them became pages and sub-pages of the design system. Grouping elements was a way of helping developers find elements easily and reduce the number of onscreen navigation items. For example, buttons, breadcrumbs and navigation bar were all grouped under Navigation.

Site Map

Wireframes, for both Wave DS and Caribbean Chef, were created using Adobe Illustrator. HTML, CSS and vanilla JavaScript were used to build the design system. The basic structure of the design system was created, then components were coded in individual CodePens which were embedded into Wave DS.

Desktop Wireframe

Throughout the development of the design system small, incremental changes were applied, committed then pushed to a GitHub repository to provide rollback points that could be used to easily restore the project with minimal loss of time and work.

The decision to use CodePens allows easy modification of element code by Wave DS developer/s and simultaneous update of code on the design system without impacting code structure of the design system.

The accessibility and performance of Wave DS and Caribbean Chef were both important considerations in the development process. Features were added to improve accessibility, such as form validation features, alternative text and captions for images and skip focus buttons (demo site). To improve page performance: images were converted to webp format.

Performance Report

I enjoyed planning both the design system and website and thought more detail could have been added in specific areas such as guidelines for spacing and typography. But, given deadlines and a budget, every developer has to learn to produce a solid functional product. The things that helped me to do this were reading and re-reading requirements, managing my time  and taking notes everytime someone spoke. I appreciated working within a team and I think I learnt how to provide and receive constructive criticism and hearing others critique my work was where I had most learning and growth.

Demo Site

Interested in hiring one of our graduates?
Get in touch and we’ll connect you.

Check out other student projects from the same year: