ackeepitcool.github.io/blocbox.html at master · avigoldstein/ackeepitcool.github.io · GitHub

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
<!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/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>Back to Home</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>
      <li id="blurb">
        <p>Blocbox is a website I developed at Bloc that 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>
      </li>
      <div id="process-right" class="color">
          <h2>The Problem</h2>
          <p>Users were not satisfied with current websites and technologies used to save notes, links and images, with some stating that it was not easy enough to do so and others saying that current technology isn’t satisfactory in their capabilities.</p>
          <h2>The Solution</h2>
          <p>The solution was to create a web platform with easy access to content items and ease of use. We also wanted to enable working on large-scale projects with lots of items, as well as offering the ability to work collaboratively with others.</p>
      </div>
    <div class="process">
      <div id="process-left">
          <li><h2>Process</h2></li>
          <li><h3>Finding what the User wanted</h3></li>
          <li><p>Our process included user research via polling for problems with the existing marketplace, and investigating what users were looking for in terms of cloud storage for content.</p>
          <h4>Polling Questions <a href="https://docs.google.com/forms/d/1jWDD4kVYg4_gSK6exNA0XVJROmbqEmpNMHGi40AZ8Q8/prefill">here</a>.</h4></li>
      </div>
          <li id="process-right_img">
            <img src="Assets/Blocbox/lo-fi-dash.png" alt="Portfolio" />
          </li>
    </div>
      <div class="center-text">
          <p>From the results, we concluded that users were looking for an easy to use, easy access website that offered the ability to quickly share and collaborate with other people. We decided to offer the feature of “collaborators”, along with the ability to handle large scale projects with Box. The most basic use remains the same: giving users a quick and easy way to access and save content.
        <h4>Results <a href="https://docs.google.com/spreadsheets/d/1QnZeYZjMcJWiC92VHmJ2awC8NAxh_NtiK-ULICqwTQk/edit?usp=sharing">here</a>.</h4></p>
        <div id="competitive-analysis" class="color"> <h2>Competitive Analysis</h2>
          <p>We conducted our competitive analysis on Google Drive, Dropbox and Evernote. While both Google Drive and Dropbox had desktop sync and easy to use interfaces, Google Drive lacked editing capabilities for some document types and sharing took too many steps, while Dropbox had small storage space and users had to edit files outside of the website. Evernote was more versatile in their note taking platform, but was not as intuitive to use as the other two.
          <br/>
          <br/>Once we were done with our competitive analysis, we went on to map out our user flow, to determine what steps a customer went through when they use Blocbox.
        <h4>Full user stories <a href="https://docs.google.com/spreadsheets/d/1_wiaHqK74mqhWpYXv0ULLH6uu9ZLyJpM9H4753CcO30/edit?usp=sharing">here</a>.</h4></p>
        <h4>Personas can be found <a href="">here</a>.<h4>
        </div>
        <h2>Low-Fi and Hi-Fi Mockups give starting point</h2>
          <p>From there we went to wireframing and prototyping, with some low-fi and hi-fi mockups.</p>
        <img src="Assets/Blocbox/wireframe_content.png" alt="Portfolio" />
          <p>Above is a wireframe mockup of our dashboard, with an enlarged contents section to place an emphasis content organization, as well as a simple left hand navigation and drop downs for our buttons. We made 2 different versions of the dashboard, with the other version having a top navigation. We decided this version ultimately was more user friendly so continued to design based off of this wireframe.</p>
        <h4>Full low-fi mockup <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwb1oyaDYtd2Zvckk">here</a>.</h4>
        <div id="mockup" class="color"> <img src="Assets/Blocbox/dashboard.png" alt="Portfolio" />
          <p>After our low-fi mockups were completed, we went on to design our prototype. After designing some wireframes and sketching up some logo designs, we were ready to begin hi-fi mockups. Our first version of Blocbox was modeled directly after the low-fi mockup, with a feature-heavy homepage and easy-to-use dashboard and content management system.
        <h4>Style Guide and Logo Sketches can be found <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwVzlreFRSaVk2MXc">here</a>.</h4>
        <h4>Hi-Fi Mockups can be found <a href="https://goo.gl/mnesNd">here</a>.</h4></p>
        </div>
        <h3>Simplistic navigation with an easy to use interface</h3>
          <p>After we finished designing the homepage and dashboard, we went on to showcase how users would create content. The three types of content a user could create were Notes, Images and Links. Our designs were meant to be highly visual, yet keep in the user experience part of the process by making the process very easy and intuitive to use compared to other platforms.</p>
        <img src="Assets/Blocbox/content.png" alt="Portfolio" />
        <h3>Building out Account Settings</h3>
          <p>We also decided built out our Account Settings page. We added a nice UX feature to indicate changes had been saved down near the bottom, as well as updated our Content Creation system to have an "auto-save" feature to indicate to the user that their changes had been committed.</p>
        <img src="Assets/Blocbox/accountsettings.png" alt="Portfolio" />
        <h3>As a user, I want to upgrade my account</h3>
          <p>Another user story we wanted to touch upon was the ability to upgrade the user account to the next feature level. Through the Account Settings page, you could upgrade to either Professional or Expert levels, which included additonal features. The website would take you through these features in a popup window once you were committed to making an upgrade, and then ask you for CC info. We also included a small popup error window in case the credit card did not run successfully, which we felt was essential to the user experience.</p>
        <img src="Assets/Blocbox/upgrade.png" alt="Portfolio" />
        <h3>As a user, I want to add, view and manage my collaborators</h3>
          <p>The last user story we wanted to work on was the ability to add, view and manage collaborators to content items. The gray hover effect at the bottom indicated how many collaborators were on the item, while a dropdown menu in the upper right hand corner took you to the collaborators page where a user could view and manage their collaborators. The ability to add collaborators is also available on all content items for easy use.</p>
        <img id="collaborators" src="Assets/Blocbox/collaborators.png" alt="Portfolio" />
        <div id="conclusion" class="color">  <p>After user testing the hi-fi mockup and getting feedback, we proceeded to fully design Blocbox and send it out for user testing. After receiving positive feedback on the user testing, we then went on to code a very simplified version of Blocbox homepage and dashboard for a live version.</p>
        <h4>User Testing Feedback <a href="https://drive.google.com/open?id=1eSEKgBtRdH5NXMsGeZhW9zXyQ66_np3Xk7Ywa1X-XAc">here</a>.</h4>
        <h4>Live Version Homepage <a href="https://ackeepitcool.github.io/Blocbox/">here</a>.</h4>
        <h4>Live Version Dashboard <a href="https://ackeepitcool.github.io/Blocbox/dashboard.html">here</a>.</h4>
        <h3>Full prototype <a href="https://invis.io/7NBEGDR5P#/230143312_Blocbox_Hi-Fi_Wireframe_Content_Creation_1440x1024">here</a>.</h3>
        <h2>Conclusion</h2>
          <p>In conclusion, Blocbox worked well with our users. They enjoyed how easy the product was to use and the collaborative features and overall design. A final point of feedback was that our product needed something to make it really stand out above the competition. 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. What surprised me the most was how tricky it was to code our design from scratch. If I had more time, I would have made sure that user testing reached a greater audience. I learned how the design process works as well as how to both design and code during this project. I will carry this knowledge on to future projects.</p>
        </div>
      </div>
  </section>
</main>

<!-- Footer -->
<footer>
    <div class="footer-nav-block">
        <div class="footer-left"><a href="index.html"><img class="logo" src="Assets/ACLogoWhite-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"><img class="social" src="Assets/Social/IG.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://twitter.com/ackeepitcool"><img class="social" src="Assets/Social/twitter.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://linkedin.com/agchen"><img class="social" src="Assets/Social/linkedin.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://dribbble.com/ackeepitcool"><img class="social" src="Assets/Social/dribbble.png" alt="Portfolio" /></a></li>
        </ul>
        </div>
    </div>
</footer>
</body>
</html>