iPhone-X-Clay-White-Perspective-Free-Moc
BreatheEasy

UI & UX Design

 

Date:

January  – May 2019

Collaborated with a team of designers and developers at Northeastern’s student-led design studio to create brand elements and UI/UX design for an asthma tracking mobile application. 

Project Details

As a design lead for Scout, I lead a team of two designers and collaborated with three developers on a mobile application project. Our client, BreatheEasy, was looking to create a mobile application that would allow children and parents to manage their child's asthma symptoms, triggers and flare ups. Our team’s job was to design and build a product that would follow these goals, as well as create an identity system to fit the brand.

Screen Shot 2019-09-30 at 2.00.19 PM.png
Logo Brainstorming

For the identity design, we began by mocking up different iterations of logos that incorporated the ideas of breathing, lungs, and oxygen.

Screen Shot 2019-09-30 at 2.04.31 PM.png
Illustrations and Icons

Once we had a final logo, we moved on to illustrations and icons. These elements were made to make the application feel welcoming to children and parents alike. 

Screen Shot 2019-09-30 at 2.18.39 PM.png
Illustrations

We created illustrations that unite the overall UI system with the logo. These illustrations include gradients and mirror curves in the logo mark.

Screen Shot 2019-09-30 at 2.09.40 PM.png
Icons

We created icons to be used as visual aids in the trigger, medication and other selection processes to create a seamless user experience. These icons are meant to enhance the education and approachability of BreatheEasy.

Mobile Application

While designing the brand, we were also working on the user experience and design for the mobile application. The project involved a lot of research into the asthma action plan to fully understand the prototype and all the steps we would need to include. Once we understood the details, we began by outlining the user experience through wireframes. After completing the user experience, we moved into UI design, applying colors, patterns, icons and gradients that reflected the brand. 

To summarize the semester's worth of design decisions, my design team created brand guidelines for future use. 

Frame.png
Site Map

Our team started by creating a site map to outline the user flow. This map allowed the designers to begin creating low-fidelity wireframes while the developers began coding the basic structure.

master_components.png
UI Components

We created a number of components for each state, input and button in a unifying style in accordance with the brand.

Simple Mockup Free Scene.png