Back.

Tree Canada

Boosted audience engagement by 67% for events that aim to populate trees.

Role.
Graphic Designer
Team.
Arlene Chen (me), Ricardo D'Aguiar (Content Manager)
Tools.
Figma, Adobe Illustrator
Duration.
4 weeks
Mobile mock-up of app design "uDirect"

Project Summary.

Context.
A group course project for the master’s level Fundamentals of User Experience course.
PROBLEM.
Roommates often struggle with disorganized tasks, bills, and communication but find them hard to address.
Solution.
Happy Housemates aims to foster a warm and welcoming space that makes shared household tasks feel easy, seamless, and stress-free.

Dashboard

Streamline scheduling and managing tasks. Clear task hierarchy to help users prioritize tasks.

Split bills, chores, and tasks

Trust and transparency in shared expense and payment. Accountability and transparency in task assignment and completion.

Discover.

Research.
I conducted two user interviews to uncover common roommate problems and habits.
Using the double-diamond design method, we began with the discovery phase. We were given the problem space of dealing with roommates conducted primary and secondary research to empathize with users. Each of us conducted two user interviews, then consolidated our findings into clusters.

Project Summary.

Context.
In my final year of undergrad, the project YaasChef was developed for my thesis class.
Background.
Imagine being a young university student who just moved out of their parents' house, and they realize they need to eat but don't really know how to cook. This is the reality for many young adults, including myself.
PROBLEM.
For young adults, cooking is a daily challenge—time-consuming, complex, and essential.
SOLUTION.
YaasChef simplifies cooking for young adults with easy recipes based on their ingredients.

Onboarding

Pick your favourite cuisines and set your
dietary restrictions.

Add Ingredients Manually

Type in the ingredient you wish to add and watch it populate in your foodie stash! The more ingredients you add, the more recipes we will recommend.

Add Ingredients by Taking a Photo

Upload or take a photo of ingredients to add them to your foodie stash.

View Your Foodie Stash

Input ingredients manually or by uploading photos to get recommended recipes based on your inventory. Add expiry dates to get notified of impending spoilage.

Personalized Recipes Under
One Hour

View recommended recipes based on your inventory and favourite cuisines.

Hands-Free Step-by-Step Tutorials

Learn to cook with our simple tutorial, broken down into key sections. Each step is supported with text and video.

Save Recipes

Create an account and login to save
recipes for later.

Inventory Adjustments

Add expiry dates to get notified of impending spoilage for your ingredients. Filter by category, add quantities, and delete any ingredients.

Create a Grocery List

Planning your next meal? Add groceries to the list for your next trip to the store.

Empathize.

PROCESS.
To dive deeper into this problem, I examined the cooking behaviours of young adults by conducting a survey with 25 respondents and running 8 interviews to learn more about their habits, motivations, and barriers. I chose these methods of primary research to gain first-hand insights, opinions, and quotations on young adults' cooking habits.
Survey Insights.
Examining the cooking habits through a survey of 25 young adults and 8 interviews.
As a young adult, I experienced the struggles that many others face when trying to cook for themselves. In order to better understand the specifics of these issues and the habits of young adults cooking, I released a survey with 10 questions related to analyze the target audience.
Survey & Interview Insights.
4 factors were identified as the main barriers to cooking.
80% of survey respondents cited time constraints as the main barrier to cooking, followed by a lack of ingredients, lack of skills, and lack of motivation. In a study from the University of Delaware, "Significant barriers to cooking at home included the high cost of food, lack of support from family and/or friends, lack of time, the availability of someone else to cook meals, and limited access to food." (Sahd, Laura, 2019)
QUOTES.
This was further validated through 8 user interviews in which young chefs said...

Define.

PROCESS.
In the definition stage, I established the problem and direction for the potential solution. I defined the challenge statement, created personas to represent my target audience, and narrowed down the design goals to help combat the issues young adults face while cooking.

Project Summary.

Context.
From April 2022—2024 I volunteered as a designer for the Pinnacle hackathon organization.
OVERVIEW.
Pinnacle invites the winning team from each of the world's top 50 collegiate hackathons to compete in an epic finale event. For convenience, the organization wanted a mobile app design for the elite 200 hackers to use during the event. This would give them quick access to announcements, schedules, and important information prior to and during the event.
The Challenge.
Make the attendee experience more fluid.
Instead of using Pinnacle's user portal, Discord, main website, and exclusively physical badges which could be lost, everything would be consolidated into one app.

The Problem.

Many students miss out on opportunities to connect with their school community such as joining clubs and events that cater to their interests. This is especially true amidst a pandemic when promotions for clubs are scattered on many different social media platforms. Both introverted students and those who are inactive on social media may miss out on opportunities to mingle with like-minded individuals, become a leader, and stay organized.

Project Summary.

Context.
In June 2024, Tree Canada approached me with a branding and visual identity project for their tree-planting event Let's Get Dirt-y.
OVERVIEW.
"Let’s Get Dirt-y will be targeted towards 25 to 35 year-olds and will be widely promoted on Tree Canada-owned channels. As such, the Let’s Get Dirt-y collateral should be fun and artful, featuring design elements that are engaging, accessible to English- and French-speaking individuals and can be formatted to meet the dimension requirements of each delivery channel."

Concepts.

EARLY DESIGNS.
Finding the right tone and visual identity for adults 25 to 35 years old.

In the early stages of design, I created six concepts to share with my client. Amongst the options, he liked the sixth one the most; however, he mentioned that the pile of dirt could be misinterpreted due to the event title.

ITERATIONS.
Organic shapes were used to create the layered paper effect.

To combat the issue of a misleading and suggestive image, I changed the pile of dirt in my concept to an organic shape. This ensured that the concept of digging into the ground remained. I designed the poster to resemble paper cutouts as an indicator of the connection between trees and paper production.

FONTS.
I tested four fonts that felt engaging, youthful, and tree-like.
I settled on Ruddy since it had an amusing personality and a dynamic feel.

Final Designs.

FINAL DESIGNS.
Alignment, textures, content, and colours were edited to create the final design, evoking fun and artful posts for the tree planting event, Let’s Get Dirt-y.
IMPACT.
Posts on Instagram, Facebook, Eventbrite, X, and LinkedIn increased ticket sales by 67%.
Upon release of all the posts, I was informed by my client that the campaign was a success and that there was a waitlist for the event with requests to increase ticket availability from 60 to 100.
How might we design an engaging and artful visual identity for Tree Canada's tree planting event aimed at young adults?
DESIGN GOALS.
Combating barriers to cooking.
To help young adults like Wanda and Aidan, the solution must offer quick recipes using current ingredients to reduce waste, simple tutorials for beginners, and a fun, bold Gen Z vibe to inspire cooking.

Ideate.

PROCESS.
During ideation, I prioritized features, established an MVP, evaluated the landscape of cooking apps, and began designing flows.
PRIORITIZATION.
I ranked 9 features based on user importance, project goals, and feasibility.
When survey participants provided feedback on desired features for a cooking app, I compiled their responses and had interviewees rank them in order of importance. Using these rankings, I created an ‘Importance x Feasibility’ chart to identify features that are both highly important to users and feasible to design and implement technologically.
Early Iterations.
Creating a high-level basic task flow.
Early on in the design process, I mocked up a few low-fidelity wireframes to get a sense of the flow a returning user would take when entering the app. It was difficult to imagine fun visuals and interactions in this stage, which made it challenging to make concrete decisions.
Competitive Analysis.
Evaluating the landscape of 5 cooking apps.
Although many of the apps I tried were of high-quality, I identified a few opportunities for my own product to include that would set it apart from the others. Using feedback from my primary research, I was able to validate these opportunities.

Prototype & Test.

PROCESS.
Once the main flow was established, I worked on the visual design and enhanced the interaction design after user testing.
Visual Design.
Creating a sassy, bold, and fun design system.
From ‘YesChef’ to ‘YaasChef’, a name change suggested by my supervisor meant more than just a simple alteration. This change led to an entire rebrand in vision and tone. Initially, I had used more pale colours that were not as popular amongst Generation Z. The push to use bolder colours was inspired by the name change as well as the interest that young adults have in bolder colours. I created the design system with reusable components, colours, typography, and visual assets.
The Scope.
Meeting the MVP of the product.
As a member of a larger team, I was given the requirements and stretch goals for the app. Using the requirements, I began thinking about the architecture of the information.
Research.
The previous iterations lacked intuitiveness.
Prior to starting on the wireframes, I analyzed the previous mobile app iterations that were designed. Through this audit, I found a few key issues with this version.
User Flow.
A high level overview of the two main user journeys.
I created two user flows to give me a sense of direction for the screens needed when designing and prototyping. Since each Pinnacle attendee would have an personal account, there needed to be two flows for pre-login and post-login.
Visual Design.
I created a design system to align with Pinnacle’s brand of prestige and elegance.
Using their branding guidelines, I designed an entire component library for the mobile app. This made the design process more efficient, consistent, and allowed me to sharpen my technical skills in Figma. Working with auto-layout, components, variants, and variables was a lot of fun.
Challenges.
Navigating the app.
Initially, I had debates on which type of navigation to use for this app. The previous iterations seemed to play with a unique type of interaction; however, I deemed it to be too confusing for most users because the Pinnacle directors were unable to explain how it functioned to me and I could not figure it out myself.

I tested out a dropdown style pop up menu because I felt as if there were too many pages for a bottom navigation and a lack of differentiating icons to properly convey the content in each section. This proved to be confusing during a review with a previous co-worker of mine and went against the common pattern of mobile apps and bottom navigation.
The switch to standard bottom navigation.
Due to the feedback I received from my previous co-worker and the standard convention of bottom navigation on mobile apps, I decided to switch. I solved the problem of having too many pages by placing the profile section in the top right corner and consolidating the About and FAQ page together. By combining the two pages, I was able to solve the other issue of having confusing and indistinct icons.
The Solution.
Delivering a streamlined attendee experience for the world’s brightest hackers.
What is Pinnacle?
New users can access information about the prestigious event on the About page.
Quick access to event information
Participants can login to view announcements, scheduling, rules, financing, travel information, frequently asked questions, and their unique profile.
Personalize your profile
Competitors can add their pronouns, biography, and social links on their profile. Each participant will receive a unique QR code, which will be used throughout the event for networking and authorization.
Interaction Design.
I created wireframes and prototypes to test and ensure intuitive interaction.
Below are some of the key screens and flows from the current version of the app. During user testing, participants navigated the app with ease. All 3 participants were able to identify the meaning of the navigation icons. In addition, the indication of the active page in the top section supported the iconography. However, the settings icon on the profile page was disliked. Due to this, a discussion to redesign the settings icon was conducted with the Pinnacle team.
Conclusion.
Design is a non-linear process and requires many iterations for optimal results.
As Pinnacle prepares its event aiming for Fall 2024, the designs for the mobile app are quickly coming to finalization and beginning to hand-off to developers. Our goal for this app is to create a more fluid hackathon experience for attendees, to mitigate the usage of multiple platforms for event information and participation, reducing confusion.

The opportunity to design this app was a valuable learning experience and a great way to see a solo project come to fruition. Meetings with the directors helped me understand their requirements, feedback, and next steps. I used the feedback provided during critiques and applied it to my revised designs. Unfortunately, Pinnacle disbanded in 2024 before this project could develop.

The Challenge.

Write and assemble a 60-second video trailer that reveals the plot points about a fictional television series or film story of your life, with you as the protagonist (main character). The trailer must communicate your unique personality.

The Challenge.

In accordance with the hackathon theme, we were required to build a project relating to the cinema.

We established our inspiration from MadLibs and tried to put a twist on the concept with a final film animation of the story that users compiled.

The Solution.

Twenty: A Pandemic Story, solves the presented challenge by telling the story of Arlene’s experience during the pandemic and the thoughts she had while reflecting.

It communicates these ideas through a pandemic horror-dramedy where the character ponders the thought of life in an alternate reality without the pandemic.

After considering the possibilities and the ‘ideal’ life for a 20 year old, she comes to the conclusion that the pandemic helped her slow down, harbor her relationships, discover new interests, and find her passion.

There is an arc throughout the trailer parodying the initial horrors of the pandemic through a comedic lens, a vibrant alternate reality, and a sentimental montage of Arlene being satisfied with the memories she made, despite the rough beginnings.

The overall theme is acceptance and the discovery of oneself through environmental challenges in young adulthood.

Script.

The Solution.

UniHub is a centralized system for university scheduling where students can view upcoming assignment deadlines, club events, applications, lectures and more.

View classes, clubs, and upcoming deadlines.

Check upcoming sessions for clubs and applications to join executive teams.

Toggle between three calendar views to organize school assignments, clubs, and more.

Research.

To enhance our understanding of the positives and negatives students experience while engaging with their university after-hours, we came up with several research questions which were used in question boxes posted on social media. Key inquiries included:

  • What was simple and/or difficult when reaching out to a club or event?
  • How did they normally go about finding clubs or extracurriculars?
  • What methods did they use to organize their schedule, lectures, and deadlines?
  • What is convenient and/or inconvenient about their university's calendar?

Pain Points.

Due to the 36 hour hackathon time constraints, a limited number of students replied to our inquiries on social media. As university students, we included our own pain points in addition to our friends on social media to highlight some key factors.

Personas.

To get a better understanding of our targeted demographic, we created two user personas. Both are in university; however, one is in her first year while the other is in his fourth year. This was done to get an idea of the different student perspectives, as they are at opposite stages in school.

Features.

After the research process, we identified several important design requirements and features that would be the most beneficial for users.

Low-Fidelity.

For efficiency, we worked on our low-fidelity wireframes and added some text in order to clearly visualize our ideas.

Style Guide.

The design of UniHub is meant to appeal to students and have a more playful edge in comparison to a strictly corporate feel.  We wanted it to feel fun and casual so that students would not feel overwhelmed.

High-Fidelity.

After creating our style guide, we designed the high-fidelity wireframes with usability in mind.

Revisions.

Minor changes to the design were made after the hackathon to preserve the original and enhance it for accessibility.

The Solution.

uDirect is an eccentric interactive storytelling mobile application for movie lovers.

Inspiration.

The inspiration for uDirect came from MadLibs; a phrasal template word game that is known to be funny and entertaining. Our love for story-based adventure games and iconic movies inspired us to create this cinematic twist on MadLibs. Furthermore, we thought it would be fun for users to have control over the narrative and be pleasantly surprised with the visual results.

What it Does.

uDirect is a mobile entertainment application that allows users to make their directorial debut and take control over one of many quirky scripts that require their masterful final touches. Once a script has been chosen, players can name their main character and cast their main character based on the headshots provided.

Many elements of the offbeat story can be controlled such as the setting (users can choose if they want the story to take place on the beach, in outer space or the jungle), pets, names, vocabulary, food, and musical score.

After all the components are selected, uDirect allows players to watch the completed film containing cinematic visuals and witty dialogue featuring your decisions. With over 27,000 possible combinations, the fun is endless!

Low-Fidelity.

For efficiency, we worked on our low-fidelity wireframes and added some text in order to clearly visualize our ideas.

Style Guide.

The design of uDirect is meant to be bright and playful. Each colour is bold and often associated with fun games.

High-Fidelity.

After creating our style guide, we designed the high-fidelity wireframes with usability in mind to ensure a smooth game experience for players.

Overview.

Before RBC, I was a third-year Interaction Design student at Sheridan College with no corporate work experience.

My design experience was limited to collaboration with peers of a similar age from school, participating in hackathons, and volunteering in extracurriculars. Therefore, I was a little intimidated by the thought of working with experienced adults.

During the first week, I was introduced to my manager, Robin, my mentor, Ryan, and the entire design team. Soon, I learned about the team HomeX and its purpose. Since HomeX is focused on simplifying the client and mortgage application and servicing experience, I had to quickly learn a lot about encumbrances.

Goals.

Projects.
TDS Exclusions.
Interaction Design
Collaboration
Prototyping
Usability Testing
Under the guidance of my mentor, I had the opportunity to design and prototype a flow for TDS liability exclusions.
I learned a lot about designing for the needs of the business and collaborating with product owners and business analysts. Participating in research sessions to gather feedback on the flow I prototyped was very insightful and educational. During these sessions, I was able to watch real mortgage specialists interact with my prototype to gauge their thoughts on the proposed flow for future refinements on the design. This would impact over 1000 mortgage advisors and enhance their workflow as they exclude liabilities.
loading states.
Interaction Design
Workshops
Prototyping
A loading screen can have a significant impact on the user’s patience and satisfaction.
This project taught me a lot about the importance of smaller details in design. I also learned to lead a workshop with the design team in order to gather their ideas for various loading states on certain pages.
HomeX Design Team Onboarding
Content Design
Visual Design
Research
Presentation
As part of my goals, I was able to lead an entire internal project end-to-end to create an onboarding document for future designers on the HomeX team. For research, I conducted two retrospectives with members of the design team to prioritize the most important information a new employee would need. Then, I synthesized the results and began laying out sections of the document for design. I presented the design to my team and chapter for critique.
MSA Access
Interaction Design
Working on this project introduced me to error states and writing interaction notes. Finding out how to direct users along the "happy path" when they interact with an interface differently than intended was fascinating.
Prompting
Interaction Design
Workshops
I learned how to guide users and give them visibility of the system’s status using toast notifications, alerts, and progress indicators.
Challenges.
Ryan Left 🥺
Midway through my internship, my mentor, Ryan, went on leave for five weeks.
Initially, I had some concerns about Ryan’s absence:
  • I was nervous about change since we had worked together for my entire internship up until that point and he supported me day-to-day
  • Though I was well-prepared and informed of his leave, I was worried that I would not work as well with the other designers
  • Felt pressure to know details on what I worked on with Ryan so that I could update the designers taking over
Many of the concerns I had about Ryan’s absence were quickly resolved thanks to the support of the team
  • Had a great opportunity to collaborate with other designers, learn about their process, and work on new projects
  • Worked with our Visual Designer, Amanda, to audit the advisor portal for the HomeX component library and finalize mobile TDS exclusions screens on Figma
  • Hosted design stand-up meetings to discuss any blockers or issues that the team may haveLed design critique and made sure each designer on the agenda had enough time to share their work
  • Led design critique and made sure each designer on the agenda had enough time to share their work
  • Gained advice from another Interaction Designer, Simi, on explaining design decisions and thinking deeper about the scenarios that each flow could encounter, she also expanded my knowledge on the Laws of UX
Insights.
“Learning and growth” is a great mindset to have
This mindset helped a lot in an agile environment such as RBC.
Leading meetings can be awkward, but fun!
Despite the silence, it is necessary to allow others to process the information and think of a potential response.
Explaining design decisions to stakeholders is important and takes a lot of practice
Design is difficult on its own, but communicating the work to persuade others can be just as challenging. A lot can be explained through interaction notes, presentations, and context.
RBC is Really Banking Cool!
I saw this on a t-shirt. In all seriousness, I really enjoyed my time at RBC and made meaningful connections with the team as well as with others in different roles and journeys. Turns out that working adults aren’t so scary after all!
Interaction Design & USER TESTING.
Micro-interactions required major decision-making. I audited 4 apps with list-building features to examine pros and cons.
The placement of buttons and creating a flow to add ingredients to the user’s inventory list seemed like minuscule decisions; however, a lot of thought was put into the final decisions to create the best user experience. Examining other apps with list-building features provided valuable insights for my design process by revealing successful elements, potential issues, and effective visual designs.
During usability testing, 3/4 users picked Version 4 as their favourite.
I crafted ingredient-adding screens to enhance personalized recipe suggestions. While Versions 2 and 3 were intuitive, they necessitated leaving the inventory. Version 4 introduced a more streamlined approach. Despite considering bottom sheets and modals, direct input proved more efficient as less clicks were made and users were not directed away from the main list.
Key iterations.
Reimagining a more intuitive user experience.
Throughout the course of this project, I went through multiple iterations of the same screen to test the most optimal user experience.

Reflection.

OVERALl.
YaasChef was a fun and successful project in that I gained a lot of experience in research, product design, branding, communication, and graphic design.
next steps.
What's next for YaasChef?
If I had more time to expand on YaasChef, I would include the following:
Lessons Learned.
Deciding on seemingly micro-interactions demanded careful consideration.
As I worked through the prototype, I gained valuable insights into interaction design and decision-making processes. The project successfully achieved the goal of creating an engaging cooking app that empowers young adults to craft meals using the ingredients they have on hand.
I reaffirmed my passion for branding and visuals.
In terms of visual design, I gained branding expertise and discovered a passion for shaping YaasChef's identity. I thoroughly enjoyed creating the visual assets, components, typography, and guidelines for the design system.