Skip to content

Commit

Permalink
Iterations on initial onboarding flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@jabbett
jabbett committed Oct 2, 2023
1 parent 496ce6b commit 5b42c33
Show file tree
Hide file tree
Showing 16 changed files with 774 additions and 15 deletions.
12 changes: 12 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@ <h1 class="sharpen-heading-2xl">prototypes.sharpen.com</h1>
</tr>
</thead>
<tbody>
<tr>
<td><a href="prototypes/onboarding-v3/">New onboarding flow, iteration 3</a></td>
<td>Sep 2023</td>
</tr>
<tr>
<td><a href="prototypes/onboarding-v2/">New onboarding flow, iteration 2</a></td>
<td>Sep 2023</td>
</tr>
<tr>
<td><a href="prototypes/cancellation/">Cancellation process</a></td>
<td>Sep 2023</td>
</tr>
<tr>
<td><a href="prototypes/onboarding/">New onboarding flow</a></td>
<td>Sep 2023</td>
Expand Down
89 changes: 89 additions & 0 deletions src/prototypes/onboarding-v2/2_create_account.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Onboarding</title>
<link rel="stylesheet" href="/build/kezuri.css" />
<script type="module" src="/build/kezuri.esm.js"></script>
<script nomodule src="/build/kezuri.js"></script>
<style>
.social-icon {
height: 22px;
vertical-align: -5px;
margin-right: 4px;
}
</style>
</head>
<body>

<sharpen-primary-navigation></sharpen-primary-navigation>

<div class="container sharpen-mt-lg">

<div class="row">
<div class="offset-xxl-1 col-xxl-5 col-lg-6">
<sharpen-card border="gray" padding="large" class="sharpen-mb-md">
<div class="sharpen-form-group">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 1C8.077 1 4.644 3.15 2.767 6.363L6.363 9.24A6.5 6.5 0 0 1 16.403 7L19.5 3.713C17.707 2.023 15.191 1 12 1Zm0 22c2.843 0 5.15-.812 6.887-2.184l-3.782-2.955.026-.033a6.5 6.5 0 0 1-8.742-3.016L2.744 17.6C4.618 20.833 8.061 23 12 23Zm7.998-3.22c1.814-1.99 2.752-4.741 2.752-7.78 0-.683-.047-1.351-.142-2H12v4h6.436a6.509 6.509 0 0 1-2.015 2.985l3.577 2.796ZM5.75 12c0 .45.046.888.132 1.311l-3.81 2.915A11.188 11.188 0 0 1 1.25 12c0-1.51.298-2.95.836-4.261l3.781 3.025c-.077.4-.117.813-.117 1.236Z" clip-rule="evenodd"></path></svg>
Sign up with Google
</a>
</div>
<div class="sharpen-form-group sharpen-mb-0">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 1A4.5 4.5 0 0 0 9 5.5V9H6.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5H9v8.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V14h2.5a.5.5 0 0 0 .485-.379l1-4A.5.5 0 0 0 17.5 9H14V7.5A1.5 1.5 0 0 1 15.5 6h2a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4Z"></path></svg>
Sign up with Facebook
</a>
</div>
</sharpen-card>
</div>
<div class="col-xxl-5 col-lg-6">
<sharpen-card border="gray" padding="large">
<h1 class="sharpen-heading-xl">Or sign up with e-mail</h1>
<div class="sharpen-form-group">
<label class="sharpen-form-label">E-mail</label>
<input type="email" class="sharpen-form-control" />
</div>
<div class="sharpen-form-group">
<label class="sharpen-form-label">Password</label>
<input type="password" class="sharpen-form-control" />
</div>

<sharpen-card border="gray" padding="medium" class="sharpen-mb-md sharpen-text--body sharpen-text-xs sharpen-text--muted">
<p class="sharpen-mb-sm">Your password must be at least 8 characters and have 3 of the following:</p>
<ul class="sharpen-list">
<li>Lower-case letter</li>
<li>Upper-case letter</li>
<li>Number</li>
<li>Special character like !@#$%&*</li>
</ul>
</sharpen-card>

<div class="sharpen-form-group">
<label class="sharpen-form-label">Confirm password</label>
<input type="password" class="sharpen-form-control" />
</div>

<div class="sharpen-form-group sharpen-mb-0">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
Next
<i class="sharpen-icon">chevron_right</i>
</a>
</div>
</sharpen-card>
</div>
</div>

</div>

<sharpen-footer>
<span class="copyright">&copy; 2023 Sharpen.com, Inc.</span>
<sharpen-nav-link name="Privacy Statement" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Terms of Service" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Cookie Policy" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Contact Us" href="mailto:[email protected]"></sharpen-nav-link>
</sharpen-footer>

</body>
</html>
60 changes: 60 additions & 0 deletions src/prototypes/onboarding-v2/3_user.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Onboarding</title>
<link rel="stylesheet" href="/build/kezuri.css" />
<script type="module" src="/build/kezuri.esm.js"></script>
<script nomodule src="/build/kezuri.js"></script>
<style>

</style>
</head>
<body>

<sharpen-primary-navigation></sharpen-primary-navigation>

<div class="container sharpen-mt-lg">

<div class="row">
<div class="offset-lg-3 col-lg-6">
<sharpen-card border="gray" padding="large">
<h1 class="sharpen-heading-xl">Welcome! Tell us about yourself.</h1>
<div class="sharpen-form-group">
<label class="sharpen-form-label">First name</label>
<input type="text" class="sharpen-form-control" value="Juliana" spellcheck="false" autocorrect="off" />
</div>
<div class="sharpen-form-group">
<label class="sharpen-form-label">Last name</label>
<input type="text" class="sharpen-form-control" value="Profar" spellcheck="false" autocorrect="off" />
</div>
<div class="sharpen-form-group">
<div class="sharpen-form-check">
<input type="checkbox" class="sharpen-form-check-input" name="checkbox2" id="checkbox2_1" />
<label class="sharpen-form-label" for="checkbox2_1">By checking this box you agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
</div>
</div>

<div class="sharpen-form-group sharpen-mb-0">
<a href="4_create_learner.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
Next
<i class="sharpen-icon">chevron_right</i>
</a>
</div>
</sharpen-card>
</div>
</div>

</div>

<sharpen-footer>
<span class="copyright">&copy; 2023 Sharpen.com, Inc.</span>
<sharpen-nav-link name="Privacy Statement" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Terms of Service" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Cookie Policy" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Contact Us" href="mailto:[email protected]"></sharpen-nav-link>
</sharpen-footer>

</body>
</html>
67 changes: 67 additions & 0 deletions src/prototypes/onboarding-v2/4_create_learner.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Onboarding</title>
<link rel="stylesheet" href="/build/kezuri.css" />
<script type="module" src="/build/kezuri.esm.js"></script>
<script nomodule src="/build/kezuri.js"></script>
<style>

</style>
</head>
<body>

<sharpen-primary-navigation></sharpen-primary-navigation>

<div class="container sharpen-mt-lg">

<div class="row">
<div class="offset-lg-3 col-lg-6">
<sharpen-card border="gray" padding="large">
<h1 class="sharpen-heading-xl">Tell us about your learner</h1>
<div class="sharpen-form-group">
<label class="sharpen-form-label">Grade in the 2023&ndash;24 school year</label>
<select class="sharpen-form-control">
<option>Younger than Kindergarten</option>
<option selected>Kindergarten</option>
<option>Grade 1</option>
<option>Grade 2</option>
<option>Grade 3</option>
<option>Grade 4</option>
<option>Grade 5</option>
<option>Grade 6 or above</option>
</select>
</div>
<div class="sharpen-form-group">
<label class="sharpen-form-label">First name</label>
<input type="text" class="sharpen-form-control" spellcheck="false" autocorrect="off" />
</div>
<div class="sharpen-form-group">
<label class="sharpen-form-label">Last name</label>
<input type="text" class="sharpen-form-control" spellcheck="false" autocorrect="off" />
</div>

<div class="sharpen-form-group sharpen-mb-0">
<a href="5_placement.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
Next
<i class="sharpen-icon">chevron_right</i>
</a>
</div>
</sharpen-card>
</div>
</div>

</div>

<sharpen-footer>
<span class="copyright">&copy; 2023 Sharpen.com, Inc.</span>
<sharpen-nav-link name="Privacy Statement" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Terms of Service" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Cookie Policy" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Contact Us" href="mailto:[email protected]"></sharpen-nav-link>
</sharpen-footer>

</body>
</html>
27 changes: 27 additions & 0 deletions src/prototypes/onboarding-v2/5_placement.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Onboarding</title>
<link rel="stylesheet" href="/build/kezuri.css" />
<script type="module" src="/build/kezuri.esm.js"></script>
<script nomodule src="/build/kezuri.js"></script>
<style>

</style>
</head>
<body>

<sharpen-primary-navigation></sharpen-primary-navigation>

<div class="container sharpen-mt-lg">

<sharpen-card border="none" padding="large">
User will move immediately to the placement assessment
</sharpen-card>

</div>

</body>
</html>
127 changes: 127 additions & 0 deletions src/prototypes/onboarding-v2/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Sharpen Prototype: Onboarding</title>
<link rel="stylesheet" href="/build/kezuri.css" />
<script type="module" src="/build/kezuri.esm.js"></script>
<script nomodule src="/build/kezuri.js"></script>
<style>
.media-responsive {
padding:56.25% 0 0 0;
position:relative;
border: 1px solid var(--color-gray-3);
}

.social-icon {
height: 22px;
vertical-align: -5px;
margin-right: 4px;
}
</style>
</head>
<body>

<sharpen-primary-navigation></sharpen-primary-navigation>

<div class="container sharpen-mt-lg">

<div class="row">
<div class="offset-xxl-4 col-xxl-4">
<h1 class="sharpen-heading-2xl sharpen-text--center">Your trial starts with our free reading placement assessment</h1>
</div>
</div>

<div class="row">
<div class="offset-xxl-1 col-xxl-5 col-lg-6">

<sharpen-card border="none" padding="large" class="sharpen-mb-lg">

<div class="sharpen-text--body">
<p class="sharpen-text-intro sharpen-mb-md">
The Placement Assessment tells you your
learner’s current reading grade level and sets the right Sharpen
starting point.
</p>

<p class="sharpen-mb-md"><strong>You'll need:</strong></p>

<ul class="sharpen-list sharpen-mb-lg">
<li>About 15 minutes</li>
<li>Your child</li>
<li>A quiet place to listen</li>
</ul>

<!-- <p class="sharpen-mb-md">Before you start, watch this short video without your child present:</p>
<div class="media-responsive"><iframe src="https://player.vimeo.com/video/822040640?h=5391f5cfbf&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Placement Assessment Parent Introduction"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> -->
</div>

</sharpen-card>

</div>
<div class="col-xxl-5 col-lg-6">
<sharpen-card border="gray" padding="large" class="sharpen-mb-md">
<div class="sharpen-form-group">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 1C8.077 1 4.644 3.15 2.767 6.363L6.363 9.24A6.5 6.5 0 0 1 16.403 7L19.5 3.713C17.707 2.023 15.191 1 12 1Zm0 22c2.843 0 5.15-.812 6.887-2.184l-3.782-2.955.026-.033a6.5 6.5 0 0 1-8.742-3.016L2.744 17.6C4.618 20.833 8.061 23 12 23Zm7.998-3.22c1.814-1.99 2.752-4.741 2.752-7.78 0-.683-.047-1.351-.142-2H12v4h6.436a6.509 6.509 0 0 1-2.015 2.985l3.577 2.796ZM5.75 12c0 .45.046.888.132 1.311l-3.81 2.915A11.188 11.188 0 0 1 1.25 12c0-1.51.298-2.95.836-4.261l3.781 3.025c-.077.4-.117.813-.117 1.236Z" clip-rule="evenodd"></path></svg>
Sign up with Google
</a>
</div>
<div class="sharpen-form-group sharpen-mb-0">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 1A4.5 4.5 0 0 0 9 5.5V9H6.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5H9v8.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V14h2.5a.5.5 0 0 0 .485-.379l1-4A.5.5 0 0 0 17.5 9H14V7.5A1.5 1.5 0 0 1 15.5 6h2a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4Z"></path></svg>
Sign up with Facebook
</a>
</div>
</sharpen-card>

<sharpen-card border="gray" padding="large">
<h1 class="sharpen-heading-xl sharpen-text--center">Or sign up with e-mail</h1>
<div class="sharpen-form-group">
<label class="sharpen-form-label">E-mail</label>
<input type="email" class="sharpen-form-control" />
</div>
<div class="sharpen-form-group">
<label class="sharpen-form-label">Password</label>
<input type="password" class="sharpen-form-control" />
</div>

<sharpen-card border="gray" padding="medium" class="sharpen-mb-md sharpen-text--body sharpen-text-xs sharpen-text--muted">
<p class="sharpen-mb-sm">Your password must be at least 8 characters and have 3 of the following:</p>
<ul class="sharpen-list">
<li>Lower-case letter</li>
<li>Upper-case letter</li>
<li>Number</li>
<li>Special character like !@#$%&*</li>
</ul>
</sharpen-card>

<div class="sharpen-form-group">
<label class="sharpen-form-label">Confirm password</label>
<input type="password" class="sharpen-form-control" />
</div>

<div class="sharpen-form-group sharpen-mb-0">
<a href="3_user.html" class="sharpen-button sharpen-button--primary sharpen-button--small sharpen-button--full-width">
Next
<i class="sharpen-icon">chevron_right</i>
</a>
</div>
</sharpen-card>
</div>
</div>

</div>

<sharpen-footer>
<span class="copyright">&copy; 2023 Sharpen.com, Inc.</span>
<sharpen-nav-link name="Privacy Statement" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Terms of Service" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Cookie Policy" href="#"></sharpen-nav-link>
<sharpen-nav-link name="Contact Us" href="mailto:[email protected]"></sharpen-nav-link>
</sharpen-footer>

</body>
</html>
Loading

0 comments on commit 5b42c33

Please sign in to comment.