Research | Design | Develop
Every morning, I would unlock my photography studio door, grab a mug of coffee, and look at what the day’s task would be for each project. Every evening, I would fill the tasks I completed with a dry erase marker, knowing that I was exactly where I needed to be in making sure my projects were up-to-date and my clients were happy.
While my studio workflow chart did wondrous things to keep me on-track, it was not something I could just pull out of my pocket and reference when I was away from my desk.
As a primarily on-location photographer, a good portion of my work time was spent away from my studio - sometimes meeting clients at coffee shops or waiting for my next shoot at the park. Occasionally, I'd wake at 3am, and wonder, “Did I place that order for the Pino Family?! I hope I sent Lucy and Adam their contract… I’m pretty sure I did…?” I needed a way to access my workflow chart without having to drive to the studio.
I designed and developed Daily Dot to provide a digital version.
As my own primary user, I had pretty good insight into what my requirements would be, and I had already completed most of my heuristic analysis through my search of a product that already existed for this purpose.
I tried multiple to-do list apps for my phone and larger-scoped CRM programs such as 17 Hats, but ultimately, I found them too cumbersome for tracking my specialized workflow. Having to type in the same workflow every time I got a new client was ineffective and often difficult to navigate, and I needed something that would work on my phone.
I also did not want to abandon my studio chart altogether for something that approached the process differently. I really enjoyed the feeling of physically filling in the dots for each task! This simple act needed to be the main point of interaction between my user and the application.
The design would be simple and responsive, making it just as easy to swipe through each client project on a phone as it would be to swivel my chair at the studio. My wireframe was essentially already drawn up, in its analog form, on my wall. I added a hi-fidelity version of the desktop-view in Sketch and created a mockup of its phone-view in Illustrator.
The clearest way to develop the structure of my dashboard was by using HTML tables. Knowing that HTML tables can sometimes be a bear to design, I wanted to dive straight into the code to make sure my design would be functional across multiple devices. I chose Bootstrap 3 as my site’s framework, but adding its table-responsive class merely made the table scrollable at smaller browser widths. It was a solution, but scrolling and pinching and zooming in and out on my phone made the app unusable.
A user needed to be able to swipe or easily navigate from client-to-client on a phone while still being able to see the workflow task list on the left. By implementing tablesaw.js in my design, I could now open Daily Dot on my phone and swiftly navigate and reference each client project.
For each task's "dot" andthe lines connecting them, I used SVG canvases. I found SVGs particularly challenging to style with Javascript and jQuery. While they are functional as-is, I would love to improve my work-around. With the upcoming jQuery 3.0 release, the manipulation of SVG classes is anticipated to improve. I’m excited to test these specific improvements to refactor this aspect of the application.