Menu

Drone FPV

Home / V 250 Drone Build

image
image
image
image

Thesis Project

Social Drone GUI

Objective

To create an MVP for a social app that connect hobbyists and professionals while teaching users the basics of drone mechanics.

Background

In my final year of BA Illustration, I am required to do a thesis project. It is usually a cumulative assignment that spans the length of one or two semesters.

During my last internship at IBM Toronto Studios, I became fascinated with user interaction in products. While attending IBM design thinking workshops, I learned many concepts in user centered design and technology. This experience is what ultimately led me to develop an interest in drone technology.

Over the last few years, consumer drones have gained massive popularity. The establishment of the FPV drone racing league has attracted many investors from entrepreneurs, manufacturers and media organizations. This is due to its strong use of cutting edge technology and entertainment value.

Rationale

From a consumer point of view, developing a high level of interest is difficult for things that require a technical background. Unless the individual is prepared to do sustained research, the interest or hobby may be short lived. On the other end of the spectrum, there are those who have strong expertise in the area. They are comfortable with all the fundamentals and even go further to create their own builds.

This platform will be great to bring both sets of people together. Beginners will be able to view the builds of seasoned professionals, while professionals can interact with their peers and help each other get better. The outline of this project will give me an opportunity to work on many different aspects of the App and further develop my skills in interaction design, 3D visualization and front end web development.

Use Cases

- Connect with hobbyists and Professionals

- Learn how to build a drone

- User gains drone experience and mentors others

Process | Stage 1

In the early stages, I did a lot of research on different aspects of the app while consulting with my thesis mentor on the design.
Working in my sketchbook allowed me to articulate my thoughts and provided clear talking points with my mentor.
Along with this, I was able to ideate through layout concepts and clear up key features of the app.

Process | stage 2

In the second stage, most of my research was focused around drone parts and mechanics. I wanted to build my assets to spec in order to mitigate as much distortion from the physical product as possible. The programs used to model were Autodesk Maya and 3Ds Max. I then did extensive research into WebGL technologies to determine the best solution for interactive 3D models in the web browser.
Unity and Unreal Engine 4 where two gaming engines that I considered for their webGL export integration. I decided not to use them as they were better suited for gaming products. I settled on 3D Javascript based frameworks for their easy integration with HTML5. After shortlisting the frameworks down to Three JS and Babylon Js, I pursued further development with in Babylon.

Once my tests and research were completed, I conducted another research effort into the best 3D asset creation practices. I read through several articles from industry experts along with forums on CG social websites. I supplemented my readings by auditing a computer animation program which is offered at my college. Between sitting those classes, talking to the professor and friends in the gaming/entertainment industry, I developed a pipeline that followed the best practices. In the images below, I show the topology in the wireframe mesh and a final render with textured UV maps.

Process | stage 3

The third stage consisted of working through the site map and creating visual designs for the UI. Different iterations were made based on the feedback from my thesis mentor and peers.


Final Mock-ups

These are the final mock-ups based on feedback. I initially had my main levels of navigation on the left with interactive elements appearing on the right side of the screen. This was changed and consolidated into one rollable carousel at the bottom of the screen with bread crumbs to track screen states.


Final Renders

For presentation purposes, here is a final render with Vray to showcase the learn and build concept of the App.