I designed the end to end flow for mobile live streaming.

Among the most versatile tool that police officers can have is real time information, where they can make better informed decisions.

*“There can be no better information feed than a live video feed on what you are about to walk into. Are they armed, are they not armed? do they need our help, do they not?”*

**Mobile Flow**

Starting a livestream begins on the mobile app. This could either be a standalone app, enterprise controller, or the standard controller.

I designed a brand new live stream experience with visibility of progress into the system which allowed users to debug exactly what was wrong with the product.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Fc0198816-c0e8-448b-82a8-49f016df8981.png?alt=media&token=7e288ad7-f818-4abc-aaf4-8bd789e00131","id":"c0198816-c0e8-448b-82a8-49f016df8981","width":2000,"height":1125,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Cloud Flow**

Once on the cloud, admin users can easily see which vehicles come online from the fleet page.

I designed the live stream tag to be an addition to vehicle state, since they are independent states.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2F753fd5a8-972d-4cc0-9335-a19706949c8f.png?alt=media&token=a35205a0-5e57-42fc-b962-a3e9b67552f3","id":"753fd5a8-972d-4cc0-9335-a19706949c8f","width":2000,"height":1379,"filename":"image.png","type":"image/png","caption":"Live Streaming tag on the Fleet Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2F8f228e0c-a019-4a82-b2d0-7d216cdbcd19.png?alt=media&token=4196475a-8440-450c-888f-3bca227c20fd","id":"8f228e0c-a019-4a82-b2d0-7d216cdbcd19","width":2000,"height":1362,"filename":"image.png","type":"image/png","caption":"CTA to enter the Live Stream on the Vehicle Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Ff9f61d68-45ec-42ef-8e92-a7cc1d16f5aa.png?alt=media&token=c245e9fa-3553-4b68-9b2e-572f251526da","id":"f9f61d68-45ec-42ef-8e92-a7cc1d16f5aa","width":2000,"height":1361,"filename":"image.png","type":"image/png","caption":"Loading State","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2F5f5cc2bf-c640-4855-9c83-56ac573f32eb.png?alt=media&token=b804e7d8-dfe9-4069-a439-f686ff35ce9d","id":"5f5cc2bf-c640-4855-9c83-56ac573f32eb","width":2000,"height":1361,"filename":"image.png","type":"image/png","caption":"Live Stream!","border":false}]}
```

**Connection Diagram**

In order to provide users live streaming with Skydio Cloud the ultimate fluid user experience, there is some incredible engineering needed to make this happen.

I worked with our WEBRTC engineers to understand exactly the live streaming system and where the failure points can occur.

Depending on the exact error states, we have different copy as well as retry logic.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Fe0326791-3fd4-4d9d-b7c9-ca358f9172fc.png?alt=media&token=56b53e65-a834-4091-b77a-404043739943","id":"e0326791-3fd4-4d9d-b7c9-ca358f9172fc","width":2530,"height":2084,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Sample Error: `Credential Request Timeout`. This occurs when the iot api doesn't reply with credentials in time.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Faa1cdb63-b5aa-45ec-9f47-d7feafe60ce4.png?alt=media&token=0d89725a-2ca2-4001-a2b0-cd2b3d753cc4","id":"aa1cdb63-b5aa-45ec-9f47-d7feafe60ce4","width":2000,"height":1125,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

I explored a variety of alternative layouts that could enable more efficient live stream . We recognized a trade-off between efficiency and clarity

1. Putting `Off air` as an empty state.

2. Adding a live tag into the electro optical view

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Fb6611846-1541-42fc-b245-bc9f0785b5be.png?alt=media&token=55aa0f58-6867-4d40-80dc-a372277630ee","id":"b6611846-1541-42fc-b245-bc9f0785b5be","width":846,"height":1704,"filename":"image.png","type":"image/png","caption":"Putting `off air` as an empty state","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2F055b7336-6929-44d7-ac97-e062757ad5ce.png?alt=media&token=27c5b6af-4e64-44db-b188-df361ef9cf30","id":"055b7336-6929-44d7-ac97-e062757ad5ce","width":846,"height":1704,"filename":"image.png","type":"image/png","caption":"Adding the live tag and duration to the electro optical view","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2F0925512c-e380-41c1-81f3-68d69536e0ef.png?alt=media&token=782bb2fc-41db-4640-81ea-7a5141caf28b","id":"0925512c-e380-41c1-81f3-68d69536e0ef","width":846,"height":1704,"filename":"image.png","type":"image/png","caption":"Showing all three states","border":false}]}
```

Through research and iteration, we landed on the camera icon tabbed menu that we moved forward with:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FDDyxlkYZ8oIzrxK51GPa%2Ff95d5ca7-108c-474f-b289-0b990cc9ee85.png?alt=media&token=fdb6bc2a-5f2c-4f2f-b4fe-7fc7df49f460","id":"f95d5ca7-108c-474f-b289-0b990cc9ee85","width":876,"height":1768,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Live Streaming

Skydio's design system was created to promote a centralized library of reusable UI components for Designers and Engineers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2F0d2dbf9f-c65e-40a8-86eb-22178c73d3b3.png?alt=media&token=d1d0505c-b791-4d58-b006-803a214fd40d","id":"0d2dbf9f-c65e-40a8-86eb-22178c73d3b3","width":3840,"height":2160,"filename":"type@2x.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2Fc88bb07e-9e12-48de-861a-df78122989b7.png?alt=media&token=1acc7f5b-23dd-4742-8f82-ca1b727bdbc8","id":"c88bb07e-9e12-48de-861a-df78122989b7","width":3840,"height":2160,"filename":"design system - map controls@2x.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2Ffa9c23f3-5f17-4b69-97e0-4d052c4135bf.png?alt=media&token=3483dbf9-f661-402c-8d15-0e8e9e553ed9","id":"fa9c23f3-5f17-4b69-97e0-4d052c4135bf","width":3840,"height":2160,"filename":"selected screens@2x.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2Fa4661824-4525-41a0-88b4-fc3b112485fb.png?alt=media&token=bb63b335-deb6-48b1-b337-135c78589b6a","id":"a4661824-4525-41a0-88b4-fc3b112485fb","width":3840,"height":2550,"filename":"design system - flight menus@2x.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2Fd4517a16-3cd5-4fb3-a37a-1513581b6fdb.png?alt=media&token=16ad991d-81af-41ef-b105-122a36b5042c","id":"d4517a16-3cd5-4fb3-a37a-1513581b6fdb","width":3840,"height":2160,"filename":"design system - flight menus@2x-1.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FpsLjePBaq67BnDqRFR7b%2Fcf886901-65ff-434a-93a9-6ff73f4bff74.png?alt=media&token=ffcc6337-04b7-4cfa-8d07-6733916feedf","id":"cf886901-65ff-434a-93a9-6ff73f4bff74","width":5478,"height":2550,"filename":"design system - flight controls@2x.png","type":"image/png","caption":"","border":false}]}
```

Mobile Design System

The fleet page of Skydio Cloud is the web dashboard that admins of organizations use to see the status of their vehicles, view their flight history, enable OTA and more. I lead its design evolution over 2 years.

My role was:

1. Designed the entirety of the fleet page - user interactions, information architecture, visual design

2. Created high fidelity prototypes in Figma

3. Drove weekly stakeholder meetings to align engineering and product stakeholders on functional specs given deadlines

4. Created a Skydio Cloud design system

For organizations with multiple locations with drones, I created this split map and list view to easily see the status of drones along with the locations of the drone.

Enterprise drone users can then easily geolocate their drone either by the map or on the list.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2Fb093dee9-5679-4500-bf94-9a03207d4599.png?alt=media&token=bad71a38-1f6c-48cc-aa82-c618838ea63d","id":"b093dee9-5679-4500-bf94-9a03207d4599","width":2960,"height":2041,"filename":"image.png","type":"image/png","caption":"Fleet page","border":false}]}
```

Drilling down into a specific drone shows the vehicle drone page. I created the information architecture, creating 3 distinct sections

1. vehicle header - containing high level fleet stats: name, status, battery, CTAs

2. metadata - all the stats

3. flight history -  all flight logs

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2F123ff872-a80e-402a-beaa-748fc212b4c1.png?alt=media&token=d1fa8195-ffcd-4349-a3bc-d0551cb60192","id":"123ff872-a80e-402a-beaa-748fc212b4c1","width":2960,"height":2041,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

The vehicle page was designed so that engineers can easily add new features to the page with minimal input from design.

When we added over the air software updates, the information architecture of the fleet page easily scaled by adding in another collapse section.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2F9706e32f-b720-4d3c-9cdd-c460c132dc3b.png?alt=media&token=65f442db-26d7-4501-94fa-51f0157cb92f","id":"9706e32f-b720-4d3c-9cdd-c460c132dc3b","width":2960,"height":2041,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Vehicle State**

Since the fleet page captures all the important status of the vehicles, I created a top level decision tree that details the hierarchy of how to prioritize different states.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2F3d71a3ac-2135-4cd2-91ec-6b855b490245.png?alt=media&token=e51de031-b60c-43cb-bf48-f958388fe112","id":"3d71a3ac-2135-4cd2-91ec-6b855b490245","width":2000,"height":1433,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Flight Review**

I designed this interaction where clicking on a flight card, drills you to a specific flight. Users can then toggle between the LRV as well as the flight telemetry in real time as the flight is being played back.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2F98b8cd4e-4817-4d0d-a5c1-e15f727fbf5b.png?alt=media&token=18bc75ff-73ea-47cf-bc40-31111d2e3c32","id":"98b8cd4e-4817-4d0d-a5c1-e15f727fbf5b","width":2960,"height":2041,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Media Sync**

When a user plugs their vehicle into power, physically the vehicle will change LEDs to display an uploading state.

I designed this tooltip interaction so that users will be able to see the status of the upload upon hover.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2Ff23e1fbf-cb9a-4375-8903-f2f53847f044.png?alt=media&token=fb22c577-7923-4326-9799-f887a404ed7a","id":"f23e1fbf-cb9a-4375-8903-f2f53847f044","width":2960,"height":2041,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Design System: 

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FlXY6fPVjEvTFs1x5M5i6pwi4LUs1%2FvrUWjVFzS4KRahgBzjlD%2F3e2757ff-bd41-418c-9cc2-6b61c4b07d3a.png?alt=media&token=29ff04f8-dbca-4fde-be3f-c6992be2f110","id":"3e2757ff-bd41-418c-9cc2-6b61c4b07d3a","width":3800,"height":1974,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

dennis

2022