Designing the Pro Photographer’s eShop
Finally, the complex workflow between pro photographers and their clients is simplified in a beautiful, end-to-end web service; PhotoChute.
The Big Idea
Professional photographers have never had it easy; they have to piece together several different services in order to supply a well-rounded offering of products and services to their clients.
PhotoChute solves this problem by connecting vendors, photographers and clients all in the same system, in an easy-to-use interface that can be fully branded to the photographer’s company. It’s seamless, offers every product, and even supplies complex task interfaces for things like album design proofing.
The Approach & Process
Design-Led
I started with design; including the initial brand identity package. Building the brand first created the mental and emotional anchor for the project; aligning on how the product would “feel” kept the Planning, Design & Development teams working from the same playbook.
After the brand was built, several “potshots” of core complex interfaces were designed and built into interactive prototypes using HTML5, CSS3 and jQuery. These prototypes supplied a picture upon which we could iterate, allowing the team to move faster and from the same easy-to-understand starting point.
Integrated Design & Development
Rather than approach the build plan as a “hand-off” from Planning to Design, and then from Design to Development, each team collaborated to define their respective approaches and identify risks.
This approach allowed us to measure twice, but cut once. It took longer to get through planning, but the long-term pace quickened as a result of this early alignment effort.
I worked directly within the development environment—a Ruby stack of Rails, Angular, Javascript and AWS on GitHub—coding and styling the front-end interfaces while Developers built and connected the functionality. This approach meant that nothing went missing for too long, and Design & Dev could work concurrently to optimize detailed aspects of design & interaction.’
Phase 1: Discovery
Discovery started by white-boarding with the client to understand the existing pain points in detail, and begin logging requirements to enable change.
Outputs from white-boarding sessions were synthesized, then turned into Task Models and Information Architectures.
Phase 2: Practical Prototyping
I began by designing high-fidelity versions of key interfaces using Photoshop.
After proving interface and interaction concepts with design and clickable prototypes, a fully usable and interactive HTML prototype was built. Here’s that prototype in action:
Phase 3: Iterative Development
Once the front-end prototype was built using HTML and CSS, browser-specific fixes and responsiveness were implemented and then intergration into the Ruby-on-Rails back end kicked off the iterative, agile development.
Thanks for reading!
