Prototyping
With a clear vision of what AIR’s website could accomplish, we began generating design ideas to shape prototypes of the future site. We incorporated the best of these ideas into our early designs. We then refined our designs iteratively by developing prototypes, testing them with potential site visitors, and then acting on this feedback to generate the next round of improved prototypes. We ultimately executed three rounds of prototyping that steadily improved our designs, using models of AIR’s website structure, low and high fidelity paper prototypes of the website, and both low and high fidelity functional websites.
Iteration Round #1
During our first round of prototyping, we modeled the current site’s structure and fashioned low-fidelity paper prototypes of the homepage, focus areas pages, and areas of expertise pages. We experimented a bit with color and imagery, but this round primarily focused on the selection and layout of content. Key findings from this round included:
- Participants consistently expressed confusion about the relationship between focus areas and areas of expertise on the site.
- On the homepage, participants preferred a small number of high-resolution images instead of a larger number of smaller images, and any usage of stock photography detracted from the site.
- Restricting colors to an analogous group keeps the site looking professional.
- Participants volunteered that they found employees featured on the homepage compelling and wanted to learn more about these individuals.
Iteration Round #2
During our second round of prototyping, we proposed a new model for the site’s structure, created new low-fidelity paper prototypes, and built a low-fidelity but functional website. Key findings from this round included:
- Duplicate pages of content for multiple areas of the site create unnecessary confusion.
- Participants appreciated the robust search and filtering functionality provided by the prototype, but placement of individual search fields affected their use.
- Moving projects, reports, and products down a level in the site’s hierarchy better distinguishes them from topics (areas of expertise).
- The low-fidelity functional website featured navigation with two tabbed menus, but we rejected this navigation after some participants expressed confusion about the layout.
Iteration Round #3
During our third round of prototyping, we produced high-fidelity paper prototypes with a fully fleshed-out visual design, and we built a high-fidelity functional website that mimicked this visual design and supported advanced search functionality. Key findings from this round included:
- Participants reacted favorably to the icons we integrated into the site’s overall visual design.
- Although participants vastly preferred real photographs to stock photography, as in previous rounds, the importance of increasing imagery on the site made stock photography preferable to having little imagery at all.
- The internal political implications of selecting which employees to feature on the site could be addressed with solutions including random selection, featuring recently promoted employees, or simply rewarding filling out a questionnaire with being featured on the site.
Early paper prototypes illustrated our ideas but could be easily marked up and changed.