Hi, I'm Yael!I'm an enthusiastic Interaction & Visual Designer with
a passion for creating meaningful experiences
and for solving complex problems.

BOTTLED
Motion + App Design

Learn More
01
Project Details
ROLES

Animation
Illustration
Interaction Design
User Experience

TOOLS

Adobe After Effects
Adobe Illustrator

02
Background
CHALLENGE

To enhance the user experience of an app in terms of specific user needs.

PROJECT OVERVIEW

User experience, while inherent in the design of any app, can always be improved. The goal of this project was to enhance the user experience of Bottled, a fictional water intake tracking app, through the use of microinteractions that give users necessary feedback on tasks within the app. The fluid motion in the micorinteractions subtly provides information to the user without overwhelming them.

Pull-to-refresh animation

"Add Water" screen transition

Water sloshing animation

03
Highlights
NATURAL MOTION

The water sloshing animation is based on real videos and simulations of fluid motion.

SUBTLE TRANSITIONS

The animation helps users smoothly transition to the next screen when tasks on the previous screen have been completed.

04
Process
RESEARCH

Before beginning to create my own microanimations, I analyzed many different apps, looking particularly for microanimations that solved specific user experience needs.

CONCEPTUALIZATION

I decided to create a fictional water intake tracking app, as I thought it would be interesting to analyze and try to recreate the motion of water (this turned out to be quite a challenge). As in my research, I decided to focus on solving specific user experience needs, namely wanting to know that an action is in progress, wanting to know that an action is done, and wanting an interaction to feel natural.

STORYBOARDING

Before moving into After Effects, I storyboarded my microanimations and designed the app's interface in Illustrator. This allowed me to easily import assets in After Effects.

Pull-to-refresh animation storyboard (scroll right)

"Add Water" screen transition storyboard (scroll right)

Water sloshing animation storyboard (scroll right)

MOTION TESTS

As mentioned earlier, recreating a natural water motion was very challenging. If the timing or size of change between frames was even slightly off, the whole animation would lose its natural feeling. This can be easily seen in some of my motion tests and earlier attempts at fluid motion.

Water fill motion test

Early water sloshing animation

Early water sloshing animation

05
Reflection
SELF-CRITIQUES

If I were to do this project again, I would:

  • Spend more time trying to get the water motion just right, as it can always be more precise.

  • Spend more time designing the interface of the app, since it was only quickly designed to house the microanimations, which were the main focus of this exploration.

LEARNINGS
  • Microanimations can quickly take an app to a higher level. It is hard to believe how something so small and often subtle can enhance user experience.

  • When working with animations, timing is everything!

I'M LISTENING
Social Change Campaign

Learn More
01
Project Details
ROLES

Interaction Design
Physical Computing
User Experience
Visual Design
Web Design

TOOLS

Arduino
Audio Editing
Fabrication
HTML & CSS
Research

COLLABORATORS

Demi Peppas

02
Background
CHALLENGE

To increase suicide alertness among Canadian post-secondary students.

PROJECT OVERVIEW

Suicide is a growing problem among Canadian post-secondary students, with 9.5% of students reporting thoughts of suicide. However, suicide is not unpreventable. The goal of this project was to create a social change campaign to increase alertness of suicide. Through a website and interactive poster, the campaign aims to motivate post-secondary students to talk more openly about suicide. This will create a community that is more suicide-alert and understanding of how to help someone in distress.

03
Highlights
WEBSITE

The website (currently only a landing page) serves as the campaign's main source of information and resources, both for students who want to help others and for students who are in distress themselves. The website aims to motivate people by informing and educating them through factual information from credible sources.

The "I'm Listening" website on desktop and mobile (view the site here)

NARRATIVE

The poster's narrative is told through the voices of the characters in the photos. Each character tells their own story of how suicide has affected them.

The interactive poster

INTERACTIVITY

The poster's interactivity allows for direct physical interaction with its target audience. This interaction helps audience members understand the importance of our cause and of dialogue on this project.

04
Process
RESEARCH

The design process for this project began with research. Creating a successful campaign that would inform and educate its audience was dependent on a basis of accurate information. Research sources included news articles, research studies, and content from LivingWorks' safeTALK suicide alertness training program.

LOGO

When designing a logo, we focused on imagery relating to conversations or to listening. We settled on chat bubbles not only because they are associated with conversation, but also because they are widely used in chat programs, which post-secondary students rely on heavily for communication.

Logo concepts and iterations, experimenting with different names

COLOUR

When exploring colour palette options, we used colour psychology to determine the most impactful colours for the branding. The combination of the cool, trustworthy, and soothing blues with the optimistic, confident yellows was the final choice to capture and emphasize the tone of the campaign.

#3D9DBC

#7CCED5

#FCCB7F

#FFE7B9

#404041

TYPOGRAPHY

For the typography, Cooper Hewitt was chosen because it has a wide variety of weights, it is sans serif, which is cleaner and trendier by nature, and also because it is not a typical choice for a sans serif font, as it is slightly narrower.

WEB DESIGN

The layout for our landing page was designed with the user needs in mind. We figured that most visitors to our site would be looking for important, time-sensitive information, so we prioritized the links that would be most useful in an emergency situation. Most importantly, the "Need Help" link in the fixed header allows users in crisis to quickly find the help they need.

Website wireframe

MOBILE READY

The website is optimized for web as well as mobile use, in both portrait and landscape modes. These different layouts were achieved using media queries in CSS, which allow content to be styled differently based on the size of the device's viewport or screen.

Mobile site layout

POSTER DESIGN

The final poster idea was conceptualized when we thought about how suicide touches the people close to someone who died by suicide. We thought that evoking an emotional response would be the most appropriate path. Originally, we were going to use separate photos of each character in the narrative, but we decided that using group photos highlighting a fun time in a student's life would be a better way to capture the viewer's attention.

Poster concept sketches

PHOTOGRAPHY

Since we crafted the concept of our poster to follow a specific narrative, we had to take our own photos for the poster. We treated our photos to match our brand, using blur and grey to create a duotone effect. We then lowered the opacity of one of our models to communicate that they had died by suicide, consistent with our poster's concept. By treating the images this way, we hoped to evoke a feeling of nostalgia in viewers.

Lorem ipsum dolor sit amet, his ne justo quidam scripserit, ut eum apeirian lobortis. At vix veri fugit minimum, ex eam fugit oportere constituam, mea tantas ponderum reprimique ut. Quo ad vocibus disputationi, sea ad ferri nominati. An quo aeterno facilis accusata, sea rebum nonumy option no, reque delenit menandri eu mei. Nonumes epicurei recusabo ad usu. Fugit pertinacia has eu, his in meis doctus, tempor explicari signiferumque pri in. Essent aliquid cu cum, cu etiam disputationi vix.

Original photos

Edited photos

AUDIO

Because our poster deals with something so important and personal, we wanted our characters' words to be informed by the actual words of people who experienced losing someone to suicide. We used The Dialogue Projects as a reference for these excerpts. We then sourced voice actors to read the clips. Audio editing was done in Adobe Audition to eliminate echo and white noise.

CIRCUITRY

Making the poster work required the use of an mp3 shield and capacitive touch sensor attached to an Arduino Uno. The mp3 shield holds an SD card containing our audio files, while the capacitive touch sensor allows us to trigger actions through touch. Wires run out of the capacitive touch sensor to areas of conductive paint, creating a conductive touch-triggered area customized to our desired shape and size. Each audio file plays through attached speakers when its corresponding area on the poster is touched. The Arduino, speakers, and wires are housed on the back of the poster.

The circuit, housed on the back of the poster

05
Reflection
SELF-CRITIQUES

If I were to do this project again, I would:

  • Shorten the audio clips, as they are too long for a viewer's attention span.

  • Make the interactivity of the poster more obvious so users know that they can interact with the poster.

LEARNINGS
  • Narrative is crucial in design work. Refining your narrative and finding the proper way to tell it is paramount.

  • Evoking emotion is a powerful goal that must be attempted with care.

ASL GLOVE
Physical Computing

Learn More
01
Project Details
ROLES

Interaction Design
Physical Computing
Usability Testing

TOOLS

Arduino
Fabrication
Processing

COLLABORATORS

Sarah Pawlett

02
Background
CHALLENGE

To help children build empathy and learn the importance of inclusivity.

PROJECT OVERVIEW

Nearly 1 of every 4 Canadians reports having some hearing loss. However, as more people experience hearing loss, communication becomes increasingly difficult. American Sign Language (ASL), while being a fully functioning language, is not very commonly known. The goal of this project was to create a tool that helps children learn the importance of inclusivity and build empathy for others with different abilities. Based on the underlying themes, of accessibility, communication, and education, our ASL Glove can be used by anyone with a specific need or desire to learn the basics of ASL.

03
Highlights
ARTFUL FABRICATION

The ASL Glove was crafted with care, making it easy and comfortable to wear, robust, and colourful.

The finished ASL glove

GAMIFICATION

The game-like program makes the learning process more exciting and enjoyable, and almost invisible, especially for children.

Game-like user interface

04
Process
CIRCUITRY

The ASL Glove uses one flex sensor per finger, connected to an Arduino Uno. These flex sensors output a resistance value to the Arduino's serial port. As the flex sensors are bent, their outputted resistance values change. By reading the values of each of the five sensors, we can determine which fingers are bent and to what degree. In order to make this technology wearable, we confined our wiring to a mini breadboard to keep the size down.

Wiring on the mini breadboard, with toonie for size comparison

FABRICATION

When designing the glove, we realized that as a user bends their fingers, the flex sensors would have to be able to slide up and down along the finger. Because of this, we had to attach the sensors to the glove in a way that would allow them to slide. To do this, we attached each sensor with thread to the tip of each finger, and then sewed down the length of the sensor, creating loops. These loops were sewn loose enough that the sensor can freely slide within them, but tight enough that the bend of the sensor remains true to the bend of the finger. We used coloured thread, not only to improve the glove's aesthetics, but also to increase usability, in that we could match the colours to those in the illustrations that would later be used in the program interface.

The first sensor fully sewn in

DATA COLLECTION

For the program to know when a letter was being signed correctly by the user, we had to test the glove with each letter of the alphabet several times. Additionally, we had to conduct this testing with several users, as we knew the sensors would bend differently based on the size of the user's hand. When testing each letter of the alphabet, we recorded the resistance values outputted by the sensors, then created a range for every finger for each letter. This allowed the program to recognize when each finger was in the right position for any given letter, regardless of variations among users.

if (letterPicked == "A") {
    if (flexR_THUMB > 12000 && flexR_THUMB < 26000 &&
        flexR_INDEX > 27958 && flexR_INDEX < 43000 &&
        flexR_MIDDLE > 26035 && flexR_MIDDLE < 41650 &&
        flexR_RING > 16492 && flexR_RING < 26000 &&
        flexR_PINKY > 37528 && flexR_PINKY < 55000) {
            return true;
    } else {
            return false;
    }

Code to check if the letter A is being signed correctly

USER TESTING

Although most of our user tests used college students in their 20s, we also tested the program on octogenarians, who may have different physiology (e.g. arthritis), cognitive skills, and reaction times. The tests were successful, but the 10-second time limit that the program imposes on users to successfully sign a letter proved challenging for these older users, and can be modified if necessary.

CODING THE PROGRAM

The program we created for the glove was built in Processing. This is because Processing has the ability to communicate with the Arduino's serial port, allowing it to receive values from the flex sensors. To make the program game-like, we had it choose a random letter and display both the English letter and the ASL hand position. The program then gives the user 10 seconds to properly demonstrate this letter. If the user succeeds, the program provides the user with positive feedback in the form of a green screen with a check mark. If the user cannot correctly demonstrate the letter within 10 seconds, the program provides the user with negative feedback in the form of a red screen with an X. The program then chooses a new random letter and displays it on the screen.

if (serial != null) {
    float[] array = float(split(serial, ','));
    thumb = array[0];
    index = array[1];
    middle = array[2];
    ring = array[3];
    pinky = array[4];
}

if (checkLetter(letter, thumb, index, middle, ring, pinky) == true && quit == false) {
    image(correct, 0, 0, 1280, 950);
    quit = true;
    correctTimer.start();
} else if (timer.isFinished() && quit = false) {
    image(incorrect, 0, 0, 1280, 950);
    quit = true;
    correctTime.start();
}

if (correctTimer.threeIsFinished() && quit == true) {
    startOver();
}

Code that runs every frame to read the information from the serial port, check if the letter is being signed correctly, handle the 10-second timer, display the green or red screen, and tell the program to start again

THE INTERFACE

We designed the user interface to be very simple, bright, and easy to follow, which makes the program fun and usable for children. The ASL illustrations have colour-coded fingers that afford to the user that they are supposed to match their hand position to that which is shown on the screen. The colour-coding also helps the user to correctly make the hand position by visually connecting what finger goes where.

Screen showing which letter to make and how

Positive and negative feedback screens

05
Reflection
FUTURE OPPORTUNITIES

Now that this prototype has been successfully created and works well, we would be very interested in exploring the idea of accessibility for the deaf and hard-of-hearing thorough the use of ASL Gloves. For example, it may be possible and within our scope to create a pair of gloves that can recognize full ASL words. Hopefully we will find the time and resources to experiment with more advanced tools in the future and make this dream become a reality!

LEARNINGS
  • Even when creating a prototype, careful fabrication is very important. The better fabricated the prototype, the more accurate it will be to any final design.

  • Even when you think your idea has been finalized, stay open to other ideas, iterations, and options. Little changes to design can make a big difference in the success of the project and open new opportunities and applications.

THE BEST BURGER IN NEW YORK
Motion Design

Learn More
01
Project Details
ROLES

Animation
Illustration
Motion Design
Visual Design

TOOLS

Adobe After Effects
Adobe Illustrator
Adobe Audition
Timing

02
Background
CHALLENGE

To enhance the experience of an audio clip by adding kinetic typography visuals.

PROJECT OVERVIEW

This motion graphic piece uses kinetic typography to enhance a 1-minute audio clip from How I Met Your Mother's season 4, episode 2: "The Best Burger in New York." Through motion design of both typographic and illustrated elements, the goal was to improve upon the already-humorous nature of the audio clip.

03
Highlights
04
Process
TRANSCRIBING THE AUDIO

To start, I transcribed the audio from the clip and looked at the words written plainly on paper, so I wouldn't be affected by the visuals in the video. I then listened to the audio clip without the show's video, and focused on the actor's intonations and emphases to guide me.

STORYBOARDING

Before moving into the motion design, I created high-fidelity storyboards for the majority of the audio clip in Illustrator. This allowed me to think through my ideas visually, as well as created assets that I could later import into After Effects.

05
Reflection
SELF-CRITIQUES

If I were to do this project again, I would:

  • Change the last screen to show an illustrated final image of the full hamburger, complete with the wings, to bookend the video.

  • Adjust some of the timing to make it even more precise.

LEARNINGS
  • When working with audio and video, timing is everything. Bad timing can have a significant negative impact on your work, like telling a badly timed joke.

  • Humour is difficult to achieve, but adding quirkiness and human characteristics to inanimate illustrations and pieces of text can be very effective.

ONTRACK
App Design

Learn More
01
Project Details
ROLES

Interaction Design
User Experience
User Research
Visual Design

TOOLS

Adobe XD
Personas
Research
Wireframes

02
Background
CHALLENGE

To design a fitness-, nutrition-, and sleep-tracking product to compete with current products on the market.

PROJECT OVERVIEW

Currently available fitness, sleep, and nutrition trackers are not especially user friendly. While there are many different fitness-tracking products currently on the market, each product has some of the relevant features, but no one product has all of them. onTrack aims to help users achieve their fitness goals by tracking activity, sleep, and nutrition, and by providing fitness and nutrition coaching.

Add restaurant items screen

Daily food log screen

Daily summary screen

03
Highlights
RESTAURANT ITEMS

Enjoy eating at a restaurant while staying on top of nutrition-tracking.

MACRONUTRIENTS

See daily fat, protein, and carbohydrate intake directly in the food log.

THREE TYPES OF TRACKING

See your activity, nutrition, and sleep details all in one place.

04
Process
USER RESEARCH

To design the app with users in mind, I conducted user research through an anonymous survey that asked questions about subjects' values, knowledge of fitness, and internet use, among other things. I plotted each user on a scale by giving them an ID letter so I could easily see any patterns or trends emerging.

User survey answers, plotted on a scale

BEHAVIOURAL PATTERNS

I then considered behavioural patterns based on the research I had previously conducted. Looking at the research gathered, I was able to make informed assumptions about some of the users and how their values, knowledge of fitness, and internet use would affect how they would use a smartphone app such as mine.

PERSONAS

Using my research and behavioural patterns as a guide, I created three personas that reflected my users.

CONTEXT SCENARIOS

Once the personas were made, I created context scenarios, a series of scenarios that might occur in a typical day of using my app. These context scenarios were created with my primary persona, Alice, in mind as the user.

Context scenarios created for the persona of Alice

DESIGN REQUIREMENTS

Using the previously created context scenarios as a guide, I was able to flesh out the design requirements, which consist of functional requirements, data requirements, and contextual requirements. This type of information would be given to developers to help their understanding of the app and its technical needs.

Some design requirements based on the context scenarios

WIREFRAMES

Once all the technical specifications and requirements had been determined, I began to design the app's interface. I began doing this with wireframes before finalizing the design. The wireframes I created show the screens needed to complete a specific task within the app. In this case, the task was adding a restaurant menu item to the food log. I also took into account the user's interactions to move between screens.

Wireframe screens (scroll right)

FINAL INTERFACE

Although it was beyond the scope of this project to conduct user testing, I received feedback on the wireframes from my peers, and implemented changes before designing the final interface.

Final interface screens (scroll right)

05
Reflection
SELF-CRITIQUES

If I were to do this project again, I would:

  • Find time to conduct user testing before finalizing the design of the app.

  • Conduct even more user research, including interviews, to truly understand the users in their diversity.

LEARNINGS

While it is easy to think of a design idea for an app, there is so much more involved, from user research to context scenarios to design requirements. Going through these steps not only helps improve the final design, but helps the designer flesh out the idea in its entirety before making important design and usability decisions.

Let's Talk About Me

I'm currently a fourth-year student in the Honours Bachelor of Interaction Design program at Sheridan College and have previous experience at Microsoft Vancouver and at Pivot Design Group. I've developed a wide variety of skills, including visual communication, 3D design and modelling, motion design, physical computing, information architecture, and user research, focusing on creating interactive experiences for users of all types.

I'm a problem solver by nature - I love taking apart complex problems and solving them in innovative ways. I thrive in a collaborative environment and bring an enthusiastic attitude to everything I do.

When I'm not designing, you can find me swimming laps at my local swimming pool, teaching lifeguarding and first aid, travelling, or building model cars.

I am currently seeking employment opportunities anywhere in the world for Fall 2019. If you think there's an opportunity for us to work and create together, get in touch!

Me, doing some of my favourite things: travelling, smiling, and standing near a body of water (taken in Portugal)

My Story

When I was in my final year of high school, I had no idea what I wanted to do after I graduated.

It was in fall of 2013 that I visited Sheridan College's open house. At the time, I was looking at the Graphic Design program, but upon entering the classroom, I soon realized I was in the wrong room. Feeling too awkward to leave, I took in the displays of interactive work around the room, and listened to a professor talking to a group of people about something called Interaction Design.

I couldn't wait to sign up. I was immediately hooked on the idea of designing and creating for interaction, of creating meaningful relationships among users, digital products, environments, systems, and services.

Four years later, I find myself sitting in that same "wrong" classroom, but nothing could feel more "right." I'm an Interaction Designer by accident, and a creative thinker by design.

Get in Touch!

If you think there's an opportunity for us to work and create together, I would love to hear from you!

If you want to learn more about me, feel free to check out my resume or LinkedIn.

Send me an email at huberty@sheridancollege.ca or fill out the form below and I'll get back to you as soon as possible.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Yael Hubert

My portfolio is a work in progress. For that reason, it is temporarily unavailable on mobile devices. 

Sorry for the inconvenience.