First Nations Support
Creating a Support Hub Landing page in Canvas
Company
University of Sydney
ROLE
Designer/Developer
TIMELINE
3 Weeks
PLATFORM
Canvas LMS
User Research
First Nations Yarning session suggests a tailored Canvas Support Page
This project involved previously a conducted yarning session with First Nations students across health sciences at the University of Sydney and a resource they suggested was a tailored Canvas page that provides all information needed for their studies in addition to their face to face supports at centres and through faculty student liaison academics.
Background Research
Breaking down the brief for guided research and direction
The project involves creating the Landing Page through Canvas for First Nations Allied Health Students. It is a smaller part in the greater, One Sydney Many People Strategy which aims to create a stronger and more accountable partnership Aboriginal and Torres Strait Islander peoples. As a means to understand the brief, key points were identified as focal areas for the design phase.
Scalable
Adaptable for future resources and changes as the page evolves
Responsive
Resizable across all screens to ensure a seamless experience
Accessible
Aligns with accessibility standards while prioritising usability.
Quick flows
Easily guided to the right endpoints with minimal effort.
Welcoming
Creates a warm and inviting experience upon entry.
Future Handoff
Ensure easy and organised adjustments for future staff
Further Research
Understanding First Nations contexts and Content hubs
Designing the page required a solid understanding of First Nations peoples and their contexts, lived experiences and systemic barriers. This informed a respectful and accurate foundation for the content. Additional research was conducted on content hubs to identify the most effective structure for presenting information clearly and accessibly.
First Nations Contexts to Consider
The Hub and Spoke Content Hub
Ideal for a small set of content featuring a central hub with related topics branching out. It’s flexible for general or evolving subjects, helping users explore information easily.
Branding and Guidelines
Following the University of Sydney Branding and Commissioned Artwork guidelines
In creating the design, it follows the University of Sydney branding. It incorporates the primary USYD Ochre colour, Lato font as used in Canvas, and USYD iconography with thin strokes. Complementing these styles is a commissioned First Nations artwork, available for use to ensure cultural respect and adherence to guidelines, supporting the overall visual direction.
ARTWORK
COLOURS
#E54726
#FEF5F0
#FFFFFF
#141414
TYPOGRAPHY
ICONOGRAPHY
Ideation and Wireframes
Exploring ideas through sketches and wireframes
The next step involves sketching ideas and creating wireframes for rapid ideation. A visual top banner, paired with an adaptive 2/3 column grid for buttons established a solid foundation for the design. Other elements and components were also considered at this stage, with the aim of building for scalability while maintaining the visual direction and supporting previous design goals.
Sketches
Wireframes
HIGH FIDELITY
Advancing toward a polished Landing Page
At this stage, a full high fidelity prototype was created for both mobile and desktop. Each section of the design was transformed into components, ready for development in Canvas. Personalised sections, such as ”I Need Help With…” and the ”Gadigal Centre”, were added to provide a more student focused approach, significantly enhancing the page’s usability and relevance.
Mobile
Desktop
Development
Building the page in Canvas amidst platform constraints
At this stage the page was developed in Canvas, primarily using HTML with inline styling. A key challenge was that Canvas overrides standard HTML and behaves differently from typical web development environments. Its limitations required careful adaptation of the design especially through mobile viewports, making it difficult to replicate the Figma prototype exactly. However, with some workarounds and Canvas specific styling, the final result closely matches the intended design.
Developer Mode
Preview Page
Documentation
Code documentation and future use
The documentation stage was straightforward, involving saving the code and outlining the challenges encountered, as well as instructions for using the produced code. This step was essential as the project is part of the broader One Sydney, Many People strategy and will be adapted and updated by staff as the initiative evolves.
Documentation
Mockups
The finalised Canvas Landing Page for First Nations Students
The final result is a functional, inclusive, and welcoming content hub designed to support First Nations students throughout their studies. It combines thoughtful UX design, adherence to University of Sydney branding, and a deep understanding of First Nations contexts to create a user-friendly experience that meets both student needs and project goals.
Reflection
What was challenging...
Looking back, the development phase of this project was both challenging and eye-opening. Coding the page in Canvas proved more difficult than anticipated, as the platform often altered the code and behaved differently from typical HTML. In hindsight, spending more time with Canvas tutorials before diving in could have alleviated some of these challenges and made the process smoother.
Canvas also presented limitations in what could be implemented, requiring the design to be adapted to fit within the platform’s capabilities. This was a valuable lesson in flexibility, that real world projects rarely present everything upfront, and you often have to make the best of the tools and information available. Additionally designing for a broader project without every detail outlined, pushed me to think creatively and make practical compromises, all while keeping the user experience at the forefront.
Despite these hurdles, following a structured design process worked really well. The project flowed smoothly through research, ideation, and prototyping and the unexpected challenges only appeared during the development stage. This experience reinforced the importance of adaptability and patience, showing that strong design processes provide a solid foundation even when real world constraints arise.