Project Brief
The goal of the project was to create a speculative smart device and a companion app. The assigned topic for our team was healthcare.
My Role
User Research, Ideation, 3D Model Rendering, UI/UX and Visual Design
Team
Mohit Gupta (Me), Carson Young, David Luong and Zachery Eng
Type & Timeline
Product Design, UI/UX, Branding and Motion Graphics
October - December 2017
TOOLS USED
Sketch, Illustrator, Photoshop, After Effects, InVision and Cinema 4D
Understanding
the Target Audience
We started with narrowing down our topic by focusing on a specific target audience and health problem.
THE PROBLEM
In Canada, roughly 600,000 children under the age of 12 are affected by asthma and even with multiple solutions, only about 50% of them know how to use their inhalers properly.
A child using his inhaler with a spacer
As a result, parents have to purchase addition equipment to aid their children through the process of taking their medication—such as an air chamber. Although these additional pieces are beneficial, they also brings challenges along with it. Some of the challenges are:
Spacers are big and bulky
Spacers adds an additional part that are bulky and requires assembly, making it very inconvenient.
Stigma of carrying inhaler
Children are often bullied for carrying an inhaler around and may often feel embarrassed about using an inhaler.
No indication of dosage left
The inhalers are not intuitive making it hard to know when the medication runs out.
Hard to measure breathing efficiency
Parents have no way of knowing if their children are inhaling all the medication properly.
We did some white-boarding together to brainstorm and get a better understanding of the problem.
Design Challenge
How might we design a product for childhood asthma that is not only easy to use, but also empower confidence in children to regularly take their medications, while helping parents with managing their kid's asthma on an everyday basis?
Design Solution
Our end-product is a conceptual friendly smart inhaler for children and a smart app for parents to track usage.
Oble is an easy to use, friendly smart inhaler designed for children that combines both the standard pressurized metered dose inhalers (pMDIs) inhaler with a spacer into a single product.
With it's companion app, Oble can help assist children taking their medication more efficiently without any prior assembly, and is embedded with bluetooth technology that allows parents to track the product usage and how well their child is doing every day.
My Responsibilities
While we all worked together on the research, ideation and visual design phases. I was mainly responsible for the visual design and UI/UX of the app. We synced twice a week to make sure we all had a chance to provide feedback to each other as we developed the product.
Research
Stakeholder interviews, User persona, PACT analysis, to help list all constraints and opportunities.
Ideation
Brainstorming ideas, product sketches, listing and prioritizing important features for both app and physical product.
Visual Design
Responsible for contributing to establishing a visual design guideline (typography, colours, product values) for the brand and app’s user interface. Illustrations were not designed by me.
Physical Product Development
We all did sketches and concept designs for the physical model. Zachery was responsible for refining the details, Carson was responsible for modelling the 3D models, while I was responsible for rendering them in Cinema 4D for the product shots.
App Design
We all collaborated together for the app. I was responsible for building early wireframes, prepare user scenarios, visual mockups, making iterations from weekly feedback and designing final screens. The final designs were prototyped by Carson on Principle.
Motion Design
We all worked together on developing the script for the narration and recording the audio. David helped in finding a narrator and managing the recording sessions. While we all collaborated in planning the storyboarding for the animation, Zac worked on the illustration and animation, while I helped out a little on animating the type in the end.
Initial Research
We started with user interviews with parents, pharmacists, doctors as well as other individuals who have been affected by the issue to get better understand asthma and the daily challenges that families face on an everyday basis. This helped our team get a better insight on asthma in general and helped us create user personas for our potential users.
From these small interactions, we gained valuable insight into the daily struggles faced with having and caring for those who have asthma. These were our main findings:
After consolidating our findings from our user interviews, secondary research, and our competitor analysis, our team created a PACT analysis and user personas to better illustrate what the real problems were. This ultimately helped us pinpoint what the current market was lacking, as well as what we can do to create a better solution.
Parent User Persona
Child User Persona
Visual Design
While building our product concepts we also started with building our brand including colour palette, typography, 3D modelling, illustration style, icons, and brand values for our product. Here, I was responsible for contributing to the design guideline and building values for our brand.
With our product targeting a younger demographic, we wanted to create a friendly and approachable application that kids would love and parents could trust. Thus we incorporated light tones of blue and coral, soft and playful illustrations, and made it as simple as possible to make the user feel at ease.
Ideation - Product
After multiple iterations of sketches and prototypes—as well as receiving feedback from our peers, parents and professors, we collectively finalized a product design that targets all of the core problems areas that we wanted to solve.
Next step was developing concepts for our product while keeping our target audience in mind. Initially, our design had a generic tube shape for the inhaler but after some feedback, we started exploring designs that are friendly and something kids would love to carry around with them.
Some sketches of the product from the ideation phase
When the physical product of Oble reached a good state of quality and functionality, we started to establish what was needed in the application. Based on the information that we gathered from our interviews with pharmacists and parents, we identified some key goals:
Simple
Create an experience that is easy and intuitive for kids to understand. Making a playful product that helps incite a familiar comforting experience.
Safe and Secure
Bring reassurance to parents about the safety of their children health.
Informative
Designing an interface that aims to provide clarity with a simple form of communication focused on every step of the product. Eliminate all vagueness and guide our users to achieve their goals.
Manageable
Asthma attacks can be very obstructive and so we are always finding opportunities to help provide an experience empowers our user to use our products with ease and confidence.
Ideation - App
After solidifying the physical product, we started with prioritizing the core features of the apps. We went through multiple iterations and also did some in-class tests to validate. This is where contributed the most in the project, I worked on the UI and UX of the app, iterating and finalizing all the screens for the prototype.
Initial planning - Listing down all the features we show in the app
Couple of early iterations of the dashboard screen
Midway iterations: we wanted to design for latest iPhone but none of us had one to test them, so we switched back to iPhone 8.
Close to final screens after the design guide was established
App Userflow
We decided to create four user flows to showcase the different features of the app.
User Onboarding: Showcasing how a user would connect the physical device with the app.
First Time Use: Post onboarding the app, we wanted to show how the app helps user familiarizes themselves with different features.
Returning User (Normal): A parent checking up on their child’s inhaler usage.
Returning User (Emergency): Guiding parent to practice using Oble with their child if they are having trouble using the inhaler properly.
Final Product
How does Oble work?
A visual representation of how the product works.
Personalizing your Oble
We wanted to make the product more appealing for kids to carry Oble around with them at all times. We already had the option to replace the body with replaceable silicone animal sleeves, so we added the option to add stickers to make it more personal.
Promotional Marketing Video
We also created a short marketing video for Oble as a part of the project. We collectively worked together on writing the script, record the audio and planning storyboarding for the video, while Zac worked on animation and illustrations for this video.
Introducing the Oble App
With Oble app, parents can remotely monitor their child's asthma while also tracking their breathing efficiency with every use.
Always be up to date
Real-time data tracking allows the parent to always be up to date with your child’s health.
Get detailed reports
A detailed report can also be exported as a document to share with their doctor.
Practice often
Parents can use practice mode with their child to ensure proper breathing techniques are applied.
No second guessing
The app allows parents to set up alerts when the medication is running out and needs replacement.
An interactive User Onboarding
A simple and delightful user experience for first time users when pairing their Oble with the app and creating their child's profile.
Get a quick tour of the app after finishing up child's profile
Pop-ups on every screen help the users with introducing them to the different features that the app offers.
Get notified every time your child uses Oble
Easily compare weekly and monthly usage with detailed reports. Tracking the number of usages can help understand the severity of asthma better.
Practice with your child to improve their breathing efficiency
Oble measures the volume of air that is inhaled with every use. This helps with tracking the child's breathing efficiency with every use. Whenever the child is having problems using the device, get an alert so you can practice with them.
Reflection
Key takeaway
This was my first group project in college and it taught me the importance of collaboration. We all worked on every aspect of the project together, meeting up twice each week to review progress, critique and give feedback to each other. Since we all excelled in things outside of design, we wanted to utilize that in our project. By playing our strengths we wanted to push the boundaries of the project brief and challenge ourselves to learn new skills. The journey and the final outcome of the project was truly a rewarding experience.
Personally, this project taught me how to think of a product from not only app aspect but also from all the different consumer touch points and product as a whole and thinking about what goes into building meaningful products that could impact real users.
What would I do differently today?
If I were to do pick up this project today, I would dive deeper into primary research: asking more questions to parents, doctors and children to get a much better understanding of the problem. I would also love to do some qualitative and quantitative research through focus groups, surveys, interviews, A/B testing, using data to informed design decisions. I would like to get a better understanding of how physical inhaler and spacers work, do a more thorough market analysis, and learn more about the possibility of combining the inhaler and spacer in reality.
Secondly, since the project was very speculative one, we didn’t get to user-test our final design with real potential users. I would definitely make these potential users part of the development process so I can get feedback early and often.
