One of the most exciting prospects of being able to work full time on PhoneGap (rather than needing to spend most of the time on consulting projects) was the potential to build out all of the “missing pieces” that the team had wanted to focus on for some time.
One of the nagging sentiments that we’d heard over the course of the project’s lifetime, was that “PhoneGap apps aren’t good at ______”. Where _____ could be “performance” or “user experience” or “games”...or any other number of suggestions, really. While we continually tried to make understood that any technology could produce poor results if care isn’t taken, we would ultimately hear the request for the best examples of PhoneGap apps.
This was another interesting situation, being as how there was never any requirement for anyone to report that their app (amazing or not) was built with the technology. Sure, we tried getting the community to submit their apps to our showcase, and requested access to development teams to build out strong case studies from some of our more long-term customers, but we also knew that it would be helpful to our community to have full, open access to see exactly how the best examples were built.
So, I took on the task of designing a couple of apps that would be completely open sourced, and which could be used as reference materials in our own documentation. The first of these “demo apps” was a to-do list application, called Threedoo, that was geared towards including then-current UI practices as well as popular device API plug-ins that our community was consistently using and looking for help with.
I started this project out by creating a quick sketch of two screens - the list of lists, and the list of tasks. Functionality was based on a quick competitive review of other task list apps.
Quick sketch (on paper) of a couple of screens for the Threedoo demo app.
I came up with a quick colour palette, then created a logo and app icon, followed by a swath of mock-ups.
Colour palette exploration, logo ideation, and app icon creation.
A small sampling of the mock-ups created for the to-do list app, Threedoo.
I then created a user flow diagram to outline the details of each screen and how it was all tied together.
Full user flow diagram for the Threedoo app.
A zoomed in view of the user flow diagram.
It was worth going into significant detail in the user flow document, as I was uncertain who would be implementing the app.
The second demo application was geared towards tech conferences, the idea was it that could be re-skinned to match the brand of each conference. At the time, I was attending a lot of developer conferences and noticed that not many of the websites had the kind of information I wanted to see as an attendee (like a quick-to-reference schedule that could be personalized, and an easy way to look at speaker info) so I decided to design an app to solve these needs.
First I created a detailed information architecture spreadsheet, to nail down all of the necessary screens and related functionality. Then I moved into doing wireframe sketches, and included interaction and implementation notes is this asset. Interestingly, I had always liked to draw wireframes, usually using either a whiteboard or graph paper, but decided to try out using an iPad mini and a crummy sponge-tipped stencil. It actually worked out nicely, and I have since moved to using an iPad Pro and Apple Pencil for all of my sketches.
Detailed IA spreadsheet.
A few of the wireframe sketches I created for the white label conference app.
I walked through the sketches with the developer to clarify and confirm, and he used these sketches to get the app functionality and scaffolding going, and then I moved into creating mock-ups. I used the data and a few brand elements from a couple of then upcoming conferences as examples.
A few of the mock-ups for the white label conference app, showing how it might be skinned for different events.