PhizzPop Design Challenge - Creating a winning application in 3 days
Turning out an application using new software with only three days to do it is quite a challenge, to say the least. But that is precisely what we were challenged to do in the Microsoft sponsored, PhizzPop Design Challenge, Boston.
PhizzPop posed a particularly interesting challenge regarding process. No one builds applications in three days. So the challenge isn't really how do you produce a quality application, but more how do you squeeze weeks/months worth of work into three days to produce a quality application?
To answer this question, I thought it might be interesting to bring folks into our PhizzPop War Room and explain how we did it.
PhizzPop Design Challenge War Room
Brainstorming:
Moments after the challenge was presented, we opted not to go out for Microsoft-sponsored drinks and chose instead to take over a quiet room in the Microsoft offices to brainstorm. We immediately began to review the personas for user tasks and discuss what we believed would be possible with current technologies. Then, prompted by Jon, Outsight's Creative Director, we talked about "If the application was magic... what would we want it to do?"
Shortly after, we disbanded with research tasks for the night, each of us would research what was currently possible in the fields of -- home automation, green homes, blue tooth technology, home security, domestic robots, pet doors and environmental controls.
Mental Modeling:
PhizzPop Mental Model: User tasks grouped into categories that represent the mental model and will become the navigation.
Armed with what we knew to be possible (or at least imaginable), we reviewed our personas again, identifying all of the user tasks and writing them on sticky notes. We then grouped the sticky notes into categories that quickly became our mental model and the basis for our navigation.
Branding:
PhizzPop Branding Exercise: Quick and dirty branding exercise for fictional company and product.
A strong mental model will get you far, but strong branding will push you over the top. We took a break from application planning to review our personas again for the branding requirements. We needed an interface that would be "stylish", "sophisticated", "fun" and "minimalist". So we took magazines from various segments and pulled out ads with fonts, colors, shapes, personality, texture and logos/marks that could fit our fictional company and product.
Wire-frame Sketches:
PhizzPop Wire-frame Sketches: Quick and dirty wire-frame sketches
Generally, we use Microsoft's Visio to work out the interface through wire-framing. For this challenge, though, we needed to work quickly and together. We used large sticky pages to work to work through the elements of the interface and discuss and sketch the interaction as a team.
Wire-framing in Expression Blend:
Armed with our navigation and sketches of the major screens of the interface, we began implementing our wire-frames within Expression Blend. It was Wednesday night at 6 pm. We had two days left. The beauty of Expression Blend is that our team could wire-frame, style and develop within the same interface. To win, we knew we would have to leverage that functionality in order to reduce the overall time by reducing redundant activities found in our typical process - Visio wire-frames reproduced in Photoshop, then reproduced again in development.Design:
PhizzPop Design Sketches: Working out branding and look and feel.
Informed by the branding exercise and initial wire-frames, Jon began to work out the product branding and initial look and feel of the application in Photoshop. With years of experience and a strong passion for application design, Jon hit on the winning look and feel in his very first concepts. Jon created the rest of the image assets we needed (icons, family portraits) and then put Photoshop aside in order to begin styling within Expression Blend.
Building:
Again, the beauty of Expression Blend is that wire-framing, design and development can occur within the same interface. I was able to wire-frame missing interfaces while Jon styled existing ones and Brandon made them work. In theory, this is an amazing process with little redundancy and maximum re-use of assets. Unfortunately, this wasn't as seamless as we might have hoped. In practice, we found that if we styled interfaces after they were functioning, the functionality would often break and would often break in new and different ways.So, how do you condense weeks (or months) worth of process into three days?
We would have to answer:- Use a team of top-performers because it is faster to get it right the first time.
- Don't rush (or skip) necessary planning like user task identification and mental modeling.
- Don't get too precious with throw-away assets -- sticky notes tacked to a wall will work and keeps the team on the same page.
- And I would have to add... involve a project manager to help keep things moving along.
Post new comment