Skip to content

Commit adb71d1

Browse files
committed
design history
1 parent fa34491 commit adb71d1

5 files changed

Lines changed: 59 additions & 60 deletions

File tree

.azad/.locked-paths

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
[
22
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/search-results.html",
33
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-verification.html",
4-
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html",
5-
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/design-histories/v3.html"
4+
"/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html"
65
]
1.13 MB
Loading
2.65 MB
Loading
1.61 MB
Loading

app/views/design-histories/v3.html

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,29 @@ <h2 class="nhsuk-heading-l">Information architecture</h2>
2020

2121
<h3 class="nhsuk-heading-m">Designing search for four modes of information seeking</h3>
2222
<p class="nhsuk-body-s nhsuk-u-secondary-text-color">Based on Donna Spencer's framework</p>
23-
23+
2424
<h4 class="nhsuk-heading-s">The problem</h4>
2525
<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>
26-
26+
2727
<h4 class="nhsuk-heading-s">Design solution</h4>
28-
<p>We restructured the search page to support all four information-seeking modes:</p>
28+
<p>We restructured the search landing page to support all four information-seeking modes:</p>
2929
<ul class="nhsuk-list nhsuk-list--bullet">
30-
<li><strong>Known-item seeking:</strong> Prominent search box with manufacturer/product/GMDN support, plus 'Recently searched across NHS' quick links</li>
31-
<li><strong>Exploratory seeking:</strong> Six category cards showing product counts AND trust evaluation counts as social proof</li>
30+
<li><strong>Known-item seeking:</strong> Prominent search box with manufacturer/product/GMDN support, and quick links</li>
31+
<li><strong>Exploratory seeking:</strong> Six category cards showing product counts AND trust evaluation counts</li>
3232
<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>
3333
<li><strong>Re-finding:</strong> 'Your recent activity' section showing recently viewed products and saved comparisons when signed in</li>
3434
</ul>
35-
35+
3636
<h4 class="nhsuk-heading-s">Key insight</h4>
37-
<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>
37+
<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>
3838

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

4141
<h3 class="nhsuk-heading-m">Category results page for exploratory users</h3>
42-
42+
4343
<h4 class="nhsuk-heading-s">The problem</h4>
4444
<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>
45-
45+
4646
<h4 class="nhsuk-heading-s">Design solution</h4>
4747
<p>We designed the category results page with:</p>
4848
<ul class="nhsuk-list nhsuk-list--bullet">
@@ -52,78 +52,78 @@ <h4 class="nhsuk-heading-s">Design solution</h4>
5252
<li><strong>Peer contact indicator:</strong> '5 trusts willing to discuss lessons learned' on each product card</li>
5353
<li><strong>Comparison checkboxes:</strong> Sticky selection bar appears when products selected</li>
5454
</ul>
55-
56-
<h4 class="nhsuk-heading-s">Rationale</h4>
57-
<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>
5855

59-
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
56+
</div>
57+
</div>
6058

61-
<!-- ============ PRODUCT PAGES ============ -->
62-
<h2 class="nhsuk-heading-l">Product pages</h2>
59+
<div class="nhsuk-grid-row">
60+
<div class="nhsuk-grid-column-one-half">
61+
<figure class="nhsuk-image">
62+
<img src="/images/dh-4-search-category.png" alt="image of the search by category landing page">
63+
<figcaption class="nhsuk-image__caption">Search by category page iteration</figcaption>
64+
</figure>
65+
</div>
66+
<div class="nhsuk-grid-column-one-half">
67+
<figure class="nhsuk-image">
68+
<img src="/images/dh-4-a-z-page.png" alt="image of the category A to Z page">
69+
<figcaption class="nhsuk-image__caption">Category A-Z page: not yet tested</figcaption>
70+
</figure>
71+
</div>
72+
</div>
6373

64-
<h3 class="nhsuk-heading-m">Leading with trust adoption visibility</h3>
65-
66-
<h4 class="nhsuk-heading-s">The problem</h4>
67-
<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>
68-
69-
<h4 class="nhsuk-heading-s">Design solution</h4>
70-
<p>We restructured product pages to prioritise peer intelligence:</p>
71-
<ol class="nhsuk-list nhsuk-list--number">
72-
<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>
73-
<li><strong>Featured contact cards:</strong> 'Sarah is happy to discuss: implementation, clinical outcomes, supplier experience'</li>
74-
<li><strong>'How they evaluated' sections:</strong> Shows process, business case approach, and decision factors</li>
75-
<li><strong>Evaluation type badges:</strong> Clinical trial, pilot study, usage report, quick review</li>
76-
<li><strong>Technical details collapsed:</strong> Specifications and cost analysis in expandable accordions</li>
77-
</ol>
78-
79-
80-
<hr class="nhsuk-section-break nhsuk-section-break--m">
74+
<div class="nhsuk-grid-row">
75+
<div class="nhsuk-grid-column-two-thirds">
76+
77+
<h4 class="nhsuk-heading-s">Rationale</h4>
78+
<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>
8179

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

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

86-
<li><strong>Charts first:</strong> Three clickable summary charts immediately after product header (trial outcomes donut, regional bar chart, contacts ring)</li>
84+
<h3 class="nhsuk-heading-m">What we changed</h3>
85+
<ul class="nhsuk-list nhsuk-list--bullet">
86+
<li><strong>Charts first:</strong> Three clickable summary charts immediately after product header (trial outcomes donut, regional bar chart, contacts ring)</li>
8787
<li><strong>Charts by region:</strong> Regional breakdown with clickable cards for North West, London, Midlands, South East</li>
8888
<li><strong>Clickable trusts:</strong> Every trust card is now a full clickable link to a trust detail page</li>
8989
<li><strong>Total cost of ownership breakdown:</strong> New section with cost table and projected annual savings by trust size</li>
9090
<li><strong>'Trial' terminology:</strong> Changed 'evaluation' to 'trial' throughout (e.g. '18 NHS trusts have trialled this product')</li>
91-
</ul>
92-
93-
94-
91+
</ul>
92+
9593
<h4 class="nhsuk-heading-s">What we kept</h4>
9694
<p>Supplier contact card in sidebar, technical specs in accordion, cost details in accordion, contact details in cards with discussion topics.</p>
9795

96+
<figure class="nhsuk-image">
97+
<img src="/images/dh-4-product-page.png" alt="image of the product page with new charts and regional breakdown">
98+
<figcaption class="nhsuk-image__caption">Product page with data visuuals and contact details</figcaption>
99+
</figure>
100+
98101
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
99102

100-
<h2> Content design</h2>
103+
<h2 class="nhsuk-heading-l">Content design</h2>
101104

102-
<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>
105+
<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>
103106

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

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

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

127127
</div>
128128
</div>
129-
{% endblock %}
129+
{% endblock %}

0 commit comments

Comments
 (0)