Skip to main content
[vc_empty_space height=”20px”][qode_in_device_slider device=”desktop” titles_on_hover=”no” navigation=”no” auto_start=”yes” timeout=”4000″][qode_in_device_slider_item target=”_self” image=”15835″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][qode_in_device_slider device=”phone-portrait” titles_on_hover=”no” navigation=”no” auto_start=”yes” timeout=”4000″][qode_in_device_slider_item target=”_self” image=”15805″][/qode_in_device_slider][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Mobile Prototype” link=”https://invis.io/38EGVJTJS” icon_color=”#2e2e33″ color=”#2e2e33″ hover_color=”#2e2e33″ background_color=”#ffffff” hover_background_color=”#eeeeee”][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Desktop Prototype” link=”https://invis.io/28EHM0GST” icon_color=”#2e2e33″ color=”#2e2e33″ hover_color=”#2e2e33″ background_color=”#ffffff” hover_background_color=”#eeeeee”][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]

Intro

JDx SafeFlight enables 911 call-takers, dispatchers, and Law Enforcement Officers to monitor illegal drone flights and to enforce FAA rules.

[vc_empty_space height=”20px”]

Challenges

I and two other teammates received very little information to get started on this project. Through research, user interviews, team design studios, and client design studios we were able to collect all of the necessary pieces to complete the designs for the mobile and desktop application.

[vc_empty_space height=”20px”]

Goals

Create a seamless process for collecting information about illegal drone activities. Develop a way to monitor & process illegal drone flights. Create an intuitive desktop and mobile application for Call-Takers, Dispatchers, and Law Enforcement Officers.

[vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”20px”]

Role

UX/UI Designer (within a team of three)

[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]

Platform

Desktop & Mobile Application

[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]

Deliverables

Platform Design, User Research, Competitor Analysis, User Flow, User Testing, Sketches, Wireframes, Prototype

[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]

Tools

Whiteboard, Pen and Paper, Sketch, InVision

[vc_empty_space height=”20px”]
[vc_empty_space height=”75px”]
[vc_empty_space height=”150px”][custom_font font_size=”40″ line_height=”44″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#ffffff”]DISCOVERY[/custom_font][vc_empty_space height=”150px”]
[vc_empty_space height=”75px”]
[vc_empty_space height=”20px”][vc_single_image image=”15841″ img_size=”medium” alignment=”center” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15840″ img_size=”medium” alignment=”center” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15839″ img_size=”medium” alignment=”center” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”]

Competitor Analysis

 

We used this method to compare how other mobile applications monitor, track, and plan drone flights and display illegal flight areas and Temporary Flight Restrictions (TFRs). This process helped us understand the industry standard and what features need to be included in the design.

[vc_empty_space height=”30px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”Click For Analysis Chart” link=”http://etaih.com/wp-content/uploads/2017/12/JDxSafeFlight-CC-Analysis.png” icon_color=”#cdcdcd” color=”#ffffff” hover_color=”#2e2e33″ background_color=”#2e2e33″ hover_background_color=”#ffffff” border_color=”#2e2e33″ hover_border_color=”#2e2e33″][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”20px”]

User Interviews & Persona

 

By interviewing users, we were quickly able to learn more about what they are trying to accomplish and who they are. A persona representing real users helped us to focus on the user goals and needs. I was able to better understand the world of my user to come up with definitive problems and solutions they face.

[vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15854″ img_size=”medium” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15853″ img_size=”medium” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”20px”][vc_single_image image=”15852″ img_size=”medium” onclick=”link_image” qode_css_animation=””][vc_empty_space height=”20px”]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_single_image image=”15869″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”]

Feature Prioritization

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

To ensure that the structure of the site matches the target audience’s usability, I asked users to rank the site’s categories into order of importance. This helped to create the site map and the information architecture for the global header navigation.

[vc_empty_space]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]

Information Architecture

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

To ensure that the structure of the site matches the target audience’s usability, I asked users to rank the site’s categories into order of importance. This helped to create the site map and the information architecture for the global header navigation.

[vc_empty_space]
[vc_single_image image=”15858″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_single_image image=”15863″ img_size=”large” alignment=”center” style=”vc_box_rounded” qode_css_animation=””]
[vc_empty_space height=”50px”]

User Flow & Process

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

By creating a user flow of key tasks throughout the site, I was able to see the navigational habits of users, their goals and pain points. Ultimately, the users are looking for an effortless way to purchase tickets and shop for items through the online store.

[vc_empty_space]
[vc_empty_space height=”100px”]
[vc_empty_space height=”150px”][custom_font font_size=”40″ line_height=”44″ font_style=”normal” text_align=”center” font_weight=”600″ text_decoration=”none” text_shadow=”no” color=”#ffffff”]DESIGN[/custom_font][vc_empty_space height=”150px”]
[vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]

Client Design Studio

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

By bringing our client into the design studio process, we were able to work directly with our stakeholder and brainstorm all of the functionality needed for the mobile and desktop application.

[vc_empty_space]
[vc_empty_space height=”50px”][vc_single_image image=”15866″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”][vc_single_image image=”15875″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”]

Sketched Wire Frames

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

We started off the design process by sketching out the dashboard, incident detail, and assigning law enforcement officer pages on desktop and mobile. I was able to then quickly test with users and get feedback to move onto digital mockups. With user testing, we were able to ensure all pages included all of the necessary information and was easy to use and navigate.

[vc_empty_space]
[vc_empty_space height=”50px”][vc_separator type=”normal” color=”#cdcdcd” thickness=”2″][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”]

Medium Fidelity Wireframes

[vc_empty_space height=”10px”][vc_separator type=”small” position=”left” color=”#2e2e33″ thickness=”2″][vc_empty_space height=”10px”]

With the feedback from users from the sketched wireframes, I began creating the low/medium fidelity mock ups. In this stage, it became clear from user testing that there needed to be an option to quickly add items to cart from the product detail page and to make purchasing tickets front and center on the home page.

[vc_empty_space]
[vc_empty_space height=”50px”][vc_single_image image=”15901″ img_size=”large” alignment=”center” style=”vc_box_rounded” onclick=”link_image” qode_css_animation=””]
[vc_empty_space height=”50px”]
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Mobile Prototype” link=”https://invis.io/38EGVJTJS” icon_color=”#2e2e33″ color=”#2e2e33″ hover_color=”#2e2e33″ background_color=”#ffffff” hover_background_color=”#eeeeee”][vc_empty_space height=”50px”]
[vc_empty_space height=”50px”][button size=”large” icon=”fa-arrow-right” target=”_blank” hover_type=”default” text=”View Desktop Prototype” link=”https://invis.io/28EHM0GST” icon_color=”#2e2e33″ color=”#2e2e33″ hover_color=”#2e2e33″ background_color=”#ffffff” hover_background_color=”#eeeeee”][vc_empty_space height=”50px”]
[vc_empty_space height=”100px”]

Like what you see? Let’s Work Together!

[vc_empty_space height=”40px”][button size=”large” icon=”fa-arrow-right” target=”_self” hover_type=”default” text=”Contact Me” link=”http://etaih.com/contact/” icon_color=”#cdcdcd” color=”#ffffff” hover_color=”#2e2e33″ background_color=”#2e2e33″ hover_background_color=”#ffffff” border_color=”#2e2e33″ hover_border_color=”#2e2e33″][vc_empty_space height=”40px”]
[vc_empty_space height=”40px”]

More portfolio items

[vc_empty_space height=”40px”][portfolio_slider order_by=”menu_order” order=”ASC” separator=”yes” hide_button=”yes” enable_navigation=”enable_navigation”][vc_empty_space height=”100px”]