Landscape Analysis (Heuristic Review) Sample Screens
Summary findings presented as a heat map (green = excellent, red = very poor). The heuristic criteria evaluated are listed along the top with averaging in the right-most column.
Screen showing highlights of heuristic evaluation of NSU site. The full report included a deep-dive analyzing the university across all heuristic criteria considered.
Sample screen from best practice call-outs gleaned from Landscape Analysis.
Because the prior web site was extremely siloed, the NSU site had to be completely restructured to bring it into alignment with branding and audience-centric communication objectives. This high-level site map was actually presented in the Discovery Findings Report to obtain client buy-in for the new direction before delving into the more granular site map below.
The detailed, final, site map shows pages as far into structure as the quaternary level. Given that higher-ed sites often have thousands of pages, many of these pages also have child pages and sections not explicitly called-out. To aid content development, I often map-out representative site sections (e.g. Academic Departments) that can be repurposed elsewhere in the site.
Wireframes – Sample PAges
Home page wireframes for NSU in desktop and mobile variations:
1. Main menu navigation
2. Hero space for primary messaging
3. Audience segmentation menu, allows exploration through self-identification
4. Spotlight region with optional video
5. Rotating factoids
6. News and social modules
Note: Unless the project parameters dictate otherwise, I intentionally keep wireframes rough and low-fidelity. I have found over the years that higher-fidelity wireframes tend to prematurely lock-in visuals and create unnecessary design contraints. Competent visual/UI designers are best left with broader creative freedom and high-fidelity wireframes tend to lead to unintended design decisions.
Additional wireframes showcasing program search functionality and destination page. On the search page:
1. Reassuring information on being undecided (surprisingly important)
2. Program search form
3. Sortable search results
And on the program description page itself, a structured presentation of information leading to end-funnel calls-to-action:
4. Background on the degree program
5. Description of courses and program requirements
6. Program outcomes and student success
7. Critical calls-to-action leading to different points in decision funnel
Functionality Annotations – Sample Page
Coding of the NSU site was completed by the agency development team in Prague. To facilitate a smooth transition of the site vision, I annotated a set of black-and-white design files with functionality notes.
Every component/widget on the site was tagged with a pop-up tool tip so that developers could follow-along visually as they built out the new site.
By way of example, four tool tips are shown in an open state on the home page design.
Personas & User Journeys
This persona represents the parents-of-prospective-student audience archetype. One of six personas developed for NSU, it is broken into three screens. This first screen covers James and Aisha’s key characteristics, challenges and opportunities posed when helping their daughter select a university, their overarching mindset, and high-level takeaway from visiting the NSU site.
The second screen of the Parents persona shifts to the tasks James and Aisha will be performing on the NSU web site. these tasks take place over multiple site visits throughout the application process and represent their journey through the decision funnel. These tasks are later used to define milestones in their user journey.
The third screen of the Parents persona links thier site visits back to NSU’s business objectives.
User Journeys were developed for each of NSU’s Personas. These play out over several screens, representing multiple site visits as the parents become engaged with the university through their daughter’s college selection process. The Journeys cross-reference user tasks identified above to help shape an audience-centric site and inform site map development which followed.