Norfolk State University
Case Study
Norfolk State University
Norfolk State is an HBCU with deep roots in the local community and a proudly supportive alumni base. It has strengths in technology, sciences, nursing, business, and liberal arts but an academic reputation that lags behind actual performance. As one stakeholder characterized the institution, “We often fail to tell about the good work we are doing”
Its web site at the time was a conglomeration of over 200 web properties with siloed content and a decentralized editing/authoring system that lacked a cohesive governance system. My charge was to bring the site under a single content management system, align it with recent branding efforts by agency Fuseideas, and tell the NSU story.
The multi-faceted audience extended well beyond the complexity typical of high-ed sites and included active duty military from nearby Naval Station Norfolk, first generation college students, and – as it turns out – the cabbie who picked me up at the airport (and whose remarks found their way into my findings presentation).
My final recommendations formed the foundation for a new, responsive web site:
- Create site that primarily targets prospective students and their parents with content that answers their questions
- Provide appropriate content for other audience groups and channel them thoughtfully
- Reflect the new branding initiative developed by Fuseideas
- Tell the NSU story authentically and in the context of its rich history and place in the community
- Break the silos and make content easy to find
- Build on modern CMS for ease of content development and maintenance
- Create and implement a governance plan
Tasks & Deliverables
- Week of on-campus discovery workshops with stakeholders and student groups
- Heuristic review of NSU and related sites (Landscape Analysis)
- Personas & user journeys
- Discovery findings with stakeholder presentation
- Site Map
- Wireframes
- Functional Annotations / Development Specs
Similar Projects & Clients
- Boston College
- Dean College
- Dominican College
- Goucher College
- Hamilton College
- Iona College
- Massachusetts Institute of Technology
- Northeastern University
- Plymouth State University
- Simmons College
- St. Anselm College
- University of Virginia Darden School of Business
- William Paterson University
- Wilson College
UX Timeline & Work Samples
Planned and lead week-long discovery workshops, interviews and focus groups with: site adminstrators and IT; university leadership; deans; Enrollment Management; University Advancement; Office of the Registrar; student experience and campus life staff; current students; and, prospective students and parents.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Landscape Analysis” use_read_more=”on” read_more_text=”View Landscape Report” read_more_url=”#landscapeanalysis” font_icon=”%%1610%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.4″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Conducted heuristic review of NSU site and web sites of several competing/aspirational sites in the higher-education space. This helped to create an understanding of the digital ecosystem within which the NSU site existed and to tease out emerging best practices. Emphasis was placed on regional HBCUs and other colleges and universities which draw from NSU’s student base.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Personas and User Journeys” use_read_more=”on” read_more_text=”View Personas and Journeys” read_more_url=”#personas” font_icon=”%%1424%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ _builder_version=”4.0.5″ custom_button=”on” button_bg_color=”#698943″]
Drafted 6 personas to illustrate how key audience segments would engage with the new NSU web site. Personas covered: prospective and current students at the undergraduate and graduate level; parents of prospective students; active military seeking continuing education; and, alumni. User journeys rounded-out this deliverable set and cross-referenced user goals established in persona development.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Discovery Findings Presentation” font_icon=”%%891%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ _builder_version=”4.0.5″]
Presented findings from discovery phase to web team then to university leadership (cabinet and dean level). As is often the case in large, agency-driven, web projects, the Discovery Findings became the basis for the agency to estimate full design and development scope while I segueued into the Information Architecture phase and began drafting the high-level site map.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Site Map” use_read_more=”on” read_more_text=”View Site Map” read_more_url=”#sitemap” font_icon=”%%1267%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.5″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
University web sites tend to have large, sprawling structures maintained by different academic and administrative divisions. Page count is typically measured in the tens-of-thousands with the site map development process broken into a high-level stage, used to obtain initial client buy-in, followed by a more detailed site map that goes down to the tertiary and quaternary site levels. NSU’s previous site was unusually siloed, so a complete restructuring was needed.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Wireframes” use_read_more=”on” read_more_text=”View Wireframes” read_more_url=”#wireframes” font_icon=”%%1866%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.5″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Developed user-centric wireframes founded on discovery research and recommendations.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Design Review” use_read_more=”off” font_icon=”%%785%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.4″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Briefed-in agency designer and participated in internal design review meetings to ensure feature continuity from UX through design.
[/et_pb_vertical_timeline_item][et_pb_vertical_timeline_item title=”Functionality Annotations” use_read_more=”on” read_more_text=”View Annotated Design” read_more_url=”#designannotations” font_icon=”%%1788%%” icon_color=”#698943″ circle_color=”#ffffff” line_color=”#e09900″ animation=”fade_in” _builder_version=”4.0.5″ background_color=”rgba(0,0,0,0)” background_enable_color=”on” custom_button=”on” button_bg_color=”#698943″ button_border_width=”0px”]
Annotated design files with functionality specifications for hand-off to agency developers.
[/et_pb_vertical_timeline_item][/et_pb_vertical_timeline]
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.
Site Map
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.