Simplifying university UX and content strategy

responsive2
Subject Area content formats enabled the organisation of university content by category rather than hierarchy. This radically reduced complexity and aligned with user needs.

Academic Unit content format

Academic Unit pages reused definitive content. This removed the hidden cost of deeply nested websites whilst improving content governance, quality and performance.

Client

City University London. A complex institution with fragmented digital content.

Project

Unifying two university schools — with 17,500 content items across 6 web servers — to create a solution that was aligned with user needs, structured content for reuse and responded across all devices.

Role

User Experience Architect

Team

A cross-university team:

  • Website Manager
  • Editor
  • Digital Designer
  • Front-end Developer

Methods

  • Stakeholder Interviews
  • Competitor Analysis
  • Content Auditing, Analysis
  • Analytics (web, click-stream, search)
  • Testing (guerrilla, remote and lab)
  • Content Modelling
  • Object-Orientated UX
  • Sketching, Wireframing
  • Co-design, Pairing

Headline Result

99.7% reduction in content through intelligent use of COPE princples.

Design Process

Understanding the problem

The initial assumption was that that multiple school websites could be merged and that this would be straightforward. I created a process to explore this idea. It also sought to include the project sponsors and ground decisions in content and needs. During our research we learned…

Stakeholder Interviews

  • Dean & COO
  • Department Heads
  • A silo’d mentality regarding the web estate.
  • Surprise at the true scale and complexity of the sites.
  • Open mindedness about alternative solutions to the objectives.

What are the alternatives to merging the existing sites?

Competitor Analysis

  • 2 baseline
  • 4 direct competitors
  • 2 sector best practice
  • Content complexity — most were ‘websites within websites’.
  • Content re-use could reduce content volume (to >100 items).
  • Category (vs. hierarchy) organisation could be more effective.

Can we outperform the competition via content design?

Competitor Analysis spreadsheet

Competitor Analysis worksheet.

Content Analysis

  • Content inventories
  • Site mapping
  • 1,300% more content than assumed in the plan.
  • Content duplication, redundancy and triviality were extensive.
  • Content governance was nearly absent at school-level.

Is merging the existing content still feasible or desirable?

Site Map

High-level content audit site map.

Analytics

  • Content
  • Site Search
  • Click-stream
  • ±80% of content received fewer than 10 unique visits per year.
  • Top tasks were near identical to other schools and the university.
  • General Content Page templates undermined the UX.

If top tasks are the same, do we need school websites?

Click-stream visualisation

A homepage. 3.5k visits, 3.3k clicks.

Usability Testing

  • 2 remote pilot studies
  • 6 guerrilla tests
  • Findability — school and university content competed in search.
  • Content verbosity caused problems for readability and mobile.
  • Inconsistent interfaces caused confusion and harmed trust.

Will merging the sites perpetuate the poor UX?

Mobile usability testing

Guerrilla testing on a tablet.

Outcomes

The project decided to pivot from its initial assumption when it became clear that:

  • merging the existing sites would be complex and would make a poor UX, worse,
  • extensive content re-use — from central university sources — promised simplicity and consistency.
Modelling content for reuse

Once the pivot in project direction had been agreed I defined and agreed the core user needs. These drew heavily on previous user research for similar schools, in addition to the research for this project. I also worked to explore ways to engineer definitive content from diverse systems for reuse to meet these needs.

User Stories

I introduced user stories to record, track and prioritise the core user needs uncovered in our research. These were essential to ground our thinking and conversations in the user’s mindset…

Co-Design

  • Sketching
  • Paper prototypes

…I then co-located early with a new Digital Designer to pair-design possible content patterns and formats which had been uncovered in our competitor research…

Sketching content patterns and user interfaces for statistics

3 iterations of a content pattern.

Content Modelling

Principles used:

  • COPE
  • LATCH
  • No General Content Page’s

…whilst also working with Marketing and Development to define ways to re-use definitive content, improve its performance and to reduce editorial costs…

Modelling Categories and re-use.

Definitive content re-use.

Modelling Categories vs. Hierarchies.

Modelling Categories and re-use.

Object-orientated UX (OOUX)

…I also used an Object-Oriented approach helped us to understand the intersection between content, systems and user stories before we began interaction design…

OOUX Model

Defining objects before actions.

Outcome

The Website Manager and I presented the project’s design intentions to the Dean and COO of the new school.

They were happy with our progress and the project progressed to the next stage…

Pair-design and prototype testing

Prototyping

  • Paper to HTML
  • Real content
  • Responsive

…I co-located again with the Digital Designer to pair-design these new content formats. We paper prototyped interfaces that built on the earlier work before moving to HTML…

Testing and Iteration

  • 2 remote pilot studies
  • 8 (4×2) remote tests
  • 12 (6×2) interaction lab tests

…we tested these designs remotely before bringing the team to an interaction lab. This enabled us to engage senior stakeholders, which was essential for these radical concepts…

Stakeholder issue logging sheet.

Issue logging sheet (Stakeholder).

Outcomes

Frequent testing cycles were crucial to iterate away complexity, refine content priority and to validate the concepts.

Contact-time with users helped to build trust and establish the vision across the project team.

Build and migration planning

Digital Design

  • Photoshop

…once the core designs had been agreed our Digital Designer created high-fidelity mockups which could be passed to Development

Photoshop mockup

Photoshop mock-up (desktop UI).

Development

  • Design translation
  • Content engineering
  • CMS configuration

…I sat with Development to translate the design rationale and to set-up the content retirement plan. We also worked to simplify the CMS interfaces for the new content formats…

Content creation

  • Documentation
  • CMS training

…I then trained the Digital Content Team so that they could create the 4 new Subject Areas and 21 Academic Units which replaced the constellation of existing sites…

Launch and monitoring

Validation

  • Walkthroughs
  • 6 remote tests

…Finally, I systematically checked production for issues, which I prioritised and reported. I then ran additional usability tests which confirmed the expected performance.

Results

99.7% reduction in content
±17,500 content items, 6 webservers and 3 CMSs were responsibly retired.
Repurposable content formats and patterns
delivered improved readability, content governance and were designed around user needs.
Simpler and consistent
definitive content, dependable interfaces and user journeys improved findabiity and trust.
Enduring relationships
were established across university teams. These increased the effectiveness of my role on subsequent projects.

Lessons

Worked well

Co-location improved clarity, speed and frequency of communication. A permanent UX hot desk was set-up.

Pair-design enhanced creativity, the speed of iteration and helped to establish the new Digital Designer role.

Senior stakeholder engagement early — and throughout the project — was crucial to build the trust necessary for a radical change in design/p>

Insights

Transformation is slow. The full effect of a primarily category-based university site structure is dependent upon school-by-school re-designs.

HTML prototypes were great for rapid iteration, especially for responsive design. However, the fidelity of the mockups meant that some participants kept assuming they were final designs.