Blocbox is a SaaS (Software as a Service) web application which allows people to collect information and store it in a single place. A person can create simple documents, store images, links to websites, and collaborate with others.

Duration

16 weeks

Responsibilities

UX Research, UX/UI Design, Branding, User Testing, Frontend

Tools

Sketch, Adobe Illustrator, InVision, MyBalsamiq, Atom, GitHub

The Problem

Designers and marketers often save hundreds of images and websites for inspiration or to use as resources for a project, and keep notes on their phones, computers, or in notebooks, but it is difficult to keep them organized and share them with teammates.

blocbox mockup

User Survey

To get an idea of what features users might want, and how they would use the software, I created a survey with questions about how our users interact with their devices, what they look at online, if they save content, if they write and save notes to remember things later, and if they collaborate and share resources with their co-workers.

92%

Save content while browsing.

80%

Work in a collaborative environment.

53%

Browse on a laptop or desktop.

34%

Browse on a smartphone.

*Based on results from 15 survey respondents

Competitive Analysis

The cloud storage space is a crowded market with many competitors. All of these companies essentially offer the same services: cloud storage, synced across devices, with the ability to invite collaborators. One space they were all lacking was the ability to save and curate bookmarks. It became clear that the way for Blocbox to compete in this space was to become a sort of "Pinterest but with notes and collaboration" type tool for creative teams.

Dropox Box OneDrive
Social Sign On
Bookmarkng Tool
Text Documents
Device Syncing
Collaborators
No Yes Unclear

User Personas

To create user personas I selected three of the respondents from the survey and did a quick interview to discover more about them and their goals for using the app.

brenda

Daniel

26 y/o design director

Goals

  • Share inspiration with his team
  • Organize content into groups
  • Ability to write and share notes

Frustrations

  • Difficulty managing bookmarks
  • Too many different softwares
  • Not accessible on all devices
clay

Susan

33 y/o marketing director

Goals

  • Keeping track of bookmarked content
  • Ability to view at work and home
  • Would like easy notetaking software

Frustrations

  • Only accessible on work laptop
  • Hard to remember what's bookmarked
  • Other software is difficult to use
sanja

Amy

32 y/o web designer

Goals

  • Centralized way of organizing inspiration
  • Simplicity of pen and paper into device experience
  • Synced online, not computer

Frustrations

  • Older computer = less hard drive space
  • Doesn't know what tools to use
  • Organizing is time consuming

User Stories & User Flows

I created separate user stories for new and returning users, with new users focusing on getting information, creating an account, and adding initial content, and returning users focusing on adding and organizing content, inviting collaborators, and upgrading their account. I then created user flows for the MVP (minimum viable product).

See all user stories and user flows.

Low-Fidelity Wireframes

I started wireframing the landing page first, as this would be where are potential users would form their first impressions and learn about Blocbox. I wanted a layout that was clean and to the point, while still conveying enough information to new users. I created a few versions that each started with a large hero image to capture attention, a section for features, pricing, and testimonials.

High Fidelity Wireframes

Once I settled on a landing page layout, I fleshed out my designs in Sketch adding in all of the written content so I could begin user testing. I wanted to make sure there was enough information on the landing page and in the dashboard empty states that new users could figure out what Blocbox was for and how to use it.

User Testing

Utalizing usertesting.com I conducted remote user testing to get feedback on the landing page design & content, as well as the navigation of the dashboard. Overall the feedback was positive, however, I realized I should have included some more in-between state screens for the navigation test so that it would feel more like the live site experience. Without them the testers were a little confused about whether they had completed the task correctly or not.

Watch one of the user tests below.

Logo & Colors

For the logo I began with a mindmap and then sketched out every iteration of blocks and boxes I could and landed on a logo that resembles two B’s made of blocks.

For the color palette I went with a combination of purples, blue, a pop of bright green, and grey and white accents to appear both professional and modern.

#534365
#363490
#4dd5b0
#705ab2
#e2e2e2
#ffffff

Typography

I started the branding work by choosing Montserrat and Lato for the typography - both clean, modern sans-serif fonts that would be easy to read online and lend to the trustworthiness of the brand.

Lato Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Montserrat

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Final Mockups

I applied the branding to the wireframes for the final mock-ups. I focused most of the color use to the landing page to draw users in and kept it limited within the dashboard to emphasize navigation and CTAs. I then coded up the landing page and dashboard screens for a proof of concept.

prototype

Landing Page

prototype

Dashboard

What I Learned

Being my first formal project, Blocbox taught me a lot about the design process, especially the research phase. It's important not to make assumptions about how a user will interact with a design. Also, testers will not always understand why a prototype has limited functionality and may get confused on how they got from one step to another if the in-between states are missing. The closer you can make the prototype to the finished product the cleaner the usability data will be.