0.3 PANIALERT

Mobile application: IOS

2022

PROJECT OVERVIEW:

BACKGROUND:

Project carried out for Ecuador over 5 months, concurrently with three other projects for the same client. Our team included a product manager, a product owner, and my role as a UX/UI designer. The client's team was made up of two stakeholders and a development manager.

PROBLEM:

The people in Quayaquil dont’t have a quick, safe, and reliable way to request immediate medical and security assistance.

SOLUTION:

Panialert began with the idea of creating mobile application, integrated to Defensier, with the purpose of providing the user with a quick, safe, and reliable way to request immediate medical and security assistance. Users can reach out to the help service and share information about the incident, all while tracking the location and distance of the assistance on the map. Additionally, they receive recommendations and advice to follow while awaiting assistance.

ABOUT THE PROCESS

USER PERSONAS

AMBULANCE SERVICE:

SECURITY SERVICE:

EMPATHY MAP

I created a map visualization of our user personas to gain a better understanding of their daily context.

02 DEFINE:

We processed the feedback and insights, which were based on real data gathered during the Empathize stage, to analyze and formulate our problem statements.

PROBLEM STATEMENTS

  • Guayaquil citizens need an accessible and quick way to request immediate medical and security assistance because their current system takes too long to respond.

  • Guayaquil citizens need a way to track the location of assistance while they wait because it helps to alleviate their fear during the waiting period for help.

  • Guayaquil citizens need a way to have their allergies or important medical conditions documented online in case of an emergency when they are alone.

03 IDEATE:

We used the 'How can we…?' process to approach the problem statements from a different angle, allowing us to brainstorm various creative solutions.

04 DESIGN:

We created diagrams and wireframes to gain clarity on the sequence and content of screens that the user will navigate through before designing them.

USER FLOW

WIREFRAMES

DESIGN SYSTEM

I created a complete new Design System that uses uses neutral colors combined with more saturated colors, along with an extensive pattern library to ensure consistency, coherence, and efficiency across the design on all the screens.

PRIMARY COLORS

#3E6CE1

#F4F7FF

BACKGROUND AND TEXT COLORS

#E2EBFF

#000000

SECONDARY COLORS

#47CFB7

#DF827C

#D01F1F

EXPLANATION OF COLORS:

Light Blue: Security and serenity.

Red: Positive and energizing.

Salmon: Protection and union.

Black: Order and elegance.

Green: Feeling of calm.

White: Simplicity.

TYPOGRAPHY

I selected the Lato typography for its versatile use with different weights and for the semi-rounded details of the letters, which impart a feeling of warmth. The strong structure provides stability and seriousness, and it is also easy to read on screens

LOGO

The logo design features a circular shape with three lines, representing the different verticals within Diginnova: Defensier, Panialert, and Building Management. The design elements are consistently used across all logos for easy visual recognition of Diginnova's products. The circle and hand symbolize protection and care provided by the products.

Typography: Poppins Semibold.

Logo:

Isotype:

Favicon:

UI COMPONENTS:

Request help buttons

Disabled button

Enabled button

Timer

Secondary buttons

MOBILE SCREENS

MEDICAL EMERGENCY:

OUTCOME

  • I designed and prototype more than +20 mobile screens with their different functions in 2 weeks.

Anterior
Anterior

Transport service