Hi, I'm Yael!I'm an interaction designer and competitive swimmer
propelled by my own relentless desire to make waves.

ONTRACK
App Design

Learn More
01
Project Details
ROLES

Interaction Design
User Experience
User Research
Visual Design

TOOLS

Adobe XD
Personas
Research
Wireframes

COLLABORATORS

None

02
Problem
PROBLEM

Existing fitness-, sleep-, and nutrition-tracking wearables and their existing apps are not truly conducive to encouraging health and wellbeing in their users. While there are many different activity-tracking products on the market, each product has some of the relevant features, but no one product has them all.

GOAL

To help people achieve their fitness goals through smarter fitness-, sleep-, and nutrition-tracking to promote the adoption of a healthy lifestyle.

03
Solution
SOLUTION

A new activity-tracking app (to accompany a wearable device) that uses robust preference settings and AI to provide a personalized experience to best help its users achieve their health and wellness goals.

Add restaurant items screen

Daily food log screen

Daily summary screen

RESTAURANT ITEMS

Restaurant menu integration helps users stay on top of their nutrition goals without compromising on their existing lifestyle.

MACRONUTRIENTS

Users can see their daily fat, protein, and carbohydrate intake directly in the food log for a convenient, at-a-glance overview.

THREE TYPES OF TRACKING

Activity-, nutrition-, and sleep-tracking all exist in one space, to help users achieve more while doing less.

04
Process
USER RESEARCH

To best understand the app's users, I conducted primary 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.

ASL GLOVE
Physical Computing

Learn More
01
Project Details
ROLES

Interaction Design
Physical Computing
Usability Testing

TOOLS

Arduino
Fabrication
Processing

COLLABORATORS

Sarah Pawlett

02
Problem
PROBLEM

The Canadian Association of the Deaf estimates that there are approximately 357,000 profoundly deaf Canadians, and 3.21 million hard-of-hearing Canadians. Hearing impairment has been associated with lower quality of life by way of social isolation, depression, safety issues, mobility limitations, and reduced income and employment.

GOAL

To encourage empathy, understanding, and inclusivity of those with hearing impairments and to pave the way for acceptance on a greater scale.

03
Solution
SOLUTION

An interactive tool to help children (and adults) learn the American Sign Language (ASL) alphabet, with a long-term goal to be implemented on a large scale to encourage the widespread understanding of deaf culture and communication.

Demonstration of the glove and interface in use

ARTFUL FABRICATION

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

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
SECONDARY
RESEARCH

Before coming up with a solution to our problem and a way to achieve our goal, we conducted research to help us better understand the problem space. To better understand how people are affected by hearing impairments from a social science perspective, we consulted a number of scholarly articles. We created a flow chart to help us synthesize and visualize the insights gained from this research.

Secondary research synthesized and visualized in a flow chart

EMPATHY
 MAPPING

To help us understand the personal and day-to-day challenges of our users, we conducted in-depth reviews of personal stories and case studies of the hearing impaired and their family and friends. We created an empathy map to visualize our empathetic understanding of our user base.

Empathy map for those with hearing impairments

KEY INSIGHTS

Through this research, we derived a number of key insights that helped inform our solution:

  • American sign language consists of thousands of signs that are conveyed through a combination of hand gestures, facial expressions, and body language

  • Existing sign language translation tools have failed to capture the nature of ASL, and although they are presented as devices to improve accessibility, they ultimately serve hearing people rather that those with hearing impairments

  • Improving quality of life for those with hearing impairments should focus not on how those with hearing impairments can make it easier for the hearing to understand them, but instead on how the hearing can have a basic understanding of deaf culture and communication

SWOT ANALYSIS

Finally, once we felt we understood the problem space, we began to brainstorm possible solutions. We created SWOT analyses of our top two ideas (translation device and interactive learning tool) to determine which would be the more effective and meaningful solution. Eventually, we settled on the interactive learning tool.

SWOT analyses of our top two solution ideas, created to help us choose one

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 flex sensor fully sewn in on the index finger

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.

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
Problem
PROBLEM

Suicide is a growing problem among Canadian post-secondary students, with 13% of students reporting serious consideration of suicide. However, suicide is not unpreventable.

GOAL

To motivate post-secondary students to talk more openly about suicide, creating a community that is more suicide-alert and understanding of how to help someone in distress.

03
Solution
SOLUTION

An interactive social change campaign that employs a website, narrative, and interactive poster to reach and educate post-secondary students about suicide alertness and prevention.

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.

Demonstration of the interactive poster in use

04
Process
SECONDARY
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.

EXPERT
INTERVIEWS

To better understand the problem space and to inform the direction of our social change campaign, we conducted interviews with post-secondary mental health professionals. Given the sensitive nature of our campaign, it was especially important to consult professionals and be wary of our sources of information. We asked these experts about their experiences with post-secondary mental health, how their training has helped them, and how it can help others. Specifically, we wanted to understand what post-secondary students can do to help their peers who may find themselves in crisis.

Quotes from interviews with post-secondary mental health professionals

EMPATHY
MAPPING

To help us empathize with our users, we enlisted the help of post-secondary students and professionals to discuss the daily experiences of post-secondary students in relation to mental health. We created an empathy map to visualize our empathetic understanding of our user base.

Empathy map considering the post-secondary student experience

EXPERIENCE
MAPPING

We used the above research to inform the specific tone and subject matter of our social change campaign.Because our campaign deals with two types of post-secondary users, each with their own experience, we visualized an experience map that incorporated both types of users. This map served as a guide when creating additional campaign elements, and was something to which we referred when making design decisions throughout the design process.

Experience map considering the perspectives of both a suffering student and a student offering support

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.

Cooper Hewitt Heavy

Cooper Hewitt Semibold Italic

Cooper Hewitt Book

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.

BOTTLED
App Design

Learn More
01
Project Details
ROLES

Illustration
Interaction Design
Motion Design
User Experience

TOOLS

Adobe After Effects
Adobe Illustrator

COLLABORATORS

None

02
Problem
PROBLEM

Many apps do not provide users with enough feedback for them to understand when an action is in progress or when an action has been completed, while keeping the interaction feeling natural.

GOAL

To explore the use of motion-based micro-interactions to solve specific user experience needs.

03
Solution
SOLUTION

Improve the user experience of Bottled, a fictional water intake tracking app, by incorporating fluid animations as micro-animations that subtly provide feedback to the user, while keeping the app experience natural and playful.

Pull-to-refresh animation

"Add Water" screen transition

Water sloshing animation

NATURAL MOTION

The water sloshing animation is based on real videos and simulations of fluid motion to keep the interaction feeling natural.

SUBTLE TRANSITIONS

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

04
Process
MARKETPLACE
RESEARCH

Before beginning to create my own micro-animations, I analyzed many different apps, looking particularly for micro-animations 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 micro-animations 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
  • The addition of micro-animations 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!

DRAWING THIN
Documentary

Learn More
01
Project Details
ROLES

Film Production
Storytelling
Visual Narrative

TOOLS

Adobe Audition
Adobe Premiere

COLLABORATORS

Sarah Pawlett

02
Problem
PROBLEM

As Holocaust survivors continue to age and their numbers decrease, the role of witness falls on the rest of us to remember those who were murdered at the hands of the Nazis.

GOAL

To make the personal testimony of Holocaust survivor, Howard Chandler, accessible to people for years to come, and to answer one of the most commonly asked questions of survivors: How did you survive?

03
Solution
SOLUTION

An intimate documentary that shares the story of Howard Chandler first hand, and uses the metaphor of a card game to illustrate the role of luck in his survival.

The full 15-minute documentary film

SYNOPSIS

Drawing Thin is a documentary film that tells the story of Howard Chandler, a Holocaust survivor. Howard’s story begins in the town of Wierzbnik, Poland, where he grew up a regularJewish boy. Howard’s regular life abruptly came to an end with the invasion of Nazi Germany in 1942. In the years following, Howard’s life took a series of twists and turns that would leave his fate in the hands of the Nazis. Drawing Thin is a story of loss and luck, as well as hope in the face of the greatest adversity.

PLOT POINTS

Howard tells his story as it happened from his perspective, detailing his experiences in the Jewish ghetto and in a labour camp, and of surviving two different concentration camps, all before the age of16. He reflects on the murders of his mother, father, sister, and younger brother, and on finding his older brother alive near the end of the war.

04
Process
PRODUCTION

The film’s production took place over the course of a single day in two locations. To elevate our film’s production, we used professional lighting, film, and sound equipment. Howard shared his story in response to a number of interview-style questions that were designed to guide the narrative. Overall, we collected 2 hours of interview footage, but decided to condense the footage into just a 15-minute film in order to make it most accessible to the greatest number of viewers.

CRAFTING THE
NARRATIVE

To ensure that Howard’s story is clear and compelling for viewers,  we visualized the narrative chronologically, in terms of plot points, and as  a story arc. Our main goal in crafting this narrative was to ensure that we  were accurately capturing Howard’s experience, while still making his story  digestible for viewers. This proved to be quite a challenge, especially in  distilling the footage down from 2 hours to 15 minutes.    

Visualization of the story arc

THEME &
IMPACT

The theme of luck is highlighted throughout the documentary with interspersed footage of a card game. Overall, the documentary deals with difficult subject matter and thus has a high emotional impact. In addition to serving as a metaphor for luck, helps to relieve emotional pressure by creating some distance between viewers and the story.   

05
Reflection
SELF-CRITIQUES

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

  • Improve the lighting on Howard during the interview and during the card game to create a more consistent tone and save time in post-production.  

  • Create and include more graphics to help viewers visually follow Howard’s story.  

LEARNINGS
  • While it is obvious that narrative is difficult to craft from scratch, adjusting a pre-existing narrative to meet specific goals can also present quite the challenge.

  • Improved video production, video editing, and sound editing skills.

Let's Talk About Me

I'm a shamelessly enthusiastic fourth-year student in the Honours Bachelor of Interaction Design program at Sheridan College, with previous experience at Microsoft and at Pivot Design Group.

I’m passionate about a lot of things, but especially fitness, travel, and progress. I’m inspired by the challenge of bridging the gap between what is and what could be. I believe that we have infinite room to grow as individuals and as a global community, and it is up to each of us to do what we can to foster that change.

Get to know me and you’ll learn that I have a deep-seated desire to explore our planet in all its diversity, and a will to do my small part to make it a better place for us all. I have been fortunate to visit 26 countries (so far!) and to have experienced living, studying, and volunteering abroad.

When I have time to relax, you can find me building an entire LEGO set in one sitting, hiking in beautiful Muskoka, or tinkering with an Arduino.

I am currently seeking internship or 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 (photo taken in Portugal)

Fun Facts

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 smaller screens, including mobile devices. 

Thank you for your patience.