Work

Cultivar

Mobile Application Concept

Cultivar is an educational app that rewards students at the University of Toronto for practicing good recycling habits.

Cultivar provides users with instant feedback on their actions, informing them if they recycled correctly. Students are motivated to log their recycling through the implementation of a rewards system, which can be converted to the on-campus currency. To encourage accountability and teamwork, users can form teams to compete in recycling challenges, and view stats associated with community milestones and environmental impact. By combining all of these elements into our app, our team provides a platform for users to feel good and receive tangible rewards for positive environmental habits. This, in turn, changes their behavior and fosters awareness of a critical environmental issue.

My Role

My role was not confined to any specific area or task. All four of us on team Cultivar were involved in every part of the design process. My largest responsibility however was prototyping- I developed initial sketches, some paper prototypes, spearheaded the implementation of our medium fidelity prototype, and developed our logo. I was also closely involved in the research process, and the analysis and synthesis of our collected data.

Software Used

Google Slides
Google Forms
Figma
Balsamiq
Illustrator

Deliverables & Artifacts

Project rundown & project statement
Business and & assumptions
Research findings summary
Persona
Empathy map
As-is scenario
Needs statements
Big ideas & prioritization grid

To-be scenario
Hills statements
Prototype: Initial sketches
Paper prototype
Lean evaluation: Paper prototype
Medium fidelity prototype
Summative evaluation of medium fidelity prototype

The Problem

The current state of the environment is worrying, meaning everyone who lives on this planet has a personal responsibility to develop and maintain sustainable habits throughout all aspects of their lives. Sustainable living is not simple. However, making small, conscious decisions every day can carry a significant impact.

We looked at the University of Toronto, and found that despite the university’s best efforts to implement descriptive labels and raise awareness, students still were unable to recycle their waste correctly. If every student took the time to recycle properly, even while just on the St. George campus, hundreds of tonnes of waste will be diverted from landfills.

Design Process

User Research

Our data collection protocol for our primary research involved a survey and interviews with representative users. I was in charge of generating the survey, interviewing a user, and developing an affinity diagram from our qualitative interview data and summarizing the results. Our initial idea involved a function that allowed users to “shame” each other if they witnessed them practicing unsustainable behaviors. At the time we thought this idea was brilliant, as it encouraged accountability and motivated users to think about their actions. But, after synthesizing our primary research we found that this was widely criticized by our research participants.

“If there’s an option in front of me to be sustainable I’ll take it, but if it isn’t convenient for me I won’t do it.”

Other insights gained from primary research include users’ attitudes towards recycling as inconvenient and confusing.

From our research, we developed Julia, our persona, an empathy map, and an as-is scenario.

Requirements Analysis

We held onto that “inconvenient and confusing” attitude in the development of Julia’s needs, which corresponded to her struggle with recycling correctly while living on campus at UofT.

We also brainstormed big ideas for the functionality of our app, and after voting and placing them on a prioritization grid, we decided that real time feedback and real-world rewards were the most impactful and feasible ideas we generated.

With our two big ideas- instant feedback and rewards- in mind, we generated a to-be scenario and hills statements to inform our design going forward.

Prototypes

Research completed and our solution defined, we moved onto prototyping a minimal viable product for the hill we wanted to focus on: “Julia can get feedback on her recycling habits in real time”. We began with rough sketches on whiteboards to block out the screens and key elements, then, we moved onto generating paper prototypes focusing on the “happy path”.

After working through a handful of paper versions of our product, we developed a finalized paper prototype

With our paper prototype in hand we conducted guerrilla usability testing, receiving feedback from representative users around Robarts Library at the University of Toronto. This feedback was key in the development of our medium fidelity prototype.

Using Figma, I began digitizing the screens associated with the recycling process. After additional feedback from some industry professionals, we made some slight aesthetic changes and included screens for other aspects of our app such as leaderboards, rewards and community statistics.

A key element to our design in multiple iterations was our “drag and drop” function. This had users breaking items (such as a coffee cup) into multiple pieces, and dragging those pieces to their corresponding bin. This was our way of linking the system to the real world- making the process intentional and thought provoking to better influence behavior long term.

Considerations for Cultivar V2

Key insights gained from usability testing and interviews included:

Minor issues with convenience and clarity are present
Reconsider the drag and drop function

Due to the feedback we received during usability testing and interviews, we have identified changes to implement in future iterations of Cultivar.

To ease navigation between functions, we are removing the home screen and instead implementing a global navigation menu.

To maintain a minimalist aesthetic and prevent users from being bombarded with data, we will reconsider how information is displayed by designing for interactions like scrolling, expanding, and long pressing.

The drag and drop “testing” aspect of our app is cumbersome for users. Considering alternative options that are easier and faster to use will be beneficial. One such solution would be the inclusion of augmented reality.

Next Steps and Extensibility

This project was a largely experimental creation- as my team and I attempted to solve a widespread and multifaceted problem. Throughout every stage of the design, I maintained the attitude that I saw this project going farther beyond our project scope- and pushed for streamlining of the recycling process upon development of our prototype.

My initial pitch to my team involved an environmental habit tracker utilizing augmented reality, and I believe this project can be vastly improved upon with the use of this technology. With AR and machine learning, Cultivar could use the phone’s camera to scan an item, then provide a real time overlay onto the camera feed that depicts where items should be disposed.

Additionally, with the use of location-based technology, we could eventually expand upon our idea being limited to the University of Toronto and have Cultivar detect a user’s location, and change the overlay on a scanned bin according to that data. This would address one of the central issues people face when recycling- protocols are different depending on where you are. Extending that idea even further, Cultivar could also use location technology to generate recycling maps. These maps can aid in the problem of convenience by providing bin locations along a user’s route, and suggestions of where specific items can be recycled.

Nanny Angel Network

Website Redesign

Nanny Angel Network

The final project of my graduate level Information Architecture class at the University of Toronto involved redesigning the IA of an existing website. My team was lucky enough to work alongside a community partner, Nanny Angel Network.

The Client

Nanny Angel Network (NAN) is a non-profit organization that provides free, specialized, in-home childcare to families undergoing cancer treatment in Toronto and the Greater Toronto Area.

Meeting with the marketing manager of NAN, we discussed their needs for the website and their issues with the current information architecture.

Needs

Increased and sustained site traffic
Increased donations and support to enable expansion of services
Framework allowing for site to evolve into a resources hub for families and children affected by cancer

Issues

The current organization of content and the presentation of information does not align with the goals and direction of NAN. This is exacerbated by:

Inefficient content organization across the website
Ineffective labelling
Inadequate navigation system
Static homepage
Unclear expression of organization’s purpose

NAN's current homepage

My Role

My main responsibilities included:

Supervised and delegated tasks to ensure the completion of our first deliverable
- Aided in the development of a user survey to be distributed through NAN to current users of the website such as mothers and volunteers
- Conducted usability testing in the format of a cognitive walkthrough with participants role-playing as user archetypes
Incorporated research findings into our proposed redesign
Generated preliminary sketches and a paper prototype of our proposed redesign (see image below)
Created detailed medium fidelity pages associated with the redesign of the website’s problematic “Resources” section
Incorporated and edited site pages generated by group members into a cohesive, clickable medium fidelity prototype using Figma
Prepared documentation outlining a proposed site wide search system to support various information seeking behaviors, aiming to pitch a system that promotes extensibility of the site in the future

Example of one of my preliminary sketches

What We Do page in our clickable prototype

Software Used

Google Sheets, Docs, Slides
Survey Monkey
Content Insight Content Analysis Tool
Skype
Optimal Workshop Card Sorting and Tree Testing tools
Figma

Deliverables & Artifacts

Problem statement
Analysis of context, content and users
Content inventory
User survey and results
Usability test script and results
Card sort study and results
Redesign proposal

IA schematic diagram
Preliminary sketches
Paper prototype
Preliminary storyboard
Medium fidelity prototype
Storyboard
IA redesign overview

Problem Identification

At minimum, NAN’s website must allow for the completion of these three tasks:

Make a donation
Apply to volunteer
Request childcare services

Nan’s website currently presents a challenge for new visitors to navigate, and information is not organized or prioritized in a way that reflects NAN’s mission and interests. It is critical for the satisfaction of site visitors that the content they seek is easily accessible, and it is equally important for NAN to maintain visitor engagement to increase participation in their cause.

User Research

Based on the three identified tasks we based our testing and analysis on three user groups:

Potential donors
Potential volunteers
Visitors seeking services

To better understand the content and functionality those users found most important, we conducted a survey, a cognitive walkthrough usability test, and a card sort activity with both new and experienced site users.

Survey

Due to the subject matter of the website, we remained sensitive to creating a survey that was short and accounted for varying comfort levels and participation. Keeping that in mind, we gave the survey to NAN’s marketing manager to distribute as she saw fit.

We received four responses total. Two respondents were volunteers, one was a mother who uses NAN’s services, and one user who had visited the website before.

The results of the survey were generally positive, with a recurring theme that users want information to be clearer and more accessible. However, due to the limited number of respondents and the fact that the survey was distributed by a NAN employee, it is likely answers were biased. Upon analysis of our gathered data, we ensured to take such biases into account.

Usability Testing

To gain a better understanding of the user groups that may visit the website, we conducted usability testing in the form of a cognitive walkthrough.

Five participants gave their initial impressions of the site as new users- and role played as three user types: a mother seeking NAN’s services, a potential volunteer, and a potential donor.

Q: As a mother, how would you find out a Nanny Angel's qualifications?

Scrolling home page

Clicks “Get Help”

“Trained, experienced caregivers… What does that mean?”

Usability test excerpt

Usability testing underscored issues with navigation and content organization. Participants had difficulty finding key information about the organization and struggled to explain what the organization actually does upon questioning. Usability testing also emphasized the need for the site to support multiple modes of information seeking behavior.

Card Sort Exercise

We conducted an open card sorting exercise to help inform the organization of site content and labelling. To get a better representation of potential users, we recruited mothers as representative visitors seeking services, and students as representative potential volunteers. As no restrictions apply to be a donor, we felt potential donors were represented by all participants.

From the card sorting exercise, we were able to develop overarching groups and labelling schemes that informed the organization of site content and the design of the navigation system.

Cards used in the card sorting exercise broken down into the best merge method

Overview of Proposed Redesign

Redesign overview

Retain the current two-level global navigation menu, but have all primary labels in the global navigation menu unfold into secondary labels upon mouseover. This will help the user better understand the organization and content of the site at a glance.

Current website global navigation

Include local navigation on all pages through use of a sidebar. The sidebar will include a static primary label (title), secondary labels, and expandable tertiary labels. Tertiary labels provide an overview of page content and are anchored to their corresponding subheadings- easing navigation through more specified content.

Implement label changes to better reflect the intended audience of each section, guiding user groups to content applicable to their needs.

Retain the task-oriented/audience specific organizational schemes to keep content accessible to a variety of users.

Proposed global navigation

Proposed sidebar navigation and About Us section organization

Consolidate “Get Involved” and “Support Us” into one category: “Get Involved”. This guides potential supporters to one section of the site and promotes the possible methods in which users can get support the organization. .

Current website's Get Involved page. Note the lack of secondary labeling in the global navigation.

Current website's Support Us section

Proposed "Get Involved" section and overview of the Events page

Redesign the News and Blog (relabeled by us as "Media") and Resources pages to make content browsable and help users find specific information.

Current Resources page. Note the lack of organization in listed resources and subheading design.

Proposed Resources landing page.

Proposed Resources section "Browse by Category" functionality

Implement search and filter functionality to improve the overall usability of the website. This will meet users’ needs by encouraging them to query specific information and to browse related content without having to navigate multiple pages.

Proposed search system design. Note the incorporation of tags, a resource type filter, and a sort function.

Conclusion

By addressing issues with content organization and prioritization, labelling, and navigation our proposed redesign seeks to meet the needs of NAN and create a framework for growth and extensibility.

Revisiting NAN's Needs

Increased and sustained site traffic

Dynamic homepage implores users to navigate additional content
Improved navigation and organization help users browse content with ease
Search and filtering system enable users to query specific information and browse related content
Reorganization of site pages and content to appeal to new visitors maintains user engagement

Increased donations and support to enable expansion of services

Prioritization of critical content will help users immediately understand NAN’s mission
Consolidated “Get Involved” section will promote possible ways for users to contribute and acts as a call to action
Boosting site traffic will increase potential support by new donors and volunteers

Framework allowing for site to evolve into a resources hub for families and children affected by cancer

Search system allows site to host additional media and content while reducing impact on usability
Redesigned resources section and embedded search functionality helps users find helpful content
Dynamic homepage presents a platform to present curated resources and media

Clickable Prototype

Link to clickable prototype

Clickable prototype public embed

Nightscape

Game Demo

Nightscape

Download Nightscape GDD

Gameplay video: Nightscape

During my undergraduate degree in my fourth year interactive media practicum, I worked for the entirety of the school year and the following summer on our project, Nightscape. Nightscape is an isometric mystery game demo focusing on Danielle, a private investigator tasked with unraveling the mystery surrounding the small town of Brighton.

My Role

As lead game and level designer I ensured that our team of 13 created content and aligned with our vision and tone throughout all stages of development. I implemented our concept and assets in the Unity 3D engine, designed game levels, prepared design documentation, supervised playtesting, and assumed the role of lead programmer when we encountered personnel issues. I also represented our prototype at two professional conventions and interacted with judges and game development experts.

Project Summary

Due to the limited time frame our team had to complete our project, we prepared a demo to accurately convey our concept. This product included an opening cinematic, an overworld level, and one simplistic tutorial level- the Inn. Our deliverable was fully modelled, textured, and animated by our team with an original soundtrack created by our sound designer. I had the privilege of donning the motion capture suit and recording a variety of animations for Danielle- such as sneaking, walking, running, getting caught, and picking up objects.

From this experience I learned valuable lessons about teamwork, professionalism, and pride in a project. I also learned about the intricacies of a development environment, and how to fulfill multiple roles and learn complex skills in a short period of time.

Nightscape executable file available upon request.

Between Doors

Game Concept

Between Doors

Download Between Doors LDD

Between Doors is a first person game concept that aims to engage players in a thought provoking narrative- requiring them to piece together memories of the protagonist's past.

As the level and world designer of this project, I created a game world centered around the protagonist's childhood home. Between doors heavily focuses on exploration, requiring the player to uncover the narrative themselves. Due to this focus, the world and levels in Between Doors were designed to include strong visual cues to guide the payer to the game's conclusion.

This game has no combat, requiring each level to provide unique and engaging challenges that stay grounded to our interpretation of the protagonist's memories.

John Brown House

3D Model

During my undergraduate degree I had the privilege to 3D model a local historical site using SketchUp.

The Brown homestead is the oldest home in St. Catharines. Working with the John Brown Heritage Foundation, my team was given the opportunity to tour the building and learn about its history. During one such tour, we took detailed measurements of the house and generated rough design blueprints on site.

It was my responsibility to model the Brown House's intricate front porch, so I was tasked with measuring, sketching, and precisely modelling the porch's features in their entirety. The measurement process was surprisingly difficult, due to the age and associated wear of the architectural features.

I also textured the full model using colour sampling where appropriate, and created two tileable textures generated from my reference photographs.

Below are images of my process and of the finalized 3D model.