Skip to content

Commit

Permalink
Merge pull request #12637 from canonical/wd-1481
Browse files Browse the repository at this point in the history
Build /user-research
  • Loading branch information
petesfrench committed May 26, 2023
2 parents d8e886e + fd18f01 commit aee0564
Show file tree
Hide file tree
Showing 6 changed files with 275 additions and 2 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
"typescript": "4.5.4",
"url-polyfill": "1.1.12",
"url-search-params-polyfill": "8.1.1",
"vanilla-framework": "^3.13.0",
"vanilla-framework": "^3.14.0",
"yup": "0.32.11"
},
"resolutions": {
Expand Down
29 changes: 29 additions & 0 deletions static/sass/_pattern_lists.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@include ubuntu-p-step-counter;
@include ubuntu-p-list-ticked;
@include ubuntu-p-list-horizontal-divided;
@include ubuntu-p-faq-stepped-list--detailed;
}

@mixin ubuntu-p-inline-list-icons {
Expand Down Expand Up @@ -375,3 +376,31 @@
}
}
}

@mixin ubuntu-p-faq-stepped-list--detailed {
.p-faq-stepped-list--detailed {
@extend .p-stepped-list--detailed;

.p-faq-stepped-list__item {
@extend .p-stepped-list__item;

padding-top: 0;
}

@supports (display: grid) {
.p-faq-stepped-list__content {
@media (min-width: $threshold-6-12-col) {
display: flex;
grid-column-end: span 12;
margin-top: 0;
}
}
}

// XXX : the accordion component needs to be fixed in vanilla. The issue was filed on https://github.com/canonical/vanilla-framework/issues/4563. This styles written locally needs to be removed after vanilla update.
.u-default-max-width {
display: inline-block;
max-width: $text-max-width;
}
}
}
6 changes: 6 additions & 0 deletions static/sass/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1324,6 +1324,12 @@ hr.p-separator.is-shallow {
aspect-ratio: 3/2;
}

// XXX Pete
// Custom styles for paper background
.is-paper {
background: #f3f3f3;
}

.amd-xilinx-table {
th:nth-child(2) {
width: 65%;
Expand Down
7 changes: 7 additions & 0 deletions templates/user-research/base_user-research.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{% extends "templates/base.html" %}

{% block meta_copydoc %}https://docs.google.com/document/d/1gOoOJNnrUVWOhpYlkShq0FAbMqDZsj-CXuOGT_S8Xl4/edit#heading=h.hfhqccyix5vw{% endblock meta_copydoc %}

{% block outer_content %}
{% block content %}{% endblock %}
{% endblock %}
231 changes: 231 additions & 0 deletions templates/user-research/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
{% extends "user-research/base_user-research.html" %}

{% block meta_copydoc %}https://docs.google.com/document/d/1gOoOJNnrUVWOhpYlkShq0FAbMqDZsj-CXuOGT_S8Xl4/edit#heading=h.hfhqccyix5vw{% endblock meta_copydoc %}

{% block title %}Canonical User Research Programme{% endblock %}

{% block meta_description %}The Canonical User Research Programme offers our users the chance to collaborate with our design and engineering teams in the creation, improvement and evolution of our products. A short registration survey lets you sign up for the programme; you'll receive invitations to relevant user-research studies. {% endblock %}

{% block content %}

<div class="is-paper">
<section class="p-strip is-deep">
<div class="row">
<div class="col-3 col-medium-2">
<h1 class="p-muted-heading">Canonical <br class="u-hide--small">user research</h1>
</div>
<div class="col-9 col-medium-4">
<p class="p-heading--2 p-block"><strong>Help make Canonical products better.</strong><br>Share your thoughts and experiences.</p>
<p class="p-block">You'll get early access to the products Canonical's engineers and designers are working on right now &ndash; we love to collaborate with users when creating new features and designs. Your insights will influence our direction, and everyone's user experience.</p>
<p class="p-block"><a href="https://krzty8pox19.typeform.com/to/xZkdHbth#source=curp" class="p-button--positive">Join our User Research Program</a></p>
{{ image (
url="https://assets.ubuntu.com/v1/e549fdc0-Canonical-AI-ML-Illustrations-v5-03.png",
alt="",
width="1200",
height="898",
hi_def=True,
loading="auto"
) | safe
}}
</div>
</div>
</section>

<section class="p-section">
<hr class="p-rule is-fixed-width">
<div class="row p-block">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">Current studies</h2>
</div>
<div class="col-9 col-medium-4">
<h3 class="p-heading--2">Navigating ubuntu.com</h3>
<p>We want to understand how you navigate ubuntu.com, to improve our menus, and help you learn about our products more easily.</p>
<p><a href="https://krzty8pox19.typeform.com/to/xZkdHbth#source=curp-nav">Join a navigation study</a></p>
</div>
</div>
<div class="row p-block">
<div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3 ">
<hr class="p-rule">
<h3 class="p-heading--2">Ubuntu Security</h3>
<p>We would love to learn how you manage your security and updates, and the way you use our CVE and security notices.</p>
<p><a href="https://krzty8pox19.typeform.com/to/xZkdHbth#source=curp-security">Help us improve security</a></p>
</div>
</div>
<div class="row p-block">
<div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3 ">
<hr class="p-rule">
<h3 class="p-heading--2">Ubuntu Pro</h3>
<p>Did you purchase Ubuntu Pro through a reseller program? Help us make it better suit your current needs.</p>
<p><a href="https://krzty8pox19.typeform.com/to/xZkdHbth#source=curp-pro">Tell us how Ubuntu Pro works for you</a></p>
</div>
</div>
</section>

<section class="p-section">
<hr class="p-rule is-fixed-width">
<div class="row">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">How does it work?</h2>
</div>
<div class="col-9 col-medium-4 p-block">
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">1. Sign-up</h3>
</div>
<div class="col-6">
<p>Fill in a <a href="https://krzty8pox19.typeform.com/to/xZkdHbth#source=curp">5-minute registration survey</a>, <br>to help us match you with the right studies.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3 p-block">
<hr class="p-rule">
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">2. Receive invites</h3>
</div>
<div class="col-6">
<p>We'll send you an invite when the appropriate study comes along.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-9 col-medium-4 col-start-large-4 col-start-medium-3 p-block">
<hr class="p-rule">
<div class="row">
<div class="col-3">
<h3 class="p-heading--5">3. Take part</h3>
</div>
<div class="col-6">
<p>You can decide if you want to (remotely) participate. There's usually a choice of days and times for interviews &ndash; you may also get invitations to surveys.</p>
</div>
</div>
</div>
</div>
</section>

<section class="p-section is-deep">
<hr class="p-rule is-fixed-width">
<div class="row">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">FAQ</h2>
</div>
<div class="col-9 col-medium-4">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>Do I need to be a Canonical customer to join?</strong></h3>
</div>
<div class="col-6">
<p>No, you do not. Everyone is welcome!</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>Where can I be located?</strong></h3>
</div>
<div class="col-6">
<p>You can be anywhere in the world. All our studies are conducted remotely.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>What types of research do you do?</strong></h3>
</div>
<div class="col-6">
<p>We do interviews, usability-tests, surveys, and more. We need your thoughts, to guide us in building better product-experiences.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>What does participating look like?</strong></h3>
</div>
<div class="col-6">
<p>Our 1:1 interview sessions are done remotely, and usually take 30-minutes to an hour. Typically you'll share your screen. Surveys only take a few minutes. Other tests may involve completing a task with a prototype and answering online questions.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>How often will I be contacted?</strong></h3>
</div>
<div class="col-6">
<p>Usually less than three times a year.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>Will I receive something for participating?</strong></h3>
</div>
<div class="col-6">
<p>When participating in some lengthy moderated sessions, such as 1-1 interviews or usability tests, we'll send you a thank you gift.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>What will you do with my personal information?</strong></h3>
</div>
<div class="col-6">
<p>Our data privacy policy defines how we collect <a href="/legal/data-privacy">the minimum amount</a> of personal information necessary to match you with suitable research studies.</p>
</div>
</div>
<hr class="p-rule">
<div class="row p-block">
<div class="col-3">
<h3 class="u-no-margin--bottom p-text--default"><strong>Can I leave the group?</strong></h3>
</div>
<div class="col-6">
<p>Absolutely. Just email <a href="mailto:userresearch@canonical.com">userresearch@canonical.com</a> and we'll delete your info from our database.</p>
</div>
</div>
</div>
</div>
</section>

<section class="p-section is-deep">
<hr class="p-rule is-fixed-width">
<div class="row">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">Talk to us</h2>
</div>
<div class="col-9 col-medium-4">
<p>We want to hear about your user experiences &ndash; what's working well, and what's not. Get in touch to tell us what you think, so we can improve Canonical's products and services for everyone.</p>
<p><a href="https://discourse.ubuntu.com/t/user-research-programme/33805" class="p-button">User Research on Discourse</a></p>
</div>
</div>
</section>

<section class="p-section is-deep">
<hr class="p-rule is-fixed-width">
<div class="row">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">Our mission</h2>
</div>
<div class="col-9 col-medium-4">
<p>Open source is collective power in action. The power of a worldwide community of highly skilled experts that build, share and improve the very latest software together &ndash; then make it available to everyone.</p>
<a href="/community/mission">Learn more about our mission</a>
</div>
</div>
</section>

<section class="p-section is-deep">
<hr class="p-rule is-fixed-width">
<div class="row">
<div class="col-3 col-medium-2">
<h2 class="p-muted-heading">Any questions?</h2>
</div>
<div class="col-9 col-medium-4">
<p class="p-heading--2">Write to us at <br><a href="mailto:userresearch@canonical.com">userresearch@canonical.com</a></p>
</div>
</div>
</section>
</div>

{% endblock content%}
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -8578,7 +8578,7 @@ vanilla-framework@3.0.1:
postcss-cli "9.1.0"
sass "1.45.2"

vanilla-framework@^3.13.0:
vanilla-framework@^3.14.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-3.14.0.tgz#c5b94d7e2e3ef2d3c9f24091b7efc4abf8054cf9"
integrity sha512-06Vr2nhjU72N9IivwCLcd7FgqFNopkiHfzANJUCNdvs8FkbTjIB7fcsFgJ6O76KnOBsEiAoJAssRkTh9x3a2jw==
Expand Down

0 comments on commit aee0564

Please sign in to comment.