Case Study
Project Overview
In my final year at Fanshawe, I immersed myself in the Interactive Media Specialist program. The journey kicked off with the unveiling of our year-long assignment—the “Thesis Project.” Over the course of the academic year, my focus was on reimagining Fanshawe’s Online application. Witness the clear goal of enhancing the user interface and experience for students navigating the online platform.
Deadline
14 Weeks
Year
2015 - 2016
Skills Used
Case Study
Design Process
This is the design process I used for the Education Online Learning.
Case Study
Brainstorming Ideas
This was my creative process of this project. I ended up printing out diagrams to sketch out the design in my head before I took any of these designs into Sketch 3. I also wrote what I was thinking for the User Experience.
Case Study
Wireframing
This is the wireframing map that was used for User Experience for Education Online Learning. I created this flow in Sketch 3.
Case Study
Colour Palettes & Typography
Roboto – Thin
Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=`~[]{}|;:’”<>,.?/
Roboto – Light
Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=`~[]{}|;:’”<>,.?/
PT Sans – Normal
Body, Sub-Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=`~[]{}|;:’”<>,.?/
PT Sans – Italic
Body, Sub-Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=`~[]{}|;:’”<>,.?/
PT Sans – Bold
Body, Sub-Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=`~[]{}|;:’”<>,.?/
Case Study
User Interface Design
Education Online Learning FOL Case Study Redesign Gallery. Please click on the first ‘Welcome To My FOL’ screen and it will open up the gallery with full image sizes.
Case Study
Prototyping
The prototyping phase was in progress during the design of the user interface. I would create screens and subsequently integrate them into a prototyping tool, utilizing the Sketch 3 Mirror App. This application proved instrumental in testing button sizes and assessing the user experience of pressing on various buttons. It also served as a valuable tool for ensuring the accurate placement of objects within the interface.
