Expanding the Toolset
As the popularity of the PhoneGap framework grew, so did the diversity of the user base. The skill sets and working styles of people building apps with PhoneGap ranged significantly, and as such we wanted to expand the developer tools to accommodate these needs. PhoneGap Build, a service for compiling apps in the cloud, was the first tool to facilitate the need to compile cross-platform apps. Facilitating easier local compiling and testing were the next logical steps. The tools created to achieve this are the PhoneGap Desktop App and the PhoneGap Developer App.
Desktop App: Late 2014 thru mid-2017
The PhoneGap Desktop app was originally created as a proof of concept, by the product manager and a software engineer working on the team. The goal was to provide PhoneGap users with a highly requested GUI to: create & delete a project, and start & stop a server for previewing/testing a project on a mobile device, ultimately aiming for feature parity with the existing CLI. A proof of concept was created by a developer with input from the product manager, at which point I jumped into the project to flesh out the feature set, workflow, and design.
I started by working with the team to better understand what we could build, why we were building it, and what had already been developed. As in many projects, this meant a lot of thinking with handwriting, that I then translated into digital documentation for the whole team to reference.
At this stage, I also completed a competitive review to better understand the landscape. At the time, there weren’t any tools that were direct competitors to what the PhoneGap team was looking to build, but there were local server tools to reference (which were a similar feature set to the Desktop App) and also the GitHub Desktop app, which was a great example of translating a command line interface into a graphical user interface.
Once I had a clearer picture of what we were building, I worked to create low fidelity sketches to articulate the screens and interactions, with the developer and product manager “in the room” to vet the concepts at this early stage.
Low fidelity sketches
Rather than create medium fidelity wireframes I moved on to create mock-ups which included each screen and component states in context.
High fidelity mock-ups
As these mock-ups were being implemented, I worked side-by-side with the developer by accessing nightly builds and documenting any interaction, visual, and motion design issues that came up, in our public issue tracker. As is often the case, technical constraints would come up that needed to be solved for that couldn’t have been predicted. An example of this: opening the user’s file system dialog during the “Create” step wasn’t possible with the framework we were building the app with. The developer came to me with the issue, to determine that it was a key feature, and then worked to find and contribute to a community plugin that would solve the need.
Utilizing the public issue tracker to communicate and work through issues with the design.
Shipping early and shipping often was always a tenet on the team, and it was no different with the Desktop app. We released alpha versions of the app to gauge interest and build on what we learned. As the product began to solidify, we started to encourage and observe usage as a beta app. A natural partner to the mobile app (which I cover below), we began to market to developers how the two worked together, through both documentation and a microsite.
App microsite that I designed and implemented
As a consistent and continued effort to engage with the community, the PhoneGap team: hosted yearly conferences both in the United States and Europe, held workshops for beginners through experts (contributors) and attended local meet-ups across the globe. At these events, I utilized the opportunity to conduct usability testing and to observe the Desktop app being taught and used in the real world. I also remained engaged on the public GitHub repo and forums where users had the ability to file issues and support requests - this helped me to understand where problems were arising, and I worked to continuously improve the app.
An example of improvement based on user feedback, is the addition of the ability to create an app based on a template. Previously, only a “blank” PhoneGap was created, but the community was requesting more fully-functional example apps and templates be made available. I worked to update mock-ups and ensure quality implementation to see this feature added.
We incorporated the desktop app into our getting started guide on phonegap.com, and saw the number of users grow and remain consistently active. I continued to work on considering the Desktop app as a part of the family of developer tools, and with the product manager worked to concept the next big iteration which would have included incorporating the PhoneGap Build service.
The concept development phase was completed, but the team was disbanded before it could be fully designed and implemented.
Developer App: 2016
The mobile app that was created to allow for faster-than-compiling access to testing on device, the PhoneGap Developer app, needed a facelift and some other reconstructive surgery to get it inline with the newly-created Adobe design language, to address some usability/connectivity-related issues, and to add some new capabilities. I worked with the product manager to define and fully understand the new version’s intended features, and developed annotated wireframe sketches that I presented to the team who would be working on the implementation. We vetted the concepts, and I made revisions based on their feedback.
As the developers used the wireframes to begin wiring up the additions, I dug into the new Adobe design language and its components. There were not yet any implementations of the spec, and the spec itself was still in its relative infancy, not yet accommodating for mobile devices. Nonetheless, we had decided as a team that using the design system was the most effective moving forward, so I created mock-ups based on the desktop version, and fed back to design system team the recommendations and requirements that I had for mobile.
High fidelity mock-ups