Everything begins with a sketch; actually, everything begins with stakeholder buy-in when working within an Enterprise organization.
KMBS needed to completely rebuild their existing public-facing website; this meant we had a chance to completely reorganize the site architecture and taxonomy to bring it up to date, but to also make sure it would be compatible with the newest version of the IBM WebSphere CMS.. The new approach favored heavy photographic assets and visual design.
Once the initial draft of the sitemap was complete, I began with sketching and wire framing. Beyond the initial basic wireframes, everything was done according to development sprints led by the third party developer contracted for the project. We would often go from initial sketch to realized design in a day. This was very fast for an organization that had had no exposure to a UX workflow or agile development.
Image Key:
1) Product Page sketches optimized for the marketing funnel. Doing sketches with color often helped the managers that I worked with to visualize what the final design would look like without me having to get them in front of a screen.
2) Persona-based content was a very big feature desired by executive management. This sketch was my way of blocking out components that could be interchangeable with four persona types we were being asked to design for.
3) This image shows a projection of a wireframe onto a white board where we were designing for our IT Services branch who flew in from San Francisco to hammer out the details.
4) An example of my problem-solving process. We were given a requirement for a product comparison feature on our product pages. Rather than redirect to another page I opted for a modal that displayed a total of three products (I was limited by what the CMS could display). The user could return to their search page, or continue on to different product pages.
5) Our collaborative and ever-evolving site map. Color coded according to page template.
6) An example of how wire-framing progressed during the project. Wires were initially bare-bones, but as the visual designs came together more elements were added in order to expedite the front-end development effort.