Design Portfolio
My design work.
🐾 Switch & Treat
Project Info
Role: UX Designer
Timeline: Fall 2021 (3 months)
Tools: Illustrator, laser cutter, paint, wood, 3D printer, motor, acrylic, battery pack, battery interrupter
Skills: User Interview, Skills Assessment, Prototyping, User Experience Design
Overview
Switch & Treat was an assignment under Tufts’ Assistive Technology course (ENP105) in which multidisciplinary groups of Occupational Therapy and Human Factors Engineering students were tasked with creating an assistive technology device based on the specific needs of a disabled user in the Medford community. For this assignment, my group designed and created a switch-activated dog treat dispenser for a wheelchair user with cerebral palsy.
The objective of this project was to design and build a switch-activated assistive technology device that would allow a disabled user to feed her dog independently.
My Approach
Step 1: User Interview & Skills Assessment
To understand the problem, we conducted initial interviews with both the user and her family in order to identify potential solutions and gather further insights. As an adult woman with cerebral palsy, our user was already familiar with assistive technology since she had an alternative communication device (AAC) for speech and an electric wheelchair for mobility. However, due to her disability she lacked the motor control to feed treats to her family dog, Popeye, by hand and as a result only could do so with physical assistance from others. She wanted to be able to do so on her own, but was unable to find a product that would allow her to since no dog treat feeders are activated by the switch she used. We also conducted a skills assessment in order to gain an understanding of her sensory, motor, cognitive, perceptual, communicative, and social emotional abilities as they were affected by her condition. With these insights in mind, we began sketching initial prototype designs.
Step 2: Research & Initial Prototype Designs
Our initial design ideas were inspired and informed by our research into dog treat dispensers, gumball machines, and switches.
Step 3: Prototyping & Designing
We began the initial prototyping process after deciding to build our design from scratch and made a cardboard mini-gumball machine in order to serve as the base of the dog treat feeder. After testing this initial prototype manually, we adapted it to be switch-activated.By designing and adding a CAM, battery interrupter, and motor, we were able to achieve this. Therefore, the operation of the device would occur as follows:
1. User presses & holds switch
2. Battery interrupter connects switch to batteries & motor
3. Motor spins CAM & pushes in top level of feeder
4. Treat falls through aligned holes & comes out front
After consulting with our user, we began designing and constructing the final version of our switch-adapted dog treat feeder. We were able to scale-up our prototype and use Illustrator to make drawings of the parts we needed. The final device was made of wood, 3D printed materials, a battery pack, and a motor. It was assembled using glue, screws, and soldered wires.
Step 4: Final Iteration
We customized and personalized our final design for our user, painting it her favorite color and writing her dog’s name on the front. We also added a dog bone and polka dot pattern onto the outside of the device to add an aesthetic touch. The final switch-adapted dog treat feeder was delivered to our user with a set of instructions on how to set-up and use the device along with a video tutorial. After delivery we confirmed with our user that it worked well for her and that there were no issues.
💡 Flickerbox
Overview
Flickerbox was an assignment under Tufts’ Human Factors Product Design course (ENP 161) where I was asked to design the user interface for an app that would provide with visual stimuli at a frequency of 40Hz in order to improve cognitive functioning and alleviate the symptoms Alzheimer’s, as initial studies have shown. For this assignment, I researched similar products, helped conduct user interviews, and created a high-fidelity prototype of the app.
The objective of this project was to design the user interface for an iPad app that users can activate in order to view a light flickering at 40Hz which activates natural clean-up mechanisms in the brain and improves cognitive functioning, especially by alleviating Alzheimer’s symptoms.
Project Info
Role: UI Designer
Timeline: Summer 2022 (4 months)
Tools: Figma
Skills: User Interview, User Research, Wireframing, UI & Visual Design
My Approach
Step 1: Research
In order to design an app for users with Alzheimer’s, we first needed to gain an understanding of this user group by conducting research on the condition. For our clinical research, we focused on the causes of Alzheimer’s, how it affects the daily lives of people with the condition, and how patients can improve their lives. This research gave us a concrete understanding of the condition along with a more holistic view of people affected by Alzheimer’s, allowing us to empathize with and understand the users the app would be developed for. We also researched the 40Hz mechanism, as the initial pitch for the project was based on research conducted by MIT. They conducted a study on mice with Alzheimer’s where the tau and beta amyloid proteins in the brain, which are believed to be associated with Alzheimer’s, were monitored as the mice were exposed to 40Hz stimulus for one hour a day. The results of the research demonstrated that a natural cleaning cycle in the brain was caused by the 40Hz flickering stimulus and led to less of these proteins being built up over time. This positive effect was compounded by using multiple forms of stimulus, including light, sound, and haptic; in the Flickerbox app we only focused on light.
Step 2: Competitive Analysis
To understand the market of similar products utilizing 40Hz stimuli, we looked into who our potential competitors would be. Although the research supporting the use of40Hz stimuli was directly connected to Alzheimer’s, the products didn’t all advertise themselves as Alzheimer’s treatments. Alternatively, many of them are marketed as providing general cognitive enhancement, expanding their user group to be more general
Step 3: User Interview
In order to gain a better understanding of our elderly user group, we each conducted interviews with a family member, some of which had a family history of Alzheimer’s. Our questions were written to gain insight into what they disliked about using technology, their general attitudes towards Alzheimer’s, including if they were doing anything to prevent it, and whether they’d be willing to use an app as a preventative treatment or form of light therapy. Many of the insights we gathered from the user interview were implemented into the design for the app.
Step 4: Wireframing
Based on the user interview and research, I sketched some initial wireframes for the app.
Step 5: User Flow
I also created a user flow for Flickerbox focused on simplicity, ease of use, and accessibility.
Step 6: Color & Typography
Based on our goals and findings, I determined the color and typography that would be used in the Flickerbox app.
Step 7: Prototype & User Interface Design
For prototyping the app, I used recommendations of designing apps for the elderly, including using fonts a minimum of 16px due to how common vision loss is in adults. The majority of fonts within the app were sans serif in order to improve readability, and while the headers were in serif font, they were made to be very large. Icons in the toolbar were labeled with text for clarity, the app doesn’t rely on gestures, and there’s a simple onboarding experience in order to introduce users to Flickerbox and alleviate potential skepticism early. In settings, users are also able to set up notifications and reminders to use the app, helping senior users integrate the app into their daily routine.
And based on the results of our interviews, we decided to recommend that the app be used passively, telling users to set up their iPad nearby and let the light flicker while they go about their daily tasks. Flickerbox uses purple and blue gradient backgrounds, which have a calming and relaxing effect on users, and are a high contrast to the white typeface.
The app was centered around three main pages: Flicker, Trends, and Profile. On the Flicker page, users are able to customize the color of the 40Hz light and setup a timer for how many minutes they’d like to view it. In Trends, users are able to track their weekly and monthly use of the app. In Profile, users are able to access the information about themselves entered during the onboarding experience, and edit it if they wish. In the Profile page, the app also recommends users how long to use the app per day and contains settings, where users can turn on and off notifications or a multi-attribution flicker. There’s also a help tab in Profile where users can view more information and research on 40Hz stimuli’s effects on the brain.
🪴 Greenhouse
.png&w=1920&q=100)
Project Info
Role: Product Designer
Timeline: Fall 2022 (3 months)
Tools: Figma, TinkerCAD, Qualtrics
Skills: Questionnaire Design, Research, User Flow, UI & Visual Design, Product Design, User Testing
Overview
Greenhouse was an assignment under Tufts’ Methods of Human Factors Engineering (ENP 64) where I was asked to design a physical product & accompanying app. For this assignment, I created a high-fidelity prototype of the app and a model of the physical product.
My objective in designing Greenhouse was to design a physical and digital product for houseplant owners to help them properly care for their houseplants, and find new ones to purchase.
My Approach
Step 1: User Research
In order to create a product that'd be helpful for houseplant owners, I first had to understand users' existing experiences with houseplants so I created a Qualtrics questionnaire asking them directly. Eighty responses later, I discovered three key insights: 1) many users struggled with houseplant care despite trying to find care instructions themselves, 2) it was common for users to purchase houseplants for aesthetic and mental health benefits, and 3) the most important aspects of houseplant care for users were sunlight needs, watering schedule, and the plant's overall difficulty of care. As a result of my questionnaire results, I categorized my users as either experts or novices. For experts with a large number of plants to care for, their issues concern keeping track of all their plants & knowing which need attention. Therefore, their needs consist of the ability to view daily to-do lists & tasks. For novices who love plants but don’t know how to properly care for them, their main concerns would be with finding the best plants to purchase for them. Therefore, their needs consist of the ability to get guidance & basic instructions on how to care for their plants.
Step 2: Safety
For the self-watering plant system I needed to design, there were safety considerations I needed to ensure I took into account in the early stages of my design process. The pot was designed to be a self-watering system consisting of: 1) a terracotta pot, and 2) an outer cylinder. Due to the terracotta's porous material, plants in the pot can absorb water through the clay, essentially watering themselves. Therefore, placing this terracotta pot in an outer cylinder filled with water eliminates the need for users to always know how often and how much water their plants need since their houseplant will be able to water itself for long periods of time. The outer cylinder of the pot was designed with handles for users to hold in a power grip—their fingers firmly wrapping around the object & overlapped by their thumb—so that users’ would be able to carry the planter with their wrist in a neutral position as to prevent musculoskeletal injury or strain. Because handles that are too large or too small for users can cause fatigue due to under or over-gripping, I was able to find anthropometric data on the hand length & width of my target user group in order to design the dimensions of the handle. As for biomechanical concerns, its recommended users not try to carry anything that is one-third of their body weight due to risk of injury, and based on my research I was able to conclude that the weight of the fully constructed planter system need not exceed 40 lbs.
Step 3: Product Design
Using TinkerCAD, I designed a 3D model of the self-watering plant pot system.
Step 4: Wireframing
Based on the insights from the questionnaire, I sketched initial wireframe designs for main pages off the app.
Step 5: User Flow
I created a user flow for Greenhouse based around the app's three main features: 1) the ability for users to view & check-off their daily tasks related to houseplant care, 2) the ability for users to search for & identify houseplants so they can easily learn basic facts about each plant along with its care needs, and 3) a virtual garden for users to be able to view their plants at a glance & monitor the water & sunlight levels of each plant. Users can also add a plant to their virtual garden.
Step 6: Moodboard
I created a moodboard in order to gather visual inspiration for the UI design of Greenhouse. I wanted the look & feel of Greenhouse to be calm & reminiscent of both plants & nature. According to color psychology, neutrals like white & beige make people feel calm, and the fewer colors used & combined in a design, the more calming it'll feel overall. The color green makes people feel refreshed, optimistic, and relaxed while pink makes people feel playful. As a result, my color palette for Greenhouse consisted of the colors: green, pink, and beige.
Step 7: Typography
I decided to use a dark green text over the beige background for high contrast & accessibility. I also chose to use typefaces that looked well in various sizes. I created a typography hierarchy in order to effectively communicate through the app by having the display & heading text be largest while the body & button text were smallest. I also used left-aligned text since this is a common setting for left-to-right languages including English.
Step 8: Prototype & User Interface Design
I created a high-fidelity design of the Greenhouse app and prototyped it within Figma ensuring I adhered to UI design principles & heuristics. Notably, I used some features common with other apps as well like back buttons & a navigation toolbar.
Step 9: Usability Testing
With my Figma prototype, I conducted usability tests with a representative user. I focused on the main app features & wanted to know the answers to three main questions:
1. Are users able to get through onboarding quickly & easily?
2. Are users able to efficiently learn about & care for their plants?
3. Are users able to complete their daily tasks?
By asking the representative user to perform tasks with the Greenhouse prototype, I was able to take note of not only where they succeeded, but where they had difficulties.
Step 10: User Interface Design Revisions
Based on the usability test results, I made a few changes to Greenhouse's UI design. The body text of the instructions during onboarding were hard for the user to read due to the font's small size so I increased it. I also re-worded some of the instructions for clarity. In the daily tasks section of the app, the user didn't know they could tap on one of their plants to see its full profile, so I added a 'Learn more' button to clarify this feature.