» Photos     » Pac Man      » Contact

Postling Redesign

Friday, April 23rd, 2010

Back in April, David Lifson of Postling hired me to redesign their application platform. To be more specific I was hired as a User Experience Consultant to not only rebrand the product but also to redesign how users interact with the platform. I'd like to share with you a little bit about how that process went and the outcome. If you are a product owner, a developer or just a person with an idea, this article should give you a very good idea of why design and user experience is an important element. It should also give you insight into what you should expect when working with a user experience consultant or designer. I welcome your thoughts and opinions...here we go!

*Note: I am prone to run on sentences.


1. Know who you're designing for.

This is the first step in any redesign project regardless of it's a Web-based product, an e-commerce Website or even a personal Website. Ideally it's best to talk to real customers who you can model user personas after. In this case that wasn't possible so I worked with Dave and Alexis Lamster, VP of Customers to develop personas based on what we knew about the small group of existing customers. This exercise helps define the different types of users who will be using the project, which in turn informs design decisions around how each persona interacts with the platform. Through putting together a list of goals and motivations we can then model typical scenarios around each user and start to think of features or interactions which accommodate those scenarios. For example, if we know that one high-level goal of a particular user is to read and respond to all comments, Twitter direct messages and Facebook private messages then this informs us that the design needs to not only account for some way of sifting through and reading these messages but also a way to quickly reply without leaving the context of this information.

Postling (Click image to see enlarged version)

2. Know the platform.

This might seem like a no brainer, "duh, know the platform." However, there's a lot more to it when you start digging in. It's not enough to just have a general idea of what the platform does and its basic functionality. The devil is in the details and this no exception. As part of this phase, I put together what are called "Organizational Models." The Org Models are basically a site map of the application as well as its features and components. (The example below is only one page out of this larger document). The goal of the Org Models is to make sure I as the designer understand everything the application is supposed to do (current and future behavior). It's also to make sure nothing gets left out in the next phase of work. In a typical user experience engagement, each phase of work informs the next and you can't start one until the previous one is finished. This process allows the team to continue to build on the knowledge that is discovered.

Postling (Click image to see enlarged version)

3. Sketch, sketch, sketch and make it collaborative!

I can't say enough about the power of collaborative sketching. Whether it's on paper, on whiteboard or on a napkin in a bar. It's how ideas are born and it's one of the best ways to communicate and validate your thoughts and ideas. I highly recommend sketching with your client or product owner - and frequently. This gives you (the designer) a chance to have all important stakeholders express their feedback - stakeholders like: the product owner, the developer, the person representing customers and so on. I did collaborative sketching with all these folks and it definitely paid off. The sketches don't need to be beautiful they just need to convey ideas, which can also be done by talking through the sketches. It's a great way of interacting and uncovering important details.

Postling (Click image to see enlarged version)

4. Build comprehensive wireframes.

Ok, so everything we've done up until this point has given us the knowledge we need to adequately design and develop a comprehensive wireframe presentation. What do I mean by wireframe presentation? Everyone does this a little differently, but what I like to do is wireframe each single component that the user interacts with and walk the client through these interactions using the wireframe presentation. This single screen below shows all of those interactions pulled into one screen that ties everything together. If you have gathered all the knowledge from prior phases properly, this part should be a breeze. :)   (This is one screen from a 41 page document)

Postling (Click image to see enlarged version)

5. Let the fun begin: design high-fidelity design comps (and bring the awesome).

This is usually the really fun part of the process for the product team and/or product owner as they finally get to see all the hard work in the form of a real life design! In this case I rebranded the platform as well as re-architected the user experience. The only real new thing the product team saw during this phase was the rebranding look and feel. All the other details and interactions had already been thouroughly designed, vented and validated through the sketching and wireframing process.

Postling (Click image to see enlarged version)

So there you have it! This is just a glimpse into the process and types of deliverables in a typical user experience engagement. I'd like to thank the team at Postling. I hope you like this article, if so (or if not) please feel free to leave me a comment.


blog comments powered by Disqus
Olark Livehelp