BusTalk

This is the final project of the course: Multimedia Storytelling. Nathan is the most friendly bus driver I have met. I had a pleasant bus talk with him on the bus 49 he drove and decided to tell a story about him and what I experienced in the story.

Background

"The universe is full of gifts." You might get inspired by one thing, an object, a person, a story and ... Walk around, observe your life, talk to people and listen to their stories. Then you will notice that every ordinary person might have an extraordinary side of life.


Nathan is a bus driver, and... Do you want to know another side of his life? Let's begin this story.


Quick Facts

My Roles:
• Interview
• Video Edit
• Content Edit
• Graphic Design
• Web Design
• Web Develop in Adobe Muse

Team:
Independent project

Time:May, 2015

Deliverables:
An immersive storytelling website with parallax effects

Have a look at the BusTalk website!


PROCESS

Design process

RESEARCH

The story began with a business card. As other passengers on Bus 49, I enjoyed the cozy and joyful environment that Nathan built on the bus. Nathan liked to interact with passengers through his microphone, just like a DJ. Therefore, I reached out to him and got his business card.


From this business card, I found his personal website, and got to know that he was a UW alumni, which aroused my interest a lot. Then I did more online research and found several articles about him written by some other people including a journalist and a couple of students.


After the series of research, I came up with some main topics and set up an interview with Nathan. It was a relaxing and casual talk between friends.


Thanks to Wenwen Song for taking photos and recording for the interview.

Interview

Interview

IDEATION

After synthesizing all the materials, I began to ideate the story and draw the wireframe of the story website.


I was thinking to make a parallax website with the background of film scrolling and switching when reader scroll the mouse. However, after browsing several awarding websites for these two years, I noticed that flat design, material design and bright colors were popular. Therefore, I decided to abstract the concept of film, and transfered it into switching cards.


Wireframe

Wireframe

DESIGN & BUILD

I decided to use Adobe Muse for building the website, because I can make the parallax effects on it without complex coding, which was more feasible under the time limitation. I learned the basic knowledge of Adobe Muse and then searched some tutorials on YouTube to accomplish the exact effects I wanted. It was challenging but fulfilling.


I built the wireframe and motion of the website at first to make sure I could implement my design from the technical perspective. Then I started to design the graphics and detailed layout with the confidence of confirming that I can make my design come true technically.


It was the first time that I drew a lot of complicated graphics in a short period. In case of running out of time, I assigned daily design tasks to myself for a whole week, and finished some everyday.

Graphic design

Graphic design

Graphic design

FINAL OUTCOME

I presented my website and told the story on the class. Many classmates asked me about how I designed the website, how long it took, and expressed their fondness of Nathan.

Website Screenshots

Website screenshots

Website screenshots

Website screenshots

Website screenshots

Website screenshots

Website screenshots

Try the Website




Thank you! ^___^