-
Notifications
You must be signed in to change notification settings - Fork 0
/
labs.html
165 lines (148 loc) · 9.85 KB
/
labs.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html id="labs">
<head>
<!-- TAB SHIT -->
<link rel="shortcut icon" href="images/aj.png?v=2">
<title>Anna Jiang</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="uikit-3.5.7/css/uikit.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page"> -->
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Mukta&display=swap" rel="stylesheet">
</head>
<body id="traditional">
<header>
<!-- DESKTOP NAV -->
<div id="navbar-desktop">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li>
<a href="index.html#portfolio">PORTFOLIO</a>
<div class="uk-navbar-dropdown" uk-drop="animation: uk-animation-slide-top-small; duration: 500;">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li><a href="digital.html">DIGITAL</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li class="uk-active"><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- MOBILE NAV -->
<div id="navbar-mobile">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar="mode: click; boundary-align: true; align: center; dropbar: true">
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li><a href="index.html#portfolio">PORTFOLIO</a></li>
<li class="uk-nav-divider"></li>
<div class = "sublink">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li><a href="digital.html">DIGITAL</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li class="uk-active"><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</div>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="main">
<div class="artabout">
<h5>PENN LABS</h5>
<p>I recently joined <a href="https://pennlabs.org/about" target="_blank">Penn Labs</a> as a UI/UX Designer. I currently work on a small team that develops Penn Mobile, an app made by Penn students, for Penn students. These are some of my recent projects that I've made using Figma!</p>
</div>
<div class="container">
<div class="card">
<h1>Technical Challenge</h1>
<video width="500" height=auto controls>
<source src="images/labs/technical.mov">
</video> <br><br>
<p>
In order to be accepted into Penn Labs, every applicant must complete a technical challenge. This challenge focused on <a href="https://penncoursereview.com/" target="_blank">Penn Course Review</a>, a product that helps students search for and evaluate Penn Courses. My task was to "consider and design one new feature that you would like to add that would assist students in their course selection process."
<br><br>
I decided to implement a few features in my design, starting with a small area dedicated to suggested courses based on common combinations, as many students paired up certain classes.
<br><br>
My main feature was the FAQ section, which was meant to add a more qualitative aspect to the course reviews, as they were mainly just number scores at the time. Questions were to be posted anonymously to most people so students wouldn't be detered from asking questions. However, professors and TAs would be able to see who posted on their course FAQ and remove anything inapproriate. Similarily, regular users could report inapproriate questions and comments. The FAQ was located in the general course page to discourage students from commenting on specific professors or make comparisions, as the professors also viewed this site.
<br><br>
Finally in addition to the FAQ, I added a card for contact information for the professor and TAs in order to ask more private questions.
</p>
</div>
</div>
<div class="container">
<div class="card">
<h1>Polls</h1>
<video width="500" height=auto controls>
<source src="images/labs/polls-archive.mov">
</video> <br><br>
<p>
My team implemented a poll feature that would allow other organizations such as our school newspaper or vice provost to collect data. The polls would range from serious to fun questions and would also be a source of feedback for our app.
<br><br>
I was responsible for designing the basic poll widget as well as the poll archive, where a user could view previous polls and results. I decided to split the archive into two sections: recent polls that are still active and older, inactive polls to make searching for polls easier. The recent polls section matches the original widget for unanswered polls that would appear on the user's homescreen with a sliding function to see all current polls being conducted at the same time.
<br><br>
For any poll, a user could click on the "more info" button to see a more detailed view of the results and toggle the demographics using the filter's button and menu. I decided to include the four different schools and years, as we were also working on data privacy and felt that the average user shouldn't have too much access to personal information.
</p>
</div>
</div>
<div class="container">
<div class="card">
<h1>Dining Balances</h1>
<video width="500" height=auto controls>
<source src="images/labs/dining-balances.mov">
</video> <br><br>
<p>
My school recently made it mandatory for students to be on the dining plan for both freshman and sophomore year. As we've all experienced the pains of being on the dining plan for freshman year, my team felt that it would be helpful to implement a dining balances tab that provided data on a user's current dining balances (such as swipes and dining dollars) and predictions for the rest of the semester.
<br><br>
Some key features that I implemented in my design were Latest Transactions for the past week, Frequent Locations over a semester, and Average Dining Dollars Spent over a week. Using the data from spending patterns of both dining dollars and swipes, we will be able to offer predictions on how much would be left over by the end of the semester. We decided to focus more on swipes, as it was more common to have swipes left over and unlike dining dollars, swipes did not transfer over to the next semester.
<br><br>
I made sure that the graphs representing the data were intuitive for users and modeled some of my designs off of banking and personal finance apps. I also included a light and dark mode. One issue that came up was whether or not we should display a graph for predictions, but given the relatively sparse amount of data that we could collect per user, we opted in favor to just display a banner or send a notification with our predictions.
</p>
</div>
</div>
</div>
<footer>
<h4>
<a href="mailto: [email protected]" target="_blank">EMAIL</a>
•
<a href="https://www.linkedin.com/in/annasjiang/" target="_blank">LINKEDIN</a>
•
<a href="https://github.com/annasjiang">CODE</a>
</h4>
</footer>
<script src="scriptittyscript.js"></script>
</body>
</html>