Ryerson_SDC_Banner_2

RYERSON UNIVERSITY

Ryerson University

Ryerson University

Science Discovery Zone

Science Discovery Zone

Science Discovery Zone

Zone Learning is a tool that the students at Ryerson University’s Faculty of Science can use to shape their educational experience in a unique way.

These zones are used as a networking tool that allows students to meet and connect with individuals who work within these industries. 

Zone Learning is a tool that the students at Ryerson University’s Faculty of Science can use to shape their educational experience in a unique way.

These zones are used as a networking tool that allows students to meet and connect with individuals who work within these industries. 

Zone Learning is a tool that the students at Ryerson University’s Faculty of Science can use to shape their educational experience in a unique way.

These zones are used as a networking tool that allows students to meet and connect with individuals who work within these industries. 

Duration

Duration

Duration

4 Months, 2017

4 Months, 2017

4 Months, 2017

Role

Role

Role

Web Design
UI/UX Design

Web Design
UI/UX Design

Web Design
UI/UX Design

Tools

Tools

Tools

Adobe Creative Cloud
Sketch App
Pen & Pencil

Adobe Creative Cloud
Sketch App
Pen & Pencil

Adobe Creative Cloud
Sketch App
Pen & Pencil

Interested in how this project was created?

Interested in how this project was created?

History & research

History & research

     How do we create
an engaging space
      for students?

     How do we create
an engaging space
      for students?

     How do we create
an engaging space
      for students?

Problem

Problem

The Science Innovation Zone was set to be an intellectual and physical space that provides students with real world problems. The team challenged me to provide the students and industry with information on how to actively get involved.

The project was later renamed the Science Discovery Zone (SDZ) in it’s later stages.


The Science Innovation Zone was set to be an intellectual and physical space that provides students with real world problems. The team challenged me to provide the students and industry with information on how to actively get involved.

The project was later renamed the Science Discovery Zone (SDZ) in it’s later stages.


Proposed Solution

Proposed Solution

Our solution for creating a more engaging space for students in the department of Science to engage with mentors and the industry was to create a virtual space for them to connect.

This included creating a website that provided them with information about the Zone, important events and how to join. Additionally, when join, they would be taken to their school’s website to login with their academic credentials.


Our solution for creating a more engaging space for students in the department of Science to engage with mentors and the industry was to create a virtual space for them to connect.

This included creating a website that provided them with information about the Zone, important events and how to join. Additionally, when join, they would be taken to their school’s website to login with their academic credentials.


Project Management & Site Architecture

Project Management & Site Architecture

The site architecture for the website was kept simple to allow users to get to their desired destination in the least amount of time possible.

The site architecture for the website was kept simple to allow users to get to their desired destination in the least amount of time possible.

Proposed Mockups

Proposed Mockups

Throughout the process of creating the microsite, three mockups were proposed to the executive team in the Department of Science. These two were pitched mockups that was a traditional version of a website.

Throughout the process of creating the microsite, three mockups were proposed to the executive team in the Department of Science. These two were pitched mockups that was a traditional version of a website.

Ryerson_SDZ_Wireframing_01
Ryerson_SDZ_Wireframing_02

Approved Mockup

Approved Mockup

Approved Mockup

The SDZ team decided to approve a mockup with a more radical approach. To engage its users, we decided to go with a horizontal scroll website that uses illustrations and micro-animations to make the website feel more youthful.

The SDZ team decided to approve a mockup with a more radical approach. To engage its users, we decided to go with a horizontal scroll website that uses illustrations and micro-animations to make the website feel more youthful.

The SDZ team decided to approve a mockup with a more radical approach. To engage its users, we decided to go with a horizontal scroll website that uses illustrations and micro-animations to make the website feel more youthful.

Ryerson_SDZ_Wireframing_03

Final deliverable

Final deliverable

Final deliverable

Final deliverable

Final deliverable

Discovering Ryerson's 
New Science Zone

Discovering Ryerson's 
New Science Zone

Discovering Ryerson's 
New Science Zone

Discovering Ryerson's 
New Science Zone

Discovering Ryerson's 
New Science Zone

A online space dedicated in bringing together Ryerson's students, industry and mentors. A clean and minimal design was introduced to capture the spirit of Ryerson and Downtown Toronto.

A online space dedicated in bringing together Ryerson's students, industry and mentors. A clean and minimal design was introduced to capture the spirit of Ryerson and Downtown Toronto.

A online space dedicated in bringing together Ryerson's students, industry and mentors. A clean and minimal design was introduced to capture the spirit of Ryerson and Downtown Toronto.

A online space dedicated in bringing together Ryerson's students, industry and mentors. A clean and minimal design was introduced to capture the spirit of Ryerson and Downtown Toronto.

A online space dedicated in bringing together Ryerson's students, industry and mentors. A clean and minimal design was introduced to capture the spirit of Ryerson and Downtown Toronto.

Ryerson_SDZ_Mockup
bg_graphics_1
bg_graphics_2

Animations

Animations

Animations

Animations

Animations

As a horizontal-scrolling webpage, we wanted the imagery to feel like it was apart of the story we were trying to tell. 

Animations were added to help convey the message of connecting the industries together.

As a horizontal-scrolling webpage, we wanted the imagery to feel like it was apart of the story we were trying to tell. 

Animations were added to help convey the message of connecting the industries together.

As a horizontal-scrolling webpage, we wanted the imagery to feel like it was apart of the story we were trying to tell. 

Animations were added to help convey the message of connecting the industries together.

As a horizontal-scrolling webpage, we wanted the imagery to feel like it was apart of the story we were trying to tell. 

Animations were added to help convey the message of connecting the industries together.

As a horizontal-scrolling webpage, we wanted the imagery to feel like it was apart of the story we were trying to tell. 

Animations were added to help convey the message of connecting the industries together.

Ryerson_SDZ_Microanimation-2
SDZ_Illustration

Illustrations

Illustrations

Illustrations

Illustrations

Illustrations

The illustrations were made to be clean and minimal.The colours used used to be reflective of the Ryerson brand.  

The illustrations were used to strengthen the message of connecting students to the industry by using popular architecture and imagery throughout Downtown Toronto.

The illustrations were made to be clean and minimal.The colours used used to be reflective of the Ryerson brand.  

The illustrations were used to strengthen the message of connecting students to the industry by using popular architecture and imagery throughout Downtown Toronto.

The illustrations were made to be clean and minimal.The colours used used to be reflective of the Ryerson brand.  

The illustrations were used to strengthen the message of connecting students to the industry by using popular architecture and imagery throughout Downtown Toronto.

The illustrations were made to be clean and minimal.The colours used used to be reflective of the Ryerson brand.  

The illustrations were used to strengthen the message of connecting students to the industry by using popular architecture and imagery throughout Downtown Toronto.

The illustrations were made to be clean and minimal.The colours used used to be reflective of the Ryerson brand.  

The illustrations were used to strengthen the message of connecting students to the industry by using popular architecture and imagery throughout Downtown Toronto.

Full Website Walkthrough

Full Website Walkthrough

Full Website Walkthrough

Full Website Walkthrough

Full Website Walkthrough

As the user navigates through the website, each page explains how each aspect of the project connects with the others. The navigation is placed on the left side for easy access to each section. 

As the user navigates through the website, each page explains how each aspect of the project connects with the others. The navigation is placed on the left side for easy access to each section. 

As the user navigates through the website, each page explains how each aspect of the project connects with the others. The navigation is placed on the left side for easy access to each section. 

As the user navigates through the website, each page explains how each aspect of the project connects with the others. The navigation is placed on the left side for easy access to each section. 

As the user navigates through the website, each page explains how each aspect of the project connects with the others. The navigation is placed on the left side for easy access to each section. 

Say Hello!
Let's create something beautiful together.

Say Hello!
Let's create something beautiful together.