Project Brief
This project involved designing and building a new website layout to showcase the University of Alberta's Embedded Undergraduate Certificates. I created both a centralized landing page and 17 individual certificate pages using Figma for mockups and Cascade CMS for development. The goal was to present these new certificate offerings in a way that felt cohesive, informative, and easy to navigate.
Goals
The primary goal was to bring awareness to a new set of programs - the Embedded Undergraduate Certificates. We needed to make them feel distinct yet consistent in visual feel with the university's existing web presence. We wanted to make these offerings visually engaging and easy to find, especially for prospective or current students browsing through program options.
Limitations
There were several limitations:
Variable content length
Some certificates only had a few prerequisites or details, while others had more extensive descriptions and course lists. I had to design a flexible page structure that worked for varying page lengths and prerequisite combinations.
Total certificate count
Initially, I received details (copy and icons) for only nine certificates, but we were prepped that more would be incoming. Whatever design I came up with needed to (within reason) accommodate a large number of certificates.
Limited opportunity for direct user testing
Although students were the intended audience, we couldn't directly test the layout with them during the design process.
Timeline
The project ran from January 31 to February 28, 2025, making it about a month-long effort. As with any agency-style environment, I worked on it alongside other ongoing projects I was managing at the time.
Tools and Technologies
I used a combination of tools throughout the design and build process:
Prototyping + Design
- Pencil and paper for quick wireframing and ideation
- Figma for creating mockups and visual layouts
Development
- Cascade CMS for content management and final implementation
- Bootstrap as the framework for layout and responsiveness
- Font Awesome for selecting icons that visually represented each certificate
- University-provided images to help align with institutional branding
Team
This project was largely a solo effort on the development and design side, with me acting as both designer and developer. My partner through it was Debbie Yee, Partner (Academic) (Communications and Marketing) for this project with Admissions. She provided the finalized copy, passed previews to the clients at Admissions, and sourced the initial icon assets for the design and build. Lastly, I turned some of the headings in the provided copy to be more declarative and web-appropriate headings.
Skills Used
- Design: Layout creation, visual hierarchy, iconography
- Development: HTML/CSS implementation, CMS integration, responsive design
- Ideation: Early-stage sketching, problem-solving for layout flexibility
- Prototyping: Creating mockups in Figma that could scale across content types
Process
The project started with research into existing offerings from the university like Experiential Learning to see what design patterns were already in use. I then sketched a few layouts on paper to think through flexibility and hierarchy - things that were especially important given the uneven content lengths across certificates.
From there, I designed a Figma prototype that combined institutional patterns from another certificate offering with new visual elements to distinguish these new certificates. I shared this with my marketing partner, and we worked together to refine the content structure so they were better suited to how people browse content online.
Once the layout was finalized, I built out the landing and certificate pages in Cascade CMS using Bootstrap and integrated iconography via Font Awesome. The final product aimed to be both scalable and clean, with room to add additional courses as directed by the faculties or departments.
Outcomes
The final deliverables for the project was a central landing page featuring 17 embedded undergraduate certificates, as well as a responsive layout template that could handle the copy demands of the 17 individual certificates.
View the Embedded Undergraduate Certificate homepage, or some of my favourite certificates: Applied Data Science, Planetary Health, and Translation Studies.
What's Next?
More undergraduate certificates are a part of the university's goals of increasing enrolment by over 35% by 2033. The structure we designed and built is flexible enough to be used on other university pages - if other faculties and/or departments wish to begin offering these certificates, the template and design allows them to do just that.