UI & UX Design
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.
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.
For the identity design, we began by mocking up different iterations of logos that incorporated the ideas of breathing, lungs, and oxygen.
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.
We created illustrations that unite the overall UI system with the logo. These illustrations include gradients and mirror curves in the logo mark.
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.
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.
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.
We created a number of components for each state, input and button in a unifying style in accordance with the brand.