Living the UC Davis Life

An online parallax project graphically displaying life as a UC Davis student.

Overview

"Living the UC Davis Life" is an illustrative storytelling interface that takes the user through student experiences in Davis from freshman year to graduation. Additionally, users can input notes describing their personal experiences in the city. Per request from the City of Davis, the visual elements are inspired by the Davis Centennial Seal, a bronze seal portraying current and historical elements of the city. The final project is hosted online through GitHub.

Duration: 2 months

Tools: HTML, CSS, JS, Adobe Illustrator, ScrollMagic library, GSAP library, Back4App

Project Setting: Independent capstone project

Role: UX Researcher, UI/UX Designer, Front-End Developer

Target Audience

This project's intended audience is incoming, current, and past UC Davis students aged between 18 to 30 years.

Goals

• Take the user through a journey
  
• For incoming students, introduce a glimpse of what living in Davis is like
  
• For current or past students, induce familiarity or nostalgia about living/having lived in Davis
  
• Fun, visual-heavy interface
• Scroll animations achieved with a JS library

Research Process

Preliminary Research: Seal Visit

I visited the seal which this project was inspired by in downtown Davis. Rather than the historical elements, I was drawn more to visuals that represented daily-life aspects of Davis. This included taking the Unitrans (bus), biking through the city, and taking a trip through the Arboretum.

Comparative Analysis

I reviewed 2 parallax interfaces: 

"Every Last Drop"

Every Last Drop brings awareness to water waste in the UK. The use of many colors, friendly illustrations, and motion of the elements creates an engaging interface. The details of the transitions are well throughout, from the background changes to the outfit changes of the character. Despite this, I don't believe the impact of water waste is highlighted well enough. The text that accompanies the visuals is small and can be easily dismissed.

"The Boat"

The Boat is in the form of a graphic novel about Vietnamese refugees. Compared to "Every Last Drop", this piece has a lot more motion with the raindrops coming down on the entire screen. The music and sound effects set the tone for the story. Movement that occurs in sync with the sound effects, like the sudden movement of the image and text when thunder strikes, makes the experience a lot more engaging. Although the theme and color scheme are very consistent, the text can sometimes be difficult to read due to a lack of contrast.

Target Audience Interviews

Current Student

Leon is a UC Davis senior majoring in Neurobiology, Physiology, and Behavior. He only spends about a third of his time outside, which is generally on campus. Although Davis has an abundance of local businesses, many of his favorite off-campus locations were chains (like Safeway and TJ Maxx). Despite this, his favorite activities were unique to the city, like spending time in downtown to shop and eat, the farmers market for produce and apple juice, and the arboretum to watch ducks and squirrels.

Past Student

Bukre is a UC Davis alumni who graduated 5 years ago with a degree in Cell Biology. Similarly, most of her time spent outside was on campus, attending classes or her internship at the time. She emphasized that her experience in Davis was mainly shaped by academics rather than socializing. In fact, she described her representation of Davis as a "cow in an OChem lab wearing goggles and a lab coat". Some of her favorite locations were the arboretum to take a break from classes, a boba shop to grab drinks with her roommates, Sam's Mediterranean for burgers, and Hutchison parking structure to watch the sunset and attend club meetups.

Design Process

User Journey

Peer Feedback:

• Does the entire screen move at once, or do the individual elements move on their own?
• How does this project relate to the Davis Centennial seal?
• Can consider including visuals of major Davis events, like the various festivals held on campus

Paper Prototype

Peer Feedback:

• unsure of whether she must continue "scrolling" as animations are moving
• intuitive that I am portraying the undergraduate experience at Davis from freshman year to graduation
• suggested possibly using both photographs and illustrations in the final product, similar to a collage or scrapbook

Wireflows

Parallax

User Input

Sketch

Interactive Prototype

At this point, the illustrations were still rough representations of the final elements. I created this prototype, at the time, for mobile because I intended to make the interface responsive to both small and large screens.

Visual Design

Typography

Header1 Pangolin 32px

Header2 Pangolin 24px

Paragraph Pangolin 18px

Buttons Pangolin 16px

Style

I wanted the illustrations to look like paper cut-outs, making the entire interface look like a construction paper project.

For example:

Web Development

Version 1

Progress: With the help of 2 JS libraries, the horizontal animations are triggered as the user scrolls. At this stage, the illustrations are still placeholders.

Challenges:

• testing out multiple JavaScript libraries to figure out which one would accomplish horizontal animations while maintaining a vertical scroll
• understanding how to use ScrollMagic and GSAP libraries to trigger horizontal animations
• returning to the initial title scene once the user clicks 'Start Over'

Version 2

Progress: I started implementing the construction-paper design look to some of the illustrations. Clicking the 'Start Over' button now takes the user back to the starting scene. I added an additional button, 'Davis is my Home...', which opens a form where the user can leave a note about their personal experiences in Davis.

Challenges:

• could not figure out how to keep the bike sticky while the user scrolls through the scenes
• the elements are taking a lot longer to illustrate than I had imagined
• how to display data inputted through the form

Peer Feedback:

• the illustrations really look like paper cut-outs!
• the transitions between each scene could be smoother
• some elements look like they are crashing into each other between scenes (like the turkey and the bus)
• can consider animating the bike wheels to spin

Usability Test Version

Progress: The user is now confronted with an overlay that introduces Davis' Centennial Seal to tie the project back to its point of inspiration. I adjusted some of the animations so elements no longer appear to be crashing into each other between scenes. Placeholder data is displayed once the user leaves the 'Davis is my Home because...' form.

Challenges:

• correctly positioning all overlays to the center of the screen
• displaying user inputs using the back-end service, Back4App

User Test Results: By user testing the current version of my capstone project with 2 peers, I have 3 significant observations:

• Intuitive Navigations - When tasked with scrolling through the parallax, starting over, and filling out the form, both users were easily able to navigate to the correct buttons/interactions.
• Improve Parallax Animations - My users were easily able to scroll through the parallax interface. Although they commented that the animations felt smooth, the transitions between each scene felt abrupt.
• Form Lacks Styling - The lack of margin spacing on the form created an eye sore for the users. During the first user test, the overlays from the intro screen were not hidden when the user opened the form. The text from the overlays and the form interfered and made the page very difficult to read.

Version 3

Progress: The introduction overlays are now correctly centered on the screen with their accompanying visuals. As the user scrolls, the bike stays centered giving the appearance that it is taking a ride through each scene. I completed most of the illustrations, so the final design is coming together.

Challenges:

• although Back4App is receiving user input, it is not displaying it once the user submits
• centering/formatting issues (like the top right button)
• time management

Community Partner Feedback:

• Text can be included to accompany the visuals to describe each element's significance to the city.
• Allowing users to fill out a form describing their experiences is a great feature. It allows for community involvement.
• The graphics are fun and engaging.

Final Product

Image by rawpixel.com

Notable Improvements

Overlay Navigations: Back, Next, and Exit

Once confronted with the introduction overlay, the user has the liberty to: continue viewing each screen, go back to the previous screen, or exit the overlay entirely. By including all 3 buttons, the user does not have to click through each screen if they do not wish to. 

Accessible Navigations

The navigation buttons are made more accessible by keeping them in consistent locations (like the top left and right corners). The illustrated buttons also help to portray what the buttons are for. For example, the 'Seal' button on the top left opens the introduction overlay that explains the Davis Centennial Seal.

Scene Backgrounds

For someone who is not familiar with Davis, the bare scenes were a poor portrayal of the city. By adding background illustrations and labels to each scene, I contextualized the main elements for the user. For example, including the background greenery and the creek behind the squirrel and ducks gives a better visualization of the Arboretum to the user.

Summary

This is the first project I spent extensive time (2 months!) building an online interface. From start to finish, I truly immersed myself in this project: from visiting the Centennial Seal in person for research to coding this site entirely from scratch. Although it felt impossible at first, I learned how to use the JavaScript library, ScrollMagic, to trigger horizontal animations for my parallax interface. Although there is so much that can be improved, I'm proud that I successfully brought my vision to life. I love the storybook feeling that this project evokes, biking through scenes made of construction paper cut-outs.

Future Directions

• Responsive Interface: Although I initially intended to build an interface responsive to both mobile and desktop, it is only optimized for desktop screens due to time constraints. If I continued to work on this project, I would optimize it for mobile screens such that users can drag the screen to initiate the animations. Additionally, images would need to be optimized for smaller screens and a hamburger menu could be used to replace the current navigation.
• Adding Informational Text: Our community partners from the City of Davis intended for projects to be informational. Since the Centennial Seal is already a very visual-heavy art piece, student projects could be used as supplemental informational material to educate viewers. To meet their request, I could add a "Read About It" tab on each scene. Once clicked on, this would open an overlay that describes the historical background or relevance of the elements on the page to the city. For example, a fact that could be given about the Unitrans bus is that the system was founded and still is run by students today.
• Further Styling the Form: When compared to the illustrative interface of the parallax journey, the form and its accompanying data display page are left quite bare. To improve this, I could include some of the illustrations, implement the construction paper texture, and add more color.