UI/UX   Motion Design   Print   Branding

Video: HeavyJob overview

HeavyJob is a software by Heavy Construction Systems Specialists that helps project managers and construction workers track their constructions costs, materials, and work hours in the field and office.  The overview video lives on the top of the product main page, and provides a brief intro explaining the benefits of the software.

The Problem: The previous product video was created many years ago, and has since become outdated. It heavily featured B-roll interchanged with screen recording of a user navigating the software. In the old version of the video, the full functionality of the product did not translate due to small screen details. This also affected the pacing of the video, with the screen recordings being slow and not exciting.

My Role:  On a two-person team, I was responsible for designing all of the graphic elements. I sketched the storyboard, designed  illustrations, icons, backgrounds, and text, and animated most of these elements.

Proposed solutions: To come up with the look of the video, I have conducted research into other software companies, and analyzed the flow of the videos and the stylistic choices of graphics. I developed a brief storyboard that included about 10 boards, detailing the angles and implied motions. After finalizing the storyboard, I sourced the images needed. Many of them, like people and icons, could be found in Adobe stock, and all that was needed was to pick the elements I liked, rearrange them into a new composition, and then recolor them to match the look of the video. The others, like the software interfaces, had to be created from scratch. While I had many screenshots available, the size of the text on each of them would be almost invisible when added into the video. To solve this, I had created a series of SUIs - Simplified User Interfaces, where I could enlarge the text, simplify some copy into lines and boxes, and make sure I show enough of the graph to drive the point across without overwhelming the composition. After I had all my design elements ready to be imported into After Effects, I moved onto animation. This part was pretty straightforward, and the most important thing was to keep the pace of the video consistent with the voiceover.
Some of the simplified product interface graphics I designed in Adobe Illustrator. All of the boxes, shapes, and text were placed into different layers to be animated separately.

How these solutions solved the problem: Updating the graphics and b-roll of the video helped  refresh of the look of the website. It also provided a more user-friendly overview of the product.

Challenges: Every step of the project had its own set of challenges. The initial script had suggestions for visuals, and I had to look realistically at which of them would look good in the video, and which would stand out too much. For example, one of the wishes on the script was to have a bulldozer drive past the camera, and the puff of smoke after it would reveal one of the value propositions. While it sounds good on paper, an effect like this could easily look dated. Another challenging part of the video was showing how the software works in the field and in office. The first idea I had was showing the ipad fly horizontally from one location into another. This felt too literal, and too long. Instead, I used a match cut to use the downward motion of the central element (iPad) to quickly switch the background from field to office.

What I learned:  This project gave me a great insight into the importance of a detailed storyboard. What I had was a series of loose sketches, and it would’ve been helpful to have them properly designed and even colored, because this would have allowed me to focus more on animation and less on the design.

The full Video

HCSS Events Page

This project is a redesign of an Events page for Heavy Construction Systems Specialists. 

The problem
The current HCSS events page was outdated and and mot very user-friendly. The top navigation section of the page was busy and hard to read, and the event cards lacked any images to go along with them.

Here you can see the previous page design.

My role in this project
I was in charge of designing the main page, as well as creating a high-fidelity page prototype. 

How I came up with the solution:
The client wanted to make the page look like an event page of another construction-related company. It had a different structure than HCSS’ events page, mainly because a user could filter the events by type via a drop-down filter at the top. I wanted to create a solution that utilized HCSS branding and incorporated a new page structure.

How my solution solved the problem
The final design thar got approved eliminated the confusion of navigating the page. The images help convey the type of event the users would be attending, and removing overlapping photos from the nav section made it very clear what types of events HCSS was offering. Furthermore, adding company logos to each event card helped clarify that some events were attended by HCSS, and not hosted. This was a very important detail for the client, and we wanted to be clear about the company's role in the event.

High-fidelity web and mobile prototypes of the final product:

Challenges I faced
One of the bigger challenges in this task was miscommunication between me and the client. After presenting the first prototype, I learned that they still wanted to maintain the same structure for the website, and just needed an updated navigation bar and a page layout that had images. In the end, I ended up scrapping the first design, and getting back to a more minimal page redesign. Now, there were no filters and no tags on each event listed chronologically. Instead, the page was broken into sections of each event type: conference, webinar, classes, and golf tournaments. A full list of events could be viewed either by clicking a button or by horizontal scroll.

Here is an exaple of the first draft that got rejected: What I learned
This project taught me to never rely only on task description without verifying that the client and I are exactly on the same page. If I had scheduled the meeting with the Events team prior to starting the work, not only would I have saved time, but we also would have been able to come up with an even better solution through collaboration.

Live page can be viewed here.

HCSS HeavyJob Explore Video

This is a short video that gives a brief overview for construction project management software HeavyJob.

The problem: There was a need for a modern-looking video ad that would make viewers want to test out a free version of HeavyJob called HeavyJob Explore.

My role in this project: I was in charge of storyboarding, designing, and aniamating the video.

How I came up with the solution: I took inspiration from the “explainer” style of youtube videos. They often rely on motion design, animated text and bullet point, and  b-roll. 

How my solution solved the problem: Using dynamic graphics to illustrate the solution HeavyJob offers helped grab the attention of the viewers when the ad was viewed on platforms like Youtube and  LinkedIn.

Challenges I faced: Some of the biggest challenges for me was creating interesting transitions between sections of the video. I really didn’t want to repeat the same transition over and over and over, but I also wanted them to stay consistent due to the video being only 25 seconds long. In the end , I setled on definitng two types of motion transition that I used interchangeably.

How the project affected the users and the business:  This engaging ad helped drive traffic to the HeavyJob Explore web page.

What I learned: Since transitions and cuts were difficult to navigate, this prompted me to take an online course in motion design, where I learned more about the pacing in motion design, as well as how and when to transitions cuts between the scenes.

Watch video on Youtube.

MovieGeek App

MovieGeek is an app that allows moviegoers to purchase food and movie tickets in advance.

Project Overview: 
MovieGeek is an app for a popular movie grill theater in Houston, TX. The theatre wants to make it easier for people of all walks of life to buy tickets online, get the latest movie news, and order food ahead of time.

Project Duartion:
 November 2021 to February 2022

The problem: People don’t want to spend time waiting in line to buy tickets, and then waiting again to buy food and drinks.

The goal: The app wants to help people save time by selecting seats and selling tickets and food ahead of time.

In creating this app, I have conducted user research, interviews, developed wireframing, created prototypes, conducted usability studies, and developed a design system.

The low-fidelity prototypes helped me determine the user flow. After testing it with several people, I have gained valuable insights into how users navigated the app.

Further development
After creating a low-fidelity prototype, I moved onto adding and refining elements such as color, typography, and layout.

Style Guide

It was helpful to create a sticker sheet with all the elements in different stages.

High-fidelity prototype

Working on this project taught me how to turn user observations and feedback into actionable items that help me improve the design.

National Lutheran Choir 2023-24 Season Artwork

In 2023, National Lutheran Choir marketing team reached out to me to help them design and brand their upcoming concert season. It consisted of five concerts, each with a unique theme, such as celebrating life, the theme of light and dark, travel, and women in classical music. The works would later be used in promotional material such as brochures, emails, and on the NLC website.

Early drafts:

After 3 rounds of revisions with the client, we settled on the five designs below.

Here are some examples of how NLC used this artwork in their marketing material.