PieShares is a job equity and task organizer for startups and group projects, mainly centered around internet and software development. This is a very fun project to be a part of, which is still under ongoing development. This is mostly a study of my UX process – not of the actual app itself. This example is of my UX process in regards to sketching, wireframing and interaction design. It is not an example of user research or statistics.
From Concept to Sketches
Initial concepts and sketches took place with myself and the developer in the same room. We discussed the application requirements, the user or customer, and the objective we want the user/customer to achieve. This was done with good old-fashioned marker and paper. Ideas can be throw around easily, and the paper sketches give you a real tangible, visceral workspace.
Wireframing
From the paper sketches, I took the idea and turned it into paper wireframes. I drew these out on a 960 grid printout, since I knew we’d be using the Blueprint.css framework for the HTML. The sketches were drawn based on our previously discussed feature requirements, and also the user expectations. Projects aren’t made in a vacuum, and the user/customer need to be considered at all times. In this case, the users are developers and designers, which is convenient because that is who is making it as well!
Going Digital
Paper wireframes are refined and turned into PDF wireframes. All the digital wireframes are made in Adobe InDesign. Some people prefer to use off-the-shelf wireframing and flowchart software, but I typically work faster in traditional layout software like InDesign and Illustrator. I have Axure RP and OmniGraffle, but I keep on going back to the Creative Suite. At any rate, these wireframes are built up with the developer in mind, and will serve as the schematic that a software engineer can use to get started on building the product.
Mocking Up
As the wireframe and development continues, a high fidelity mockup was created to give the application some visual basis on which to develop. This was done concurrently with the actual software development. My preferred method of UX design is to do very rapid iterations with software development. This project was probably cruising along at an iteration an hour. Build, send, build, send, build, send. This doesn’t always work, but if you have the right UX designer and software developer, progress can happen very, very fast. I believe the iteration should be something that happens in a linked, leapfrog pattern. An arms-race between design and development, with one never getting very far from the other.
The Prototype
PieShares went up on a development box, where live testing and interaction evaluation could take place. Interactions and UX was tested in real time, with design and coding changes happening live, in a just-in-time fashion. Very quickly, UX and development decisions could be made and tested, and instantly coded into the site (or removed). If there was a gap discovered, I could go back to the UX drawing board and make up some wireframes or interaction maps right there, and send them right along to the developer.
An Abundance of Learning
This project was an exercise in process. The content of what we were making wasn’t as important as the methods and means. It was like cross training in the gym – hit all the areas you want to work on, and do it fast. Mental conditioning and strengthening of skills that can be used in any environment.
PieShares is not really set to be finished and released. I just wanted to talk about the process and method used for rapid development and UX.
