-
Notifications
You must be signed in to change notification settings - Fork 0
/
frontier.html
114 lines (108 loc) · 5.61 KB
/
frontier.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head lang = "en-US">
<meta charset="UTF-8">
<title>Frontier - Kevin Gerstner</title>
<link rel="shortcut icon" type="image/png" href="img/logo/cactus-red.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<link rel="stylesheet" href="https://use.typekit.net/xuj1ggj.css">
<script src="https://kit.fontawesome.com/46262caf73.js" crossorigin="anonymous"></script>
<!-- JS & JQUERY-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/jquery-functions.js"></script>
<meta name="description" content="Kevin Gerstner's Portfolio">
<meta name="author" content="Kevin Gerstner">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="project-nav-container"></div>
<div class="hero-image" style="background-image: url(img/frontier/[email protected])">
<div class="overlay"></div>
<div class="hero-text">
<h2>Frontier</h2>
<h5>A Fun-Discovery Platform</h5>
</div>
</div>
<div class="container-sm black-background content-container">
<section>
<div class="row">
<div class="col-sm-6">
<h4 class="section-header">About the Project</h4>
<p>
<b>Frontier</b> is a platform that crowd-sources fun through user-created Journies.
Journies are collections of places or activities to do, which can help you plan a fun day out on the town or a date night.
</p>
<p>
I created this project for my Interaction Design class. During development, we performed User Stories and Scenarios,
made Low-Fidelity and High-Fidelity prototypes, applied UI and UX principles, and performed User Tests with feedback.
</p>
</div>
</div>
</section>
<section>
<h4 class="section-header">Interactive Demo</h4>
<div class="row">
<div class="col-sm-6 iframe-container">
<p>
This is an interactive demo of my design in Figma. You can scroll and tap on buttons like you would on a mobile app.
Creating an interactive product helps to analyze user interactions and assess successes and failures.
</p>
<iframe id="figma-iframe" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FQUZ43AuetRfLS5JbnQ7CQ1ik%2FFrontier%3Fnode-id%3D0%253A304%26scaling%3Dmin-zoom" allowfullscreen></iframe>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col col-sm-3">
<img src="img/frontier/Launch.png" alt="Frontier Launch Screen">
</div>
<div class="col col-sm-3">
<img src="img/frontier/Login.png" alt="Frontier Login Screen 1">
</div>
<div class="col col-sm-3">
<img src="img/frontier/Login 2.png" alt="Frontier Login Screen 2">
</div>
</div>
<div class="row">
<p class="col col-sm-9 image-caption">
Renderings of three login screens, showing the user experience of a sample area.
</p>
</div>
</section>
<section>
<h4 class="section-header">Development Process</h4>
<div class="row">
<p class="col col-sm-8">
These mockups gave us a great starting place to do user tests. From there, we performed three user studies and asked them to perform several
tasks such as "Create a New Journey" or "Find a Journey to do" and observed their actions. This process helped us improve on the user
experience. Once we finished performing these tests, the high-fidelity prototype was created using Figma, which you can demo above.
</p>
</div>
<div class="row">
<div class="col col-sm-4">
<img src="img/frontier/Screen Shot 2019-02-24 at 10.59.00 PM.png" alt="Low-Fi Mockup 2">
</div>
<div class="col col-sm-4">
<img src="img/frontier/Screen Shot 2019-02-24 at 11.27.18 PM.png" alt="Low-Fi Mockup 3">
</div>
</div>
</section>
</div>
<style>
#figma-iframe{
width: 100%;
height: 720px;
}
/* MEDIUM and up */
@media screen and (min-width: 768px)
{
#figma-iframe{
width: 400px;
height: 720px;
max-height: 80vh;
}
}
</style>
</body>
</html>