-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathblocbox.html
More file actions
executable file
·249 lines (241 loc) · 17.6 KB
/
blocbox.html
File metadata and controls
executable file
·249 lines (241 loc) · 17.6 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>PayCrave Case Study</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style_blocbox.css">
<!-- JQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<a name="top"></a>
<div class="header">
<ul id="headers" class="menu no-bullet" >
<li><a data-page="home" href="index.html"><h5>Home</h5> </a></li>
<li><a data-page="about" href="index.html#about"><h5>About</h5> </a></li>
<li><a data-page="contact" href="index.html#contact"><h5>Contact</h5> </a></li>
</ul>
</div>
<hr id="headerline"/>
</nav>
</header>
<main role="main">
<section class="case-study">
<div class="intro">
<div class="intro-left">
<li id="title">
<h1>Blocbox</h1>
</li>
</div>
<div class="intro-right">
<li id="title-img">
<img src="Assets/Blocbox/homepage.png" alt="Portfolio" />
</li>
</div>
</div>
<div class="center-text">
<li id="blurb">
<p>Blocbox aims to give users the ability to store notes, images and links directly onto the web for easy access. Blocbox is a simple to use product that aims for collaborative storage and multiple projects with Boxes.</p>
<div class="prototype"><a data-page="prototype" href="https://invis.io/7NBEGDR5P#/230143312_Blocbox_Hi-Fi_Wireframe_Content_Creation_1440x1024" class="btn">View the full prototype</a></div>
</li>
<div class="designheading">
<hr id="problemline1"/>
<h2>The Problem</h2>
<hr id="problemline2"/>
</div>
<p>Currently, users were not satisfied with cloud storage websites and technologies used to save notes, links and images, with some stating that it was not easy enough to do so and others stating that current technology isn’t satisfactory in their capabilities. Some of the top pain points were:
<li class="bullet">Organization of items.</li>
<li class="bullet">Capability for collaboration was lacking.</li>
<li class="bullet">Too many features make the experience cluttered.</li>
</p>
<h2>The Solution</h2>
<p>Blocbox has these features to enhance the user experience and ease pain points during the process:
<li class="bullet">Easy access to content items.</li>
<li class="bullet">Ease of use navigation.</li>
<li class="bullet">Simplistic organization of content items.</li>
<li class="bullet">Ability to work on large-scale projects.</li>
<li class="bullet">Ability to work collaboratively</li></p>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Research</h2>
<hr id="approachline2"/>
</div>
<div class="center-text">
<p>My process started off with brainstorming a user flow and coming up with user stories for what a typical user wanted out of their cloud storage experience.</p>
<img src="Assets/Blocbox/UserFlow.png" alt="Portfolio"/>
<br/>
<img src="Assets/Blocbox/UserStory.png" alt="Portfolio"/>
<p>From here I went on to gathering research data, focusing on these specific points for the survey:
<li class="bullet">General browsing habits.</li>
<li class="bullet">Saving content online.</li>
<li class="bullet">Note taking abilities.</li>
<li class="bullet">Work environment.</li>
<li class="bullet">Social Sign On Habits</li>
<li class="bullet">Demographics</li></p>
<h4 class="link"> <a href="https://drive.google.com/open?id=1jWDD4kVYg4_gSK6exNA0XVJROmbqEmpNMHGi40AZ8Q8">Survey can be seen here</a> </h4>
<h4 class="link"> <a href="https://drive.google.com/open?id=1QnZeYZjMcJWiC92VHmJ2awC8NAxh_NtiK-ULICqwTQk">Results can be seen here</a> </h4>
<p>After gathering user research, I wanted to deep dive into more information to ensure the best product. After interviewing some potential users more in-depth, I came up with 3 User Personas in Illustrator on which to base the target audience for Blocbox off of.</p>
<img src="Assets/Blocbox/UserPersonas.png" alt="Portfolio"/>
<h4 class="link"> <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwd0lEbWwtY3RCXzQ">See the other User Personas here</a> </h4>
<p>I also did some preliminary competitive analysis to see if there was a viable solution to our existing problem already. The three companies I chose to look at were Google, Dropbox and Evernote.</p>
<img src="Assets/Blocbox/blocboxfeaturematrix.png" alt="Portfolio"/>
</div>
<div class="designheading">
<hr id="designline1"/>
<h2>Ideation</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<img src="Assets/Blocbox/Blocbox_Style_Guide.png" alt="Portfolio"/>
<p>Upon completion of our competitive analysis and finding that no competitors offered all the features we wanted to incorporate, I began to ideate our logo and come up with a style guide for future work.</p>
<img src="Assets/Blocbox/LogoSketches.png" alt="Portfolio"/>
<h4 class="link"> <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwVzlreFRSaVk2MXc">See more digital Logo sketches here</a> </h4>
<p>For the logo design, I wanted to keep things very simple and minimal. I had decided early on that our large scale project collaboration was going to be called Boxes, and so with that in mind I decided a minimalist logo of a lowercase B within a box would be appropriate. Our style guide was based off complimentary bold colors, with a dark blue as the primary color and a bright orange as a call to action color.</p>
</div>
<div class="designheading">
<hr id="problemline1"/>
<h2>Wireframing</h2>
<hr id="problemline2"/>
</div>
<div class="center-text">
<p>After the style guide was finished, I went on to wireframe Blocbox using Balsamiq.</p>
<img src="Assets/Blocbox/lo-fi-dash.png" alt="Portfolio" />
<p>Above is the wireframe I created for the Dashboard. In total, we created wireframes for the following pages:
<li class="bullet">Homepage</li>
<li class="bullet">Sign In/Sign Up</li>
<li class="bullet">Reset Password</li>
<li class="bullet">My Account</li>
<li class="bullet">My Account (New User)</li>
<li class="bullet">My Account (Upgrade)</li>
<li class="bullet">Dashboard</li>
<li class="bullet">Dashboard (New User)</li></p>
<h4 class="link"> <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwb1oyaDYtd2Zvckk">Click here to see all wireframes</a> </h4>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Mockups</h2>
<hr id="approachline2"/>
</div>
<div class="mockups center-text">
<img src="Assets/Blocbox/med-fi_dashboard.png" alt="Portfolio" />
<p>As I was designing my wireframes, I based my decisions on ensuring all my user stories were reflected in the design. I went through several iterations of the homepage, with the first being based off the guide that Bloc provided for this project, and then the other 3 were created with more freedom in choice. After the wireframes were completed, I went on to design medium resolution mockups in Illustrator. </p>
<h4 class="link"> <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwb1oyaDYtd2Zvckk">Click here to see all medium resolution mockups</a> </h4>
<h3>As a user, I want to view my content</h3>
<img src="Assets/Blocbox/dashboard.png" alt="Portfolio" />
<p>After our medium resolution mockups were done, the time came to design hi-fi mockups for our prototype. Using the style guide, I made subsequent small changes to the medium resolution mockups for the final design. Our dashboard remained largely the same, with some small changes made for where the Account icons would go. I felt the upper right corner was more natural of an area a user would go to for Account Info, rather than the bottom left hand corner. I also wanted to make sure the collaborator icon was next to it, so the top right corner could be the "people" section. I then moved the "Add" button to the left hand nav so that could be the "content" section.</p>
<br/>
<p>Some changes were also made to the homepage. The version of the homepage that I decided to go with for the final design was the 4th wireframe iteration, as I felt it offered a good balance in terms of hierarchy:
<li class="bullet">The hero section offered a side-by-side view of both Blocbox’s dashboard, as well as a summary of what Blocbox is. I decided the side-by-side version was easier to read than the text-above-image version that Bloc provided for the homepage.</li>
<li class="bullet">The feature section offered what you could store with Blocbox. I felt it was important to highlight this in a more visual way, and so I designed this section with larger images as compared to what Bloc provided for the homepage, which was just an icon and text.</li>
<li class="bullet">The pricing and testimonial section I kept generally the same, as I felt these sections were already reflecting good design choices.</li></p>
<h3>As a user, I want to add an image, a text-based note, or a link</h3>
<img src="Assets/Blocbox/content.png" alt="Portfolio" />
<p>After finishing up the homepage, I went on to showcase how users would create content in the dashboard. The three types of content a user could create were Notes, Images and Links. My designs were meant to be highly visual, yet still have an excellent user experience by making the process very easy and intuitive to use in comparison to other platforms. With this in mind, I wanted users to be able to drag and drop items into the browser to upload content, as well as have simple call-to-action buttons to indicate content upload.</p>
<img src="Assets/Blocbox/notes-designer.png" alt="Portfolio" />
<p>Within the content itself, I designed simple yet effective ways to touch on these user stories:
<li class="bullet">I want to select an item as favorite</li>
<li class="bullet">I want to add tags to my saved items</li>
<li class="bullet">I want to share an item on Facebook</li>
<li class="bullet">I want to share an item on Twitter</li>
<li class="bullet">I want to share an item via email</li></p>
<p>Icons would indicate where the user could favorite an item, add tags, delete the content, and share their content. A simple auto-save feature in the upper right corner would enable a smoother experience so the user wouldn’t have to worry about lost changes. Finally, the ability to add the content to a project (Box) would enable collaboration on large scale projects.</p>
<img src="Assets/Blocbox/upgrade.png" alt="Portfolio" />
<h3>As a user, I want to create an account, upgrade my account, and update my account settings</h3>
<p>For our user account, I kept things simple with only necessary information, like Name, Profile Pic, Email and Password, and an intuitive upgrade feature. A text indication underneath the Save Changes button would indicate to users whether or not their changes were made successfully, smoothing out the overall experience. To upgrade, the user followed these steps:
<li class="bullet">Step 1: Click on the level the user wants to upgrade/downgrade to</li>
<li class="bullet">Step 2: A credit card fill-in form appears</li>
<li class="bullet">Step 3: Fill out the credit card form</li>
<li class="bullet">Step 4: Press the Save Changes button</li>
<li class="bullet">Step 5: A popup screen for your upgrade/downgrade appears, with the select features of that selection. Press Upgrade if the user wants to confirm, or cancel if the user wants to cancel</li>
<li class="bullet">Step 6a: If the CC is accepted, the user is upgraded/downgraded.</li>
<li class="bullet">Step 6b: If the CC is denied, the user is given an error popup and asked to recheck their information</li></p>
<p>The original version of the Credit Card information had billing address included as well, but I felt as if that took away from the overall user experience in time management and opted out of including it in my final design.</p>
<img src="Assets/Blocbox/collaborators.png" alt="Portfolio" />
<h3>As a user, I want to add, view and manage my collaborators</h3>
<p>The last user story I worked on was with the collaborators function of Blocbox. The gray hover effect at the bottom of an item indicated how many collaborators were currently on it, while a collaborator icon with a drop-down menu in the upper right hand corner took you to the collaborators page where a user could view and manage their collaborators.</p>
</div>
<div class="designheading">
<hr id="designline1"/>
<h2>Prototyping</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<p>The final step was to send out our full prototype for user testing, record their feedback and make subsequent small changes to reflect that feedback. Overall, Blocbox was well received by the majority of users who tested it. Users praised how visual the overall content system was. They also enjoyed how easy the product was to use and the collaborative features.</p>
<br/>
<h4 class="link"> <a href="https://drive.google.com/open?id=1eNQKfInundBA1sOcgKjdwDMtJf5vGGz5cR9Z7HeXn8c">User Testing Feedback</a> </h4></p>
<div class="prototype"><a data-page="prototype" href="https://invis.io/7NBEGDR5P#/230143312_Blocbox_Hi-Fi_Wireframe_Content_Creation_1440x1024" class="btn">View the full prototype</a></div>
<div class="designheading">
<hr id="problemline1"/>
<h2>Front End Development</h2>
<hr id="problemline2"/>
</div>
<p>After prototyping, I also built two static pages for the homepage and the dashboard using HTML, CSS and Javascript for some simple interactions.</p>
<h4 class="link"> <a href="https://ackeepitcool.github.io/Blocbox/">Live Version Homepage</a> </h4>
<h4 class="link"> <a href="https://ackeepitcool.github.io/Blocbox/dashboard.html">Live Version Dashboard</a> </h4>
</div>
<div class="conclusion center-text">
<div class="designheading">
<hr id="conclusionline1"/>
<h2>Conclusion</h2>
<hr id="conclusionline2"/>
</div>
<h3>Doubts</h3>
<p>My doubts going into this project was that it may be impossible to design a product that would cater to simple, I-just-want-to-save-stuff users as well as collaborative, heavy-use users. </p>
<br/>
<h3>Surprises</h3>
<p>What surprised me the most was how tricky it was to code our design from scratch, as it was my first time using the front end development skills I learned at the Bloc course.</p>
<br/>
<h3>More Time/Resources
<p>If I had more time or resources, I would have made sure that user testing reached a larger audience since user research data is the backbone of good UX design.</p>
<br/>
<h3>Takeaways
<p>A final point of feedback was that Blocbox needed something to make it really stand out above the competition. This was my first project where I applied the design process and front end development skills I learned from Bloc. It was extremely enjoyable, and while the front end development was an enjoyable challenge, it definitely opened my eyes to the whole UX design process and how I wanted it to be my main focus after the program.</p>
</div>
<div class="center-text">
<div class="designheading">
<hr id="approachline1"/>
<h2>More Projects</h2>
<hr id="approachline2"/>
</div>
<a href="http://agchen.design/paycrave.html"> <img src="Assets/PayCraveBanner.png" alt="Portfolio"/> </a>
<a href="http://agchen.design/knode.html"> <img src="Assets/KnodeBanner.png" alt="Portfolio"/> </a>
</section>
</main>
<!-- Footer -->
<hr/>
<footer>
<div class="footer-nav-block">
<div class="footer-left"><a href="index.html"><img class="logo" src="Assets/Logo3-sm.png" alt="Portfolio" /></a></div>
<div class="footer-mid">
<div class="back"><a href='#top' class="back">back to top</a></div>
</div>
<div class="footer-right"><ul class="social_icons">
<li class="social"><a href="http://instagram.com/ackeepitcool"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://twitter.com/ackeepitcool"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://linkedin.com/agchen"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://dribbble.com/ackeepitcool"><i class="fa fa-dribbble fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107040718-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107040718-1');
</script>
</body>
</html>