1

INTERACTIVE CHAPTER

SQUARE ONE CASE STUDYJL LUM

2

3

C H A L L E N G E

Our original idea was to create an interactive web documentary that profiled the lives of skilled immigrants in Vancouver. We felt that there was a massive talent pool that was being unuti-lized and being able to capture and profile the stories of skilled immigrants would bring more awareness to the issue.

Our team formed rather quickly. When Salim first approached me with the idea I jumped on board and it wasn’t long before Arcelia joined us, offering her services on the video portion of our project. So our roles are as follows:

Salim - Branding & CopyArcelia - CinematographyJL - Interactive & Coding

This was a rather broad topic, so we sat down as a team and began brainstorming. We wanted to ensure that we touched on all the important topics.

IDEA

THE TEAM BRAINSTORMING

4

5

We were fortunate enought to have the National Film Board (NFB) come and present to us at VFS. The NFB interactive site was a big inspiration for us and we wanted to go for that same style and tone for our project. The NFB interactive sites have very original ways of navigating a website yet remain intuitive and easy to use. I wanted our project to have those same quali-ties.

INSPIRATIONWe had little experience on the subject matter and decided to further our understanding by conducting a focus group. We had several skilled immigrants attend and a lot of good stories were shared that night. Most of the attendants that night were newly arrived skilled immigrants, so the stories shared usually revolved around the frustration they felt regarding their ca-reers and adapting to the Canadian culture and lifestyle. We knew we had to reach out to others that had experience working with skilled immigrants in order to gain a better per-spective. Our meeting with Nick Noorani did just that. He gave us great insight and helped guide the message and focus of the project.

We were now more geared towards helping skilled immigrants be prepared for their transition into Canada. From here, it was up to us to divide into our strengths and begin to build upon the project.

USER RESEARCH

6

7

S O L U T I O N

A website was definitely one of the main deliverables for this project, but we still had not decided if the site was to be built in HTML5 or Flash.

HTML5 is the latest trend in web design. The fact that websites coded in HTML5 could be seen on smart phones, iPhones and iPads especially, could not be ignored. We wanted the website to be as accessible as possible. However, HTML5 appears differ-ently on different browsers. We would have to allocate time to debug and accomodate for all the different browsers users might view our website on.

Flash was the staple for seamless and smooth interactions. All of the interactive NFB sites were coded in Flash. Even if it couldn’t be viewed on iPhones and iPads, we felt it was the stronger candidate to produce the visual appeal we wanted the site to have. I also had a little more experience with Flash hav-ing taking some classes on it at VFS.

We also had time constraints to worry about. Once we complet-ed the branding, videos and wireframes, I wouldn’t have been left with much time to experiment with HTML5. Flash was defi-nitely the way to go, at least for now. We plan to keep HTML5 in mind for any future iterations of the website.

Now that we had decided to code the website in Flash. We also had to account for the site’s size and resolution.

1024 x 764 is currently the most widely used screen size. So most of our designs are done to accommodate this resolution. It’s impossible to have our site appear exactly the same in all browsers, so the best solution is to create a fluid site that ex-pands and fits to the user’s browser.

Keeping this in mind, I planned to structure vital parts of the site to float in specific areas of the site. The navigation will always stay centered, the logo will stay top left, the tag line on the top right and lastly the footer on the bottom of the site.

FLASH vs HTML5 SITE SPECIFICATIONS

8

Trailer

Characters

Survival job

Video

Slideshow & narration

Finding work

Video

Slideshow & narration

HR Specialist

Video

Slideshow & narration

Employer

Video

Slideshow & narration

Doctor

Video

Slideshow & narration

Entrepreneur

Video

Slideshow & narration

About Us

FAQ

Credits

Utilities

A site map is vital to the planning stage. I had to know what kind of content would be going into the site so I could begin to break down what we needed to create.

This was our initial site map which quickly grew as more and more content was added to the site. We wanted to have one main navigation structure that leads the user to explore through the stories. Initially we wanted each story to have a mix media of videos and photos, but we later decided it would be more efficient to have just videos broken down into chap-ters.

SITE MAP

9

The initial concept was to play on the theme of loneliness, which we felt every new immigrant might have felt. We want-ed each of them to be seated on chairs in an almost pitch black background, so that it would appear that each person was on their own. But as the user navigates through the site and views more and more, we would reward the user by slowly making the background visible. By watching the videos, the user would then be able to see that all the profiles were sitting on chairs in the same room. The message we wanted to get across is that there are others out there going through the same struggles and that they weren’t alone.

We wanted the navigation to be central with each profile rep-resented sitting in a chair. Each person’s video would also play in an assigned position that was close to their profile. The vid-eos would be blacked out until the user hovered or clicked on a person.

On hover, the person chosen would stand up. On click, the per-son’s video would become visible and play.

We initially really liked the concept but as we fleshed it out more we saw a lot of things wrong with the usability of the site. The videos were too small especially if we were designing the site to be fluid, we would have to make the videos stretch as well, which would distort. The site also looked too compact, there wasn’t much room for the secondary pages.

FIRST CONCEPT

10

SITE MAP + WIREFRAMESI checked in with my mentor, Kristy Streefkerk, frequently dur-ing my site map and wireframing stage. I wanted to ensure that I was on the right path regarding the site’s structure. This stage of planning would be vital to ensure an easy transition to the coding portion of the project.

Kristy provided essential feedback during our meetings and I was able to learn a lot from her suggestions. I made several ad-ditions to the wireframes as the project progressed and some-times it felt like I was working backwards, but its always a good idea to keep track of the changes to ensure that the user’s ex-perience is still fluid and logical.

W I R E F R A M E S

11

LANDING PAGEOur initial wireframe of the landing page. We wanted to have some sort of animated image on the left with the trailer and project summary to the right. An explore button at the bottom of the summary was the call to action for the user to explore further into the site.

In the refined wireframes, I removed the animated image on the left. I felt it was distracting the user from the main focus of this page which was the trailer and project summary.

I wanted the user to get a brief sense of what the project was about and get to the main content of the site which was the videos and information.

12

PRIMARY NAVIGATIONAfter the user clicks explore, they will be taken to this primary navigation which displays a thumbnail of each profile. The 9 squares matches our logo and made a lot of sense for our navi-gation. I have the logo in the center square and I wanted the profiles to swivel along the center square when a user clicked on a profile.

When a profile is clicked, the other profiles will shift to open up a square that will display the clicked profile’s summary. A click on the summary would then open the selected profile’s video story. The video will open in a layer above the navigation.

Social media icons are also to the right of the navigation. This makes it easy for the user to share the site with their friends. Clicking on any of the social media icons will launch the respec-tive page in a new window.

13

PROFILE VIDEO Each profile video would have a scrubber, play and pause but-ton. There would also be arrows so the user could skip to the next or previous chapter. The previous chapter arrow would not be visible on the first video, and the next chapter arrow would not be visible on the last video.

On hover over the arrow, a quick animation would display showing a thumbnailed video of the next video to come. This would allow the user to get a quick idea of what the next video would entail.

Closing the video would take the user back to the primary navi-gation.

14

15

LANDING PAGE FOOTERThe trailer has taken back center stage and is the prominent feature of this page. The trailer will automatically play on load. Users will still have the option to scrub, pause, play or mute the trailer. The summary below the trailer is a very brief summary of the project so that it doesn’t overwhelm the user but gives them enough context on what the site is about.

The background page will be an animated video clip of dif-ferent locations around Vancouver. The backgrounds will be random. We did consider letting the user pick the background they wanted instead of having it random, but we didn’t feel that this wasn’t a particularly useful functionality of the site or served much of a purpose. I also didn’t think it would take any-thing away from the site by having the backgrounds load ran-domly.

Clicking on the top left logo at any time will refresh the page and launch another random background. This will also be the only way the user can get back to the landing page.

The footer has the links to the secondary navigation that will allow users to go directly to that page at any time on the site.

Social media icons are also on the right of the footer. An icon for Square One Project’s facebook, twitter and another icon that will launch a quick pop up that will give a brief description about the current background video.

In the previous wireframes we had the social media icons on the right of the navigation but I felt that was a little too dis-tracting and hierarchically I didn’t want to place too much im-portance on the social media links.

The footer will also remain consistent throughout the site.

W I R E F R A M E S : R E F I N E D

16

17

PROFILES NAVIGATIONThe profiles navigation houses thumbnail images of each of the profiles. The Square One logo has been removed from the cen-ter, which I thought made sense since the logo is already promi-nent on the top left.

The thumbnail of each profile will be de-saturated. On hover, the thumbnail’s color will be visible. On click, the video page will load on top of the navigation.

The bottom right square leads to the secondary navigation which are the links to the secondary pages.

18

19

SECONDARY NAVIGATIONThe secondary page has links to information pages regarding the project. Each link will open up its respective page over the navigation. The bottom right square also operates as a back to videos link. The “Back to Videos” term was used instead of profiles navigation so it would be more obvious to users what navigation they were clicking too.

20

21

VIDEO Each video thats of its respective profile launches over top the navigation. If the video is closed, the user is immediately taken back to the navigation.

The videos will also auto play on load. As soon as one chapter finishes playing, the next video will automatically play. The name of each profile is listed at the bottom left of the video for easy reference.

The thumbnails of each chapter is also below the videos for easy access. The current video that’s playing will have its associ-ated thumbnail highlighted. All thumbnails will also be lowered in opacity except for the current video’s thumbnail. On hover, each thumbnail will have a short description of the chapter.

The thumbnails at the bottom of the video worked much bet-ter then the previous version of the video wireframe where the thumbnails were on top of the video and would obscure the user’s view.

22

23

TRANSCRIPTThe last thumbnail of each video profile will lead the user to the transcript page. This page will have the transcript of each video along with a list of links that the profile might have men-tioned in their video.

The transcript page will allow users to read through the stories again at their own pace. There will also be a printable pdf ver-sion of the transcript so users can familiarize themselves with the terms used and perhaps incorporate it into their own vo-cabulary.

The resources section of the page will also let users follow up on the sites or organizations that the profile listed. This allows the user to watch the videos without feeling like they have to take notes or scrubbing back and forth on the video to get in-formation they might’ve missed.

24

SECONDARY PAGESThe following pages will display the rest of the secondary infor-mation pages. Each page will hold specific information about the project.

25

26

27

28

29

30

31

32

33

34

35

C O D I N G

FLASH CODINGCoding the site in Flash was a great learning experience for me. My mentor Steve Mackey introduced the concept of coding the site using classes. I had previously learnt how to code Flash on the timeline so coding using classes took awhile for me to grasp certain concepts.

Each class would be responsible for certain functionality in the site. The site had over 20 classes and ensuring that everything worked together was vital for the site to run smoothly. The advantage of coding in classes is to ability to debug a little easier. If something went wrong with the code, it was easier to spot the mistake and make the necessary correction.

We coded the site one step at a time. Starting off with the most vital part of the site, the navigation. We also made sure that the site was fluid so that it would expand and fit any browser that the user was viewing the site from. The next step was to create the video class and video background. From there, I used the same principles I learnt to create the secondary navigation page and the secondary pages themselves.

XML was also used to house links, image urls, and copy that was used on the profile pages. This makes the site easy to manage end edit.

36

37

R E S U L T S

SQUAREONEPROJECT.CAThe following pages will display screenshots of the site as of March 24, 2011.

38

LANDING PAGE

39

PROFILES NAVIGATION

40

SECONDARY NAVIGATION

41

VIDEO

42

TRANSCRIPT

43

SQUARE ONE

44

BLOG

45

RESOURCES

46

THE TEAM

47

FAQs

48

CASE STUDY

49

PARTICIPATE

50

CREDITS