Skip to content

design history #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devansXD merged 1 commit into from
Feb 13, 2026
Merged

design history #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .azad/.locked-paths
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
[
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/search-results.html",
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-verification.html",
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html",
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/design-histories/v3.html"
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html"
]
Binary file added app/assets/images/dh-4-a-z-page.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/dh-4-product-page.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/dh-4-search-category.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 58 additions & 58 deletions app/views/design-histories/v3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,29 +20,29 @@ <h2 class="nhsuk-heading-l">Information architecture</h2>

<h3 class="nhsuk-heading-m">Designing search for four modes of information seeking</h3>
<p class="nhsuk-body-s nhsuk-u-secondary-text-color">Based on Donna Spencer's framework</p>

<h4 class="nhsuk-heading-s">The problem</h4>
<p>Our original search page failed to support the different ways NHS procurement users seek information. Some users know exactly what they want, others are exploring options, some don't know what questions to ask, and others are trying to find something they've seen before.</p>

<h4 class="nhsuk-heading-s">Design solution</h4>
<p>We restructured the search page to support all four information-seeking modes:</p>
<p>We restructured the search landing page to support all four information-seeking modes:</p>
<ul class="nhsuk-list nhsuk-list--bullet">
<li><strong>Known-item seeking:</strong> Prominent search box with manufacturer/product/GMDN support, plus 'Recently searched across NHS' quick links</li>
<li><strong>Exploratory seeking:</strong> Six category cards showing product counts AND trust evaluation counts as social proof</li>
<li><strong>Known-item seeking:</strong> Prominent search box with manufacturer/product/GMDN support, and quick links</li>
<li><strong>Exploratory seeking:</strong> Six category cards showing product counts AND trust evaluation counts</li>
<li><strong>Don't know what you need to know:</strong> Educational cards ('What makes good evidence?', 'Questions to ask other trusts', 'Value-based procurement explained')</li>
<li><strong>Re-finding:</strong> 'Your recent activity' section showing recently viewed products and saved comparisons when signed in</li>
</ul>

<h4 class="nhsuk-heading-s">Key insight</h4>
<p>Procurement users often think they're doing known-item search ('I need product X') but actually need exploratory support ('what are trusts finding works?') or guidance ('what evidence should I even care about?'). The page now supports all paths without forcing users to self-identify.</p>
<p>Procurement users often think they're doing known-item search ('I need product X') but actually need exploratory support ('what are trusts finding works?') or guidance ('what evidence should I even care about?').</p>

<hr class="nhsuk-section-break nhsuk-section-break--m">

<h3 class="nhsuk-heading-m">Category results page for exploratory users</h3>

<h4 class="nhsuk-heading-s">The problem</h4>
<p>When users selected a category to explore (e.g. 'Wound care'), we needed a results page that supported discovery rather than just listing products.</p>

<h4 class="nhsuk-heading-s">Design solution</h4>
<p>We designed the category results page with:</p>
<ul class="nhsuk-list nhsuk-list--bullet">
Expand All @@ -52,78 +52,78 @@ <h4 class="nhsuk-heading-s">Design solution</h4>
<li><strong>Peer contact indicator:</strong> '5 trusts willing to discuss lessons learned' on each product card</li>
<li><strong>Comparison checkboxes:</strong> Sticky selection bar appears when products selected</li>
</ul>

<h4 class="nhsuk-heading-s">Rationale</h4>
<p>Exploratory users' needs change as they discover. The page supports the journey from 'what's out there?' through filtering, scanning trust adoption, to selecting products for comparison.</p>

<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
</div>
</div>

<!-- ============ PRODUCT PAGES ============ -->
<h2 class="nhsuk-heading-l">Product pages</h2>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-one-half">
<figure class="nhsuk-image">
<img src="/images/dh-4-search-category.png" alt="image of the search by category landing page">
<figcaption class="nhsuk-image__caption">Search by category page iteration</figcaption>
</figure>
</div>
<div class="nhsuk-grid-column-one-half">
<figure class="nhsuk-image">
<img src="/images/dh-4-a-z-page.png" alt="image of the category A to Z page">
<figcaption class="nhsuk-image__caption">Category A-Z page: not yet tested</figcaption>
</figure>
</div>
</div>

<h3 class="nhsuk-heading-m">Leading with trust adoption visibility</h3>

<h4 class="nhsuk-heading-s">The problem</h4>
<p>User research revealed NHS procurement professionals rely heavily on informal personal networks to discover what other trusts are procuring. Our initial product page design followed a conventional pattern: supplier branding and marketing content at the top, trust evaluations buried lower as supporting content. This didn't reflect how users actually make decisions.</p>

<h4 class="nhsuk-heading-s">Design solution</h4>
<p>We restructured product pages to prioritise peer intelligence:</p>
<ol class="nhsuk-list nhsuk-list--number">
<li><strong>Trust adoption section moved to hero position:</strong> '12 NHS trusts have evaluated this product' with outcomes (9 procured, 2 under review, 1 excluded)</li>
<li><strong>Featured contact cards:</strong> 'Sarah is happy to discuss: implementation, clinical outcomes, supplier experience'</li>
<li><strong>'How they evaluated' sections:</strong> Shows process, business case approach, and decision factors</li>
<li><strong>Evaluation type badges:</strong> Clinical trial, pilot study, usage report, quick review</li>
<li><strong>Technical details collapsed:</strong> Specifications and cost analysis in expandable accordions</li>
</ol>


<hr class="nhsuk-section-break nhsuk-section-break--m">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">

<h4 class="nhsuk-heading-s">Rationale</h4>
<p>Exploratory users' needs change as they discover. The page supports the journey from 'what's out there?' through filtering, scanning trust adoption, to selecting products for comparison.</p>

<h3>What else we changed</h3>
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

<ul class="nhsuk-list nhsuk-list-bullet">
<h2 class="nhsuk-heading-l">Product page</h2>

<li><strong>Charts first:</strong> Three clickable summary charts immediately after product header (trial outcomes donut, regional bar chart, contacts ring)</li>
<h3 class="nhsuk-heading-m">What we changed</h3>
<ul class="nhsuk-list nhsuk-list--bullet">
<li><strong>Charts first:</strong> Three clickable summary charts immediately after product header (trial outcomes donut, regional bar chart, contacts ring)</li>
<li><strong>Charts by region:</strong> Regional breakdown with clickable cards for North West, London, Midlands, South East</li>
<li><strong>Clickable trusts:</strong> Every trust card is now a full clickable link to a trust detail page</li>
<li><strong>Total cost of ownership breakdown:</strong> New section with cost table and projected annual savings by trust size</li>
<li><strong>'Trial' terminology:</strong> Changed 'evaluation' to 'trial' throughout (e.g. '18 NHS trusts have trialled this product')</li>
</ul>



</ul>

<h4 class="nhsuk-heading-s">What we kept</h4>
<p>Supplier contact card in sidebar, technical specs in accordion, cost details in accordion, contact details in cards with discussion topics.</p>

<figure class="nhsuk-image">
<img src="/images/dh-4-product-page.png" alt="image of the product page with new charts and regional breakdown">
<figcaption class="nhsuk-image__caption">Product page with data visuuals and contact details</figcaption>
</figure>

<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

<h2> Content design</h2>
<h2 class="nhsuk-heading-l">Content design</h2>

<p>At this stage, a content designer performed a content review and made minor changes based on insights from user research transcripts, discussions about service functionality with team members, GDS content design guidelines and NHS style guidelines.</p>
<p>At this stage, a content designer performed a content review and made minor changes based on insights from user research transcripts, discussions about service functionality with team members, GDS content design guidelines and NHS style guidelines.</p>

<p>This included:</p>
<ul>
<li>clearer calls to action on some pages, to avoid confusion</li>
<li>consistency and accuracy of language throughout</li>
<li>colour coding of tags being limited to procurement decisions only (given confusion from users and potential for mixed meaning)</li>
<li>reduced text in some places to simplify, communicate key points more clearly and avoid redundancy</li>
</ul>
<p>This included:</p>
<ul class="nhsuk-list nhsuk-list--bullet">
<li>clearer calls to action on some pages, to avoid confusion</li>
<li>consistency and accuracy of language throughout</li>
<li>colour coding of tags being limited to procurement decisions only (given confusion from users and potential for mixed meaning)</li>
<li>reduced text in some places to simplify, communicate key points more clearly and avoid redundancy</li>
</ul>

<!-- ============ USER RESEARCH FINDINGS ============ -->
<h2 class="nhsuk-heading-l">User research</h2>

<h3 class="nhsuk-heading-m">Selected user research insights</h3>
<ul>
<li>The section about the NHS 10-year plan confused some users as they weren’t sure of its relevance.</li>
<li>Users were generally positive about the benefits-related text on the homepage.</li>
<li>Evaluation uploading was mostly considered straightforward, but research highlighted the fact that it only covered “evaluations” and not other types of documents.</li>
<li>Users felt the filters would be useful, especially filtering based on trust type and product category.</li>
<li>Users liked the badges but were sometimes unclear on the colour system.</li>
<ul class="nhsuk-list nhsuk-list--bullet">
<li>The section about the NHS 10-year plan confused some users as they weren't sure of its relevance.</li>
<li>Users were generally positive about the benefits-related text on the homepage.</li>
<li>Evaluation uploading was mostly considered straightforward, but research highlighted the fact that it only covered "evaluations" and not other types of documents.</li>
<li>Users felt the filters would be useful, especially filtering based on trust type and product category.</li>
<li>Users liked the badges but were sometimes unclear on the colour system.</li>
</ul>




</div>
</div>
{% endblock %}
{% endblock %}