High fidelity wireframes

Redesigning the Four Kitchens website has been on our to-do list for a while now. This summer a group of team members had a month to dedicate to the project. All of us agreed that the content needed updating, so creating new content and moving away from the Jekyll environment were the primary objectives. Even with these limited goals we quickly realized that our objectives were too large and needed to be scaled back. We decided to delay some of the new content creation until after launch. Additional objectives such as a new visual design were scheduled for a later phase.

User experience for ourselves

As the user experience strategist on the team, my role was to develop the information architecture for the new content, develop wireframes, and of course consider the user experience. I would create and revise a site map to aid the discussions on the current content, the new content we will create, and where each content item should be located on the site.

We also had many discussions on what to call our navigational items. Since we planned to add one additional navigational item now, and are considering introducing more navigational items in future phases, we decided to create short single-word navigational titles and expand on content meaning with more conversational page titles.

Iterating design with real content

After agreeing upon our site map (though additional ideas continued to influence it through the life of the project), I began working on the wireframes while our editor, Doug, started to provide the new or updated content. Since we were not actually redesigning the website during this phase, I was able to start with much of the existing component design in the new wires. Knowing this I decided to create high fidelity wireframes which surprised my colleagues. But with these high fidelity wireframes and the new content, we were able to see that some first drafts of text were too long and needed to be edited. This high level of design allowed us to determine how much text was needed for components on each page.

Since this project did not have a backend architect, our frontend designer, Joe, undertook the task. While I provided tweaks to the wireframes, Doug was able to make revisions to the copy so that the two would work together for all of the pages. The high fidelity wireframes allowed for the continued progress of the site, where each person was able to get feedback to finalize the content elements prior to starting coding. Joe had the additional time to setup WordPress on a staging site, install the needed plugins, and establish the content model. Based upon the wireframes, Joe was able to set up the CSS and Aaron, one of our fearless leaders, created and resized all of the imagery that would be used on the new site.

Keep it moving

Normally I wouldn’t consider creating high fidelity wireframes, but I felt it kept the project moving along answering layout questions earlier in the process. When you already have a design and working with finalized content, high fidelity wireframes might be just what the team needs to make decisions quickly.