-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathkpcb-redesign.html
More file actions
187 lines (184 loc) · 11.5 KB
/
kpcb-redesign.html
File metadata and controls
187 lines (184 loc) · 11.5 KB
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Sona Dolasia</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+TC">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,400,500,600,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Horizontal.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color: #ebb6d4;">
<div class="container"><a class="navbar-brand" href="index.html" style="font-family: 'IBM Plex Sans', sans-serif;background-color: #ebb6d4;color: #202020;font-size: 17;margin: 0px 0px 0px;">SONA DOLASIA</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="about.html" data-bs-hover-animate="tada" style="font-family: 'IBM Plex Sans', sans-serif;color: #202020;">ABOUT</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="work.html" style="font-family: 'IBM Plex Sans', sans-serif;color: #202020;background-color: #;"><strong>WORK</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="https://drive.google.com/file/d/1FP4p_giiaeTx_KFHo7Xvzn1YYUC-E3S6/view?usp=sharing" data-bs-hover-animate="tada" style="font-family: 'IBM Plex Sans', sans-serif;color: #202020;">CV</a></li>
</ul>
</div>
</div>
</nav>
<div>
<div class="container text-center">
<div class="row">
<div class="col-md-6" style="padding: 0px 0px 10px 0px;"><img class="img-fluid d-inline bounce animated" src="assets/img/nextdoor-08.png" width="400"></div>
<div class="col-md-6" style="padding: 0px 0px 0px 0px;">
<h1></h1>
<h1 class="text-center" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 40px;padding: 60px 0px 0px;"><strong>Nextdoor</strong></h1>
<p style="font-family: 'IBM Plex Sans', sans-serif;">Conceptual Re-design - <em>January 2019</em></p>
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 0px 30px;color: #212529;">For my application to the KPCB Design Fellowship, I chose to re-design Nextdoor, a social network for neighborhoods. Nextdoor is a popular platform in my community for communication and recommendations, and I wanted to investigate
ways that the design could potentially be improved.</p>
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;"></p>
</div>
</div>
</div>
</div>
<div></div>
<div></div>
<div class="shadow"></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center" style="font-family: 'IBM Plex Sans', sans-serif;padding: 5px 30px;background-color: #ebb6d4;height: 60;"><strong>USER RESEARCH </strong></h3>
</div>
</div>
</div>
</div>
<div></div>
<div style="padding: 20px 0px 0px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;">Through my user research I first wanted to understand how people use Nextdoor's mobile application. I played around with the platform myself, and I discovered that there was a lot of different features with the product. </p>
<ol
style="padding: 0px 70px;font-family: 'IBM Plex Sans', sans-serif;">
<li>What are the main uses for Nextdoor?</li>
<li>What are the pain points of the platform?</li>
</ol>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 16px;padding: 0px 30px;"><strong>Usability Testing on Exisiting Application </strong></p>
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;">The first step of my research was asking people who had never used the Nextdoor app to explore and then do a series of tasks. I wanted to understand how easy the app is to use and if its many different features are obvious</p>
</div>
<div class="col-md-6">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 16px;padding: 0px 30px;"><strong>User Survey</strong></p>
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;">I also sent out a survey to Nextdoor users, by posting on the application itself. I wanted to userstand what users thought about the mobile app vs the website and what features they find most important. </p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center" style="padding: 0px 0px 10px 0px;">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 20px;padding: 0px 30px;"><strong>KEY INSIGHTS</strong></p>
<ol style="padding: 0px 70px;font-family: 'IBM Plex Sans', sans-serif;">
<li class="text-left"><strong>Navigation: </strong>Organization of posts is confusing and hard to navigate, only one place to search<br></li>
<li class="text-left"><strong>Inconsistant Wording :</strong> Some of the icons have common associations different than the ones on the platform. <br></li>
<li class="text-left"><strong>Time:</strong> Finding saved posts is difficult. </li>
</ol>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center" style="font-family: 'IBM Plex Sans', sans-serif;padding: 5px 30px;background-color: #ebb6d4;height: 60;"><strong>IDEATION</strong></h3>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 10px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;">My user research demonstrated that the most pain points were with the mobile application of Nextdoor, so I decided to focus my re-design on that platform. <br></p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/IMG_8182.jpg" width="500">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 16PX;padding: 20px 0px 0px 30px;"><strong>PAIN POINTS AND POTENTIAL SOLUTIONS</strong></p>
<p class="text-left" style="padding: 0px 0px 0px 30px;font-family: 'IBM Plex Sans', sans-serif;">I began by jotting down the main painpoints I found in my user research, and began ideating solutions for those. <br></p>
</div>
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/IMG_8183.jpg" width="500">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 16PX;padding: 20px 0px 0px 30px;"><strong>CURRENT UI</strong></p>
<p class="text-left" style="padding: 0px 0px 0px 30px;font-family: 'IBM Plex Sans', sans-serif;">I then looked at the current UI of the application and began sketching out a redeisgn of it. </p>
</div>
</div>
</div>
</div>
<div style="padding: 0px 0px 10px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;font-size: 20px;padding: 40px 0px 0px 30px;"><strong>LOW & MID-FIDELITY PROTOTYPES</strong></p>
</div>
</div>
</div>
</div>
<div style="margin: 30px;">
<div class="container text-center">
<div class="row">
<div class="col-md-6"><img class="shadow" src="assets/img/nextdoor%20home%20lofi.png"></div>
<div class="col-md-6"><img class="shadow" src="assets/img/nextdoor%20lofi.png"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center" style="font-family: 'IBM Plex Sans', sans-serif;padding: 5px 30px;background-color: #ebb6d4;height: 60;"><strong>HIGH FIDELITY MOCK-UPS</strong></h3>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center"><img class="img-fluid shadow" src="assets/img/nextdoor%20home.png" width="300" style="margin: 15px;"><img class="img-fluid shadow" src="assets/img/post%20page.png" width="300" style="margin: 15px;"><img class="img-fluid shadow" src="assets/img/nextdoor%20home.png" width="300"
style="margin: 15px;"></div>
</div>
</div>
</div>
<div></div>
<div class="footer-basic">
<footer>
<ul class="list-inline"></ul>
<p class="copyright" style="font-family: 'IBM Plex Sans', sans-serif;">Sona Dolasia © 2019</p>
</footer>
</div>
<div></div><br>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
</body>
</html>