Wireframes and Site Architecture
As one of the larger projects i’ve taken on in my freelance work, I expected the task of designing a product customization wizard for a company like Staples to be dominated by business minded persons focused only on their requirements. I am pleased to say however, that after working for several months on designing a comprehensive suite of tools, the team was a pleasure to work with and was one of the most enjoyable projects i’ve had the opportunity to be a part of. Everyone was open to out of the box ideas, and took the time to understand the usability considerations that need to go into designing a consumer facing application, especially given the complexity of this one. It really made the project an enjoyable and just downright fun experience thanks to the people and process that was followed.
The project consisted of planning and designing a web-based application used by consumers or businesses to purchase personalized promotional products (you can see the live version here, but need to select a product and choose “customize” to get into the application). I lead the information architecture, site design & wireframing efforts from the project’s early stages through the first couple rounds of usability testing and hand-off for initial developing. It was a great experience to be able to inject usability and user experience considerations right from the start, which made my life a lot easier throughout the project. Key tasks that I was responsible for during the project included the following:
- Competitor evaluation to determine best practices, common usability issues, and opportunities for differentiation
- Lead white board sessions to sketch out low fidelity wireframes with a cross-functional project team
- Directed the information architecture of the site and created a detailed site flow combining wireframes and interactions to ensure a positive user experience
- Worked with Staples’ usability/user experience team to plan and conduct usability testing on two rounds of site prototypes
- Designed click-through HTML prototype using Dreamweaver for use in usability testing
You can view a sample of the wireframes embedded within a site flow/interaction document using the plug-in below (requires flash):