Other Projects

Our goal was to design a system in the navigation and transportation sector that is not hosted on a smart phone, tablet or similar screen device. The project took place over 5 weeks.

We conducted story interviews and market research to identify pain points for users in existing solutions. We specifically looked for how users adapt existing products to suit their needs. Through many brainstorm and prototyping sessions, as well as a required radical design change, we designed an interactive tangible object to facilitate social collaboration and navigation in an “eyes-free” way.

The design features route planning, in motion navigation, calendar sync, and the ability to collaborate and connect with peers. We designed two products: a primary PIN'D with all functionality and secondary social PIN'Ds meant for sharing with others such as event guests, children, and those who aren't eager to learn a new technology.

DOIS- poster.pdf

Created with Figmawww.figma.com/file/bFBFgwxgruzfVZ6CzIiL6K/SitInteraction-GoogleSlides-Template?node-id=0%3A1&t=tuSHR7B0f4kaXZir-1

Move It: Redesign of Google Slides Animation

Instrumental Interaction and Human Computer Partnership principles, Paper and Video prototypes, Iterative Design

Over 4 weeks, we redesigned the Animate and Transition commands from Google Slides through the lens of Instrumental Interaction and Human Computer Partnerships ( relevant paper here: https://hal.science/hal-01788023/file/wks0214-beaudouin-lafon.pdf).

I started by recreating the 2022 Google Slides UI from scratch in Figma. Each design concept was materialized with paper prototypes and then realized within the context of Google Slides through Figma. The above document is the template I made from scratch to replicate the existing interface.

Michel Beaudouin-Lafon, Wendy Mackay. Rethinking Interaction: From Instrumental Interaction to Human-Computer Partnerships. Extended Abstracts of the 2018 CHI Conference, Apr 2018, Montreal QC, Canada. ff10.1145/3170427.3170635ff. ffhal-01788023f

tool_transition.mov

Paper prototype

These two videos both showcase how the appropriability principle exists in our design. The paper prototype was used as a proof of concept for the interaction that was then applied to the Google Slides design in Figma.

SitInt drawing.mov

Figma prototype

The user applies the animation tool to an object that is not anticipated in the way the command was created; They apply the animation to a drawing tool to trigger a "live" drawing during presentation.

Chef: Cooking Assistant

Balsamiq, Participatory Design

Learning to cook is intimidating. Many recipes expect readers to have an existing knowledge base.

We wanted to remove the barrier of entry for first time cooks and even help experienced home chefs reach the next level.

Functionally, our goal was to assist in finding recipes based on ingredients, provide step by step videos, facilitate recipe ratings, and provide cooking tips along the way.

Design started with an extensive need finding session to determine what tools are available currently, what seasoned and new cooks feel they would benefit from and which features we could do without.

We used a participatory design process to ensure we were meeting user needs. Brainstorming sessions were held with potential users to keep us focused to serving our market audience. Participants had free rein of the application multiple times throughout the process to provide feedback.

The final submission was a UI mockup made with Balsamiq.

staSHARE: Creating community for content creators

Balsamiq, HTML, CSS, Javascript

Our team identified a gap in the market for content creators to reliably store and share their assets with each other. Through market research and business pitches we adapted to approach asset storing from a community point of view.

We created UI mockups and a skeleton site to gain user feedback early.

The website features user authentication, profile pages, storage for videos, audio and images. Assets are uploaded into "stashes" which are pages dedicated to a specific theme or community. The stash pages list assets with thumbnails and a small description and host a community forum.

When uploading, content can be added to a public or personal stash. Uploaders can tag their content with relevant information to help users search for it. The asset page features a comments section, ratings, and a download function.

We allow creators to provide information downloaders can refer to when crediting others when using their content.

Our development process included multiple user studies and business mentor presentations.

The site was created with Javascript, HTML, CSS bootstrap, and One Vue.

The visual is built with JavaScript, HTML and CSS using d3 and SVG for graphics. All interactions and data management are facilitated using d3. The data is read in from two different JSON files: one for the online dating information and another for the COVID measurements. Data was cleaned and formatted using Python scripts as the files were too large for other data processing software options.

Data Dating: How COVID measures affect online dating behaviour

Javascript, d3, SVG, Python

The purpose of this visualization is to address the explorative question of: “How did COVID measures that induce social isolation impact the behavior of online dating platform users?”

The project visualizes metrics for online dating user behaviors against a timeline of the COVID pandemic in select European countries. The two views, radial chart and scatter plot, allow viewers to view the data from a large, country-wide scale and also following specific user behaviors respectively.

UX/UI Design

Deep Dive, Deep Clean : VR introduction to the effects of climate change

Unity

We developed Deep Dive, Deep Clean as an interactive way to engage the general public with some less known effects of and impacts on climate change. The VR serious game proof of concept could be pitched to organizations such as schools or museums as either a permanent or temporary feature.

The game, designed for an HTC Vive, guides players through an underwater scene that changes over time. Players are tasked with collecting garbage from the ocean and returning it to a boat. At the end of the game, players are faced with the reality of how much trash exists in our oceans.

DeepDiveDeepClean.mkv

Spotify Reskin

Figma https://tinyurl.com/2p866736

As a personal project, I redesigned a Spotify UI ( developed by Momitha Yepuri on Figma Community, shown left https://www.figma.com/community/file/1052832340031141040 ) to suite the Barbie branding. The fonts, colours, layouts and logo are adapted to the new theme.

On the left are some of the inspiration images for the Barbie themed UI. The reskin follows a pink colour palette with blue as a feature colour and yellow as a complimentary tone. Barbie products are often kitschy with lots of accessories and details. I wanted to reflect this style in the design without creating an overwhelming interface.

In addition to the aesthetic changes, I redesigned how playlists, songs, and albums are denoted in the search as well as added tags such as "new music" and "popular" to the results.

Slack Interaction Redesign

I have always been frustrated with the Slack user experience. As a small personal project, I interviewed my peers who use Slack in their daily work with the intent of addressing their pain-points. My Figma work updates a template by Claire Jung ( https://www.figma.com/community/file/1028667816480157517 ) to reflect the most recent version of the Slack UI.

Current Slack Interface

The left menu is only collapsible by click-and-drag and has a minimum size before being fully collapsed. Starred items are organized in a separate header.

The current Slack interface truncates text and code files with no visible indication of the length of the file. Interaction options are only available upon hover.

My Figma Redesign

In the menu, I have kept starred items in their original categories but implemented them as "pinned" to the top of the section.

In my redesign, I added persistent interaction points for truncated text, as well as displaying the length of the attachment.

RELAX: Real Estate and Rental Listing tool

Balsamiq, User-Centered Design

seng310_video_pt2.mov

Currently, home hunters have to look at multiple sites for access to all available houses for sale and rental. Many of these sites require subscriptions to access important property information. We aimed to assist this audience in an easy, all in one, application to finding a new home.

We chose functionality based on market research and, specifically, interviews with real estate agents, homebuyers, and renters.

We planned for the application to allow users to search for listings, save favourites, view floorplans and property scores based on walkability and nearby schools, grocery stores, etc. Users could input important locations such as their workplace or their children's school and filter listings based on their distance to those locations. Uploaders could validate their listings via MLS. A chat function would facilitate showing requests.

The final submission was a UI mockup made with Balsamiq.

IML for Yoga Pose Detection and Guidance

Marcelle, MoveNet, NeoDB

We used MoveNet and NeoDB in our back-end and trained the model on an existing set of yoga pose images. In addition to the application, we documented the literature review, implementation process, and design choices in a formal report.

This 5 week implementation project kick-started with an extensive literature review of interactive machine learning and its use in pose detection for training of physical activity. From there, using the Marcelle framework, we developed a training tool to identify posture issues in support of proper yoga practice.

ScoopRecoup

Java Swing with MVC

https://github.com/nnhanus/advUI

ScoopRecoup is a desktop game to teach basic coding principles to children aged 8-12.The application is built using Java Swing MVC and focusses on developing custom components and interactions.

The project had a duration of 5 weeks from design through demo. Interaction features include hover helpers, custom made drag and drop, custom sliders and pop-up windows.

Path Tracker : Personalized Mobile Route Estimations

JavaScript Node.js, HTML, CSS, D3, Leaflet

The criteria was to create a mobile web application that includes a map view, an additional graphic and incorporates GPX routes within 5 weeks.

The reactive webpage shows users a selection of saved routes. They can then see their performance for the previous 5 times they completed the route to best plan their time. The site will update with live tracking navigation to notify users if they are ahead or behind schedule.

WebDev Slides

TaskMaster : Tangible Project Management

User centered design, Paper and Video prototypes, Figma, groupware

Presentation

TaskMaster is a dual-component task management system that incorporates features such as dependency tracking and visual alerts for discrepancies.

The digital Kanban board has enhanced group awareness, real-time notifications , task check-out functionality, and facilitated information sharing. The integrated physical board is built into a storage system with sensor-equipped boxes and task tags that are synchronized with the digital board.

End result was a design proposal.

groupware report.pdf

Playing with Control: DANCE REVOLUTION

Processing, Arduino (Capacitive Sensors), Figma

The piece is a two-participant system; One player triggers light on a predefined dance area and the other may step on markers within the space to interact. Both participants go through trial and error to determine who is in control and how to act to succeed.

We observed participants interact in many different and novel ways. Because we wanted to highlight how user mental models and understanding of the world also "control" them, we did not give the users any instructions on how to play other than where the interaction points of the system were. We saw many people trying to select the same square, similar to the popular arcade game Dance Dance Revolution, but we also saw users who thought each pedal was an instrument, or that the pedals controlled volume and frequency. Some dancers reported feeling like they were supposed to follow the music, the lights, or the visual effects.

We approached an open-ended task of creating a digital art installation to explore a provocative concept. We chose to experiment with control, and the many different ways we can be influenced. We had 8 weeks to complete the project.

I wrote a program using Arduino and Processing to take input from copper plates and display a light mapped to the plates. Additionally, input was taken from the keyboard in a similar fashion. When both users select the same location, the light changes to red and the music increases frequency. When the users select a different location, the music decreases frequency and the lights are blue (for the keyboard player) and green (for the tangible player). I soldered the wires in the circuit to the copper plates to ensure they stayed attached. My teammate adapted a Processing example for our visual background so that it becomes more chaotic or uniform depending on the users' actions.

Studio_Project_AdobeExpress.mov