The first step for this project was to identify and understand the general problem(s) that need to be solved for the organization, how we could solve them by delivering value to users, and the specific means of building that solution.
- Stakeholder & User Interviews, Surveys, & Research Findings.
- Heuristic Analysis & User-Interface (UI) Audit.
- Personas, Empathy Maps, & Content/Feature Requirements.
- Card-Sorting, Information Architecture, & User-Flows.
Card-Sorting & Tree-Testing - These research methods were used to build a comprehensive and understandable information architecture for this large website.
Personas - Detailed Personas were produced to keep each type of user (and their unique combination of needs) in mind.
User-Flows - These were used to map out how users would progress through the website, and what content/features they would need at each step.
With our research completed, we began wire-framing using pencil and paper sketches; this provided a quick, easy, and inexpensive way to play with ideas that were refined into a testable design. From there, we began to flesh out a style guide that communicated the desired brand message to tennants, business partners, and executive decision-makers.
- Wireframe Sketches.
- Refined Wireframes.
- InVision Prototypes (for User-Testing).
- Style Guide.
Wireframes - Detailed wireframes were designed and refined for each page (and device size), and through several iterations became the basis for the prototypes that followed.
Style Guide - A complete style was produced to outline the visual style, grid system, and design assets to be used for each element of the website.
Brand Essence Wheel - A renewed set of brand impression targets became the foundation for the visual design system.
Testing & Validation
To keep the website re-design as user-friendly as possible, several rounds of usability testing were conducted as the prototype matured. Starting with a wireframe-based version so that participants could focus on the structure, content, and functionality, several iterations were produced on the resulting feedback before visual styling was applied to the refined prototype.
- User-Testing & User-Interface Refinements.
- Finished Design Mockups.
- High-Fidelity Prototype.
Usability-Testing - Mock-ups were constructed from on-going usability-testing, and additional improvements were noted for each batch of users.
InVision Prototype - Interactive Prototypes were used in the final stages of testing before the design was submitted for development.