Blocbox

SaaS cloudsharing app

Idea Generation | Documentation | Research | Wireframing | User Testing

The Problem

Fill the Space for Intuitive and Delightful Cloud Collaborations

There are multiple SaaS sharing platforms available to users, often times the interfaces are not intuitive. Users and collaborators cannot see previews of the files they’re saving and opening, and collaborators on the platform . These platforms are also somewhat lacking in the ability to categorize and tag content in a logical and searchable way.

The Solution

blocbox is a SaaS web application that allows users to collect, share, and store information from a single place. A person can create simple documents, store images, links to websites, and collaborate with others. Files are previewed from the dashboard, and the service offers the ability to tag favorites and file into boxes.

Surveying the User


In order to understand my users in the most thorough way possible, I developed and distributed a survey across social media channels aimed at individuals that find themselves in collaborative situations. I aimed to discover:

  • What technology users employed to access the internet
  • The behavior of users upon discovering a link or asset that they find valuable, and whether or not they save it
  • The nature of collaboration in the users' personal lives and professional situations
  • Current programs and apps used to write notes, save links and photos, and foster collaboration

I found that, overwhelmingly, users employ cell phones and laptops to do access the internet. Saving links and assets was in no way streamlined, with some users preferring to keep a note document full of links, others favoriting links, and some using existing platforms to create files of saved materials. Most users did have a level of collaboration in their lives, whether in a professional or personal setting. Currently, users tend to gravitate toward a variety of cell phone apps to take and store notes and links, and also utilize Evernote, desktop applications, and more rudimentary programs such as Word in order to organize and file their materials.

Assessing the Competition


Cloudsharing platforms already exist in multitude, meaning that in order to create a successful platform that met my users’ goals, I would have to understand the market and competition that existed. In analyzing three competitors, I was able to pinpoint what exactly they were doing correctly, and leverage that , as well as analyze their growth areas, so as to address those problems as they pertained to my users. I analyzed Evernote, an industry leader in collaborative sharing, as well as Microsoft OneNote, that is part of a greater Microsoft Office Suite and which enjoys household name status, and the lesser known SimpleNote. See my competitive analysis here.

Identifying User Personas


I then developed user personas based on specific users of collaborative cloud sharing apps. The goals of these users were easily share content with others and collaborate seamlessly with invited individuals to specific accounts, access content offline, organize content intuitively, and access saved content across a series of platforms.

Crafting User Flows


In keeping with the results of my survey alongside the goals and concerns of my users, I began developing an MVP that allowed intuitive sharing, the ability to categorize and search content via tags and favorited status, and the ability to create an account, upgrade accounts, and sign into the program. The goal was to create a user-friendly design that was clean, aesthetic, and showcased the content.

Creating a Brand Identity


My goal in branding was to create an attractive brand identity was easy to remember, pointed to the purpose of the product, and maintained the same straightforward and clean philosophy that guided the user experience. Therefore, for the logo, I chose a simple geometric rendering of a 3D box; it is visually interesting, is simple to remember and identify, scales well, and speaks to the purpose of the product, which is to gather files and assets in a “box” to share and access later.

The fonts I chose were Montserrat for headers, and Lora for the paragraphs. Urban, geometric, and reminiscent of typography of the early 20th century, it adds an aesthetic sense to the project while remaining utilitarian; likewise, Lora is a serif font that matches nicely with Montserrat, reiterates the classic vibe, and is easily readable even at very small sizes.

Finally, in creating the color scheme, I chose to go with a complementary teal and orange palette. Teal, the primary color, emphasizes feelings of friendliness and stability, while also aiding in concentration and creativity. It is matched with orange, which combines the happiness of red and the energy of yellow, to create an invigorating, attention-grabbing draw to calls to action on the page. It is a classic color scheme that does not indicate any one profession or niche, thus indicating that blocbox can be used in a wide variety of situations.

Wireframes


Revisiting my user flows, I set out to create a simple and intuitive way to sign up for blocbox, upload links, notes, and photos to the dashboard, create categories of favorites and tags, and share and invite new members easily. I began by laying the designs out with Balsamiq.

User Interface Design


After finishing the wireframes, and gaining a thorough understanding of how to create an simple, straightforward, and intuitive experience for my users, I brought the design to Sketch, where I laid out the User Interface for blocbox. After creating artboards for both the product page and the dashboard, I exported my work to Invision, where I created a clickable prototype, with the aim of gathering design feedback and user testing.

User Testing and Redesign


After creating a clickable prototype, I wanted to assure that my users could easily utilize the product, and that they could guide their way through the homepage and dashboard, as well as create accounts pinpoint the methods for uploading notes, links, and assets, and invite users to collaborate on files. I recruited individuals who mentioned they occasionally utilized cloudsharing platformings to complete filmed surveys. I met with my informants on Skype and asked them to complete a series of tasks as they provided feedback, while I recorded the call.

Overall the informants found the product intuitive and easy to use. They were able to create accounts and log in with previously created accounts, upload files and links, upgrade their account from free to paid and invite users. Most users seemed to have a strong familiarity with similar products, and by far the biggest piece of feedback that I received was “isn’t this like Dropbox?” Therefore some of the user success in the product may not be attributed solely to the design, but rather to design plus a previous familiarity with similar platforms that created a sense of schema for the users.

At one point, I wanted to test an alternate layout to the dashboard that included a horizontal navigation bar along the top of the screen, as opposed to a vertical bar down the left side of the screen, as I felt that it created an illusion of more space on the dashboard for users to utilize. I mocked up the process, and submitted both screens to Usability Hub, where I performed a preference test.

My suspicions were confirmed, as 70% of the users preferred the alternate layout with the horizontal nav bar to the original layout with the vertical bar. However, the management of space proved to be a difficult problem to solve; if a user adds a significant number of boxes, the dropdown from the top may become cumbersome as it drops down and covers content. I’d like to continue to explore this layout in the future, and play with provide users with the horizontal nav bar while resolving this specific issue .

Reflections and Takeaways


This project marked the first time I took the reins to complete both the User Experience research and User Interface design, and was an incredible learning process as a result. As a linguist, I was used to doing ethnographic studies and describing the behavior of users, and this provided me with the opportunity to parlay that experience into a tangible product. Unlike linguistics, however, the result of the research was the find ways in which to improve upon the product. I realized quickly that UX and UI is not about reinventing the wheel, but about considering intuitive solutions that work best for the situation; sometimes those solutions are tried and true, and exist as well-loved interfaces, and sometimes the researcher and designer get innovative.

As my first UX and UI project, I gained an appreciation for doing the research, creating the wireframes, testing, and tweaking. Constant reiterations were the name of the game here, as I continued to gather feedback from my peers, mentors, and users. I also realized, through this project, that I am not my user. This was integral to the completion of the product, as I found that the way in which I intuitively work is not the way in which everyone works, and in order to create a successful product, I need to get out of my head and into others'. The result was a successful MVP that can continue to evolve and be refined, but that possesses the functions necessary to get the job done in a way that users value.

Test the Invision App


Please Click Through to the Invision Prototype