PatchPal

PatchPal is the smart bandaid that will help you in the process of healing.

Overview


PatchPal is the smart bandaid that will you in the process of healing. When you have the PatchPal smart devices as well as download the app, then the healing process can begin by keeping the user connected! PatchPal can help detect your healing time, temperature, bleeding, moisture levels, and infection detection using new and improved NFC technology. Also, it's environmentally friendly, water proof, and contains Aloe gel and Amethyst powder to aid in faster healing.

Tools - Sketch, Illustrator, InVision studio, Adobe Xd

My Role - User Research, Branding, Packaging, Product designer, Illustrator, & Visual designer

Team - Monique Lopes (Myself), Nabila, Linda Shen, Kaylin Cloutier

Duration - October - December 2019

Understanding the Target Audience

⛔️ The problem

In todays world everything is so hectic, people are very busy, worries stressed and the last thing people need is the slightest inconvenience to throw them off track. But thats life right? Anything can happen. Even an accident that can but a damper on someones mood. There is not a convenient way to check up on wound, people are obligated to go to the doctor and waste more time out of their day to get there weekly checkups. Or maybe something isn/t detected in time? Thats when we thought of the Smart Bandage to solve these problems! This is a smart bandages designed to monitor and tailor treatment for chronic wounds. Bandages with integrated pH and temperature sensors and electronically triggered drug release are designed to improve healing.

The Solution

The goal is to create a smart bandage and make it more welcoming, comforting and well designed rather that the very harsh medical health colours such as the dark blues and reds. Also, with using smart technology with a combination of the NFC chip to help detect any signs of infection with the wound as well as adding certain qualities such as Rose Quartz, Amethyst and Aloe to help with healing. Aloe gel has a great benefits to help burns and wounds. This is a fast and easy way to keep track on you wound without having to waste time on doctor visits, You can share data and information recorded through the app to stay connected.

 Process Work👇

Research & Emphasizing

Through out my process and discovery work, i went through different research points like creating a competitor analysis where you can view HERE to read my research on other competitor products. Wanted to explore more of the and combine more of the NFC chip technology into a smart product by understanding the technology and other products out there.

01 Website Design

Brand and Product Moodboarding

This moodboard is way softer and more caring than the first moodboard which was more serious. With the use of a softer typeface as well as very soft pastel colours like a pink/peach and a pastel indigo blue colour creates a certain mood that might be more calming and cute for the users. Instead of having such bold colours or like the usual health; red and blue colours it would be a product that is more welcoming and friendly.

Low Fidelity Sketches

These are some of my rough sketches for the potential website layout, Kailyn and I decided that we would design the website together. Therefore, I made some sketches to that we can combine out differences and similarities to get a better understanding of how our high fidelity wireframes were going to look like. I had some ideas of either having or creating an aviator or having  the actual picture of the product of the first section of the screen. as well as a brief list of what the product contains, a layered illustrated diagram, a link to the application itself, and to show users an in-depth of the product. After meeting with Kailyn and talking about out thumbnails we then had a better idea to move onto the high fidelity wireframes.

Mid Fidelity & Final Renders

This is high fidelity wireframes for the website based off of me and Kailyns sketches and discussion about the website. I wanted it be have that cute aesthetic but to make sure it look professional and high tech which is which is why i have some white sections as well as some gradients throughout the page. (Kailyn's mockup on the left, mine is on the right)

After finishing and showing both of our high fidelity wireframes, Kailyn and I discussed what aspects we like sin both of out examples and parts that could be taken out or added onto for the final project. Essentially the goal was to combine both of our works! Which I took upon this role.

Website Prototype

02 Packaging

Packaging Mockups

This is the final packaging design for the PatchPal product. It contains the outer packing as well as a pamphlet, the smart bandaid, and a promotional vinyl sticker. It gives the costumer all the information they need located on the back of the packaging as well as in the pamphlet.

03 INTERACTIVE BUS Poster

Interactive Bus Poster Mockups

This is the interactive bus poser. Instead of just having a regular poster we wanted to make it more interactive and fun to connect while communicating to the user. Also, I these posters would be most prominent around shoppers drug mart or where users are most likely to be closer to the product in stores.

04 THE PATCHPAL APP

Context Scenario Map

Jeff is your average guy who goes to his 9-5 job and most days hits up the bar to crack a cold one with the boys. Unfortunately, Jeff got into an accident and had to be rushed to the hospital. Luckily the doctors helped stich up Jeff's wound and applied a PatchPal to the wound. Jeff doesn’t want to take too many days off work because he is a workaholic. Therefore he downloads the PatchPal app to notify him at work when his PatchPal is at its full capacity and if there are any signs or indications of infection. If Patchy tells him that his temperature is too high then he can easily send his data to his doctor instantly.

Low Fi Wireframes

These are some very rough sketches of planing what's going onto the app in terms of visuals, hierarchy, and micro interactions to include. There are also  some low fidelity sketches for some of the featured pages in the application.

Mid Fi Wireframes

Final Design Renders


These are the final screens for the app that have been updated and edited to created the best user experience possible for consumers.
Downloading screens
Splash screen & Onboarding
Login & Sign Up Screens
Dashboard (home) screen
Settings Sub Sections
Notes Screens
Files Screens
Share screens
Loading and Prompt Screens
Notifications

Meet Patchy

This is Patchy! I thought it would be cute to incorporate some sort of mascot/avatar through the smart device, he will be more present within the app but to introduce him in the website as we are introducing the app makes sense.

Patchy will ask as the notification where he will notify the user is anything needs to be changed or just encourage the user with positive reinforcement through their rough time of recovery. Patchy is essentially the PatchPal but in a character form which will add some character and personality to the product as well, making it more user-friendly and have an overall caring feel.

App Pitch Presentation