Pitching the Product
-
Before we began involving our design and development teams I had to pitch the concept to the rest of our senior management.
To prepare this, I used the business model canvas framework to outline key activities, resources, partners, channels, customer signatures, revenue streams, etc.
Wireframes & Prototyping
-
Once I received approval to proceed I got to work with prototypes and wireframes to start determining what data we needed to track. Since this application is so data-focused, it was important that whatever section a user was in, the layout would be consistent and clear.
The system was broken down into components with a visual spec prepared for each. My goal was to establish a long term vision of the project. By projecting where I wanted this product to go over the next 2 years, it would better allow our Engineers to plot how to get there.
-
Branding
Pilot is symbolic of allowing small and medium sized companies to 'pilot' the logistics of running and managing their business. With the added symbolism of taking their business to 'new heights' by using the system.
I wanted the logo to represent this, while at the same time not leaning too heavily on traditional 'airplane' visuals. The paper airplane in an upwards trajectory accomplished this. Placing it on a cloud not only shows the plane in the sky, but the cloud represents this as a cloud-based solution.
With clean, sharp lines and simple, light visuals it is identifiable regardless of size and represents the brand well.
UI Design
-
Now that the brand was established I chose a few of the more complex pages to create full mockups. Since I chose a consistent layout for all sections of the service, simply mocking up a few of the more common pages was the quickest and most efficient way to move onto development.
I leveraged the logo design when it came to establishing primary and accent colors. All icons were created using a similar style of the logo to tie everything together. The end result was a clean UI that presents a lighter, more fun interfaces then you may find in traditional business tools.
-
Project Management
At PSPINC I tend to wear many hats. Along with coming up with the concept, and designs I was also critical when it came to establishing the initial project milestones and coordinating with our development teams.
The system was broken down into components (base app creation, account creation, customers, contacts, etc.). Once those milestones were created I gathered Engineers, Project Coordinators, Testers, and Front-end Developers to present the concept and establish timelines.
Initial Front-end Development
-
While I would inevitably turn over the front-end development duties to other Developers for future iterations, I wanted to take point in establishing a strong development foundation. I had a clear vision of how I wanted to structure the code to make it very component-based.
I wrote all of the initial HTML, CSS (compiled using Sass), and JavaScript to build out the visual prototype to be used for the application templates. All of the Sass partials were separated by component, with common mixins grouped accordingly.
-
Testing, Iterating, Deployment
All of my code was tested as I went and eventually handed off to our QA Team for a detailed review. After a series of bug fixes and iterated changes based on early UX tests, the end result was a mobile-friendly web-based application.
-
In Conclusion
I am extremely proud of the work done on Pilot. It was an opportunity to come up with an idea to grow our business and spearhead its design and development. I was able to lead a team not just of Designers, but of Developers, Engineers, and Software Testers.
Visit Online