User Research | Brand Identity | UX & UI Design and Development

Blocbox is a SaaS application that allows users to collect and share notes, documents, images and links easily.
  • User Research
  • Brand Identity
  • UX/UI Design
  • Development
  • User Surveys
  • Competitive Analysis
  • User Interviews/Personas
  • User Stories/Flows
  • Wireframes
  • Visual Design/Prototype
  • Usability Tests
  • Responsive Site
  • Google Forms
  • Balsamiq
  • Adobe Illustrator
  • Adobe Photoshop
  • Invision
  • User Testing
  • UserTest.IO

What is Blocbox?

Blocbox is a cloud-based SaaS application that provides users an easy way to collect and store information. It allows categorizing, saving images, notes, and links and sharing them with friends, family and coworkers.
Project Duration: 12 weeks


There are many SaaS cloud-based sharing products available to users, often times these sharing platforms have complex solutions and busy dashboards. Most of the available tools on the market, such as Evernote and Pinterest allows saving a single type of content. There was definetely a demand for an application that is fully responsive, easy-to-use and allows not only storing, but also sharing a variety of content type.


Blocbox is designed to create an intuitive experience for users looking to collect and share images, notes, and links. Users can save any type of content all in one place along with an ability to categorize them by tags or by content type such as images, notes, and links.


User Research

Our survey audience was a mix group of individuals including, but not limited to Engineers, Architects, Support and Training Specialists. They were between the ages of 25-34 years old, and located in New York and Boston. Based on the survey results over 70% of our audience were professionals, who worked in a collaborative environment. Majority of them share resources with their coworkers and friends in regular basis.

Majority of our audience owned a smartphone along with a tablet and a laptop. They mentioned about browsing on their smartphone and also, on their laptops in addition to their smart phone. Social networks and news were the most popular sites consumed. Our users needed to access content in Blocbox from any device, which would require a responsive design. About 60% of them saved content sometimes and about half of them downloaded content, but some of them bookmarked content on their browsers. They all mentioned about having difficulty with organizing and searching saved content.

Some of our competitors are Smart Phone App, Evernote, Pinterest, Facebook and Trello based on the survey results. Our audience write notes-mainly for personal reasons, but some of them for business reasons. Most of them capture notes with smart phone apps. Another popular way that they use to capture notes is with Evernote. They mentioned how much they liked being able to access notes from anywhere easily. Also, being able to set reminders was an important feature for them. They think it's easy to access these type of tools by connecting through a Facebook or a Twitter account.

Competitive Analysis

  • Their basic plan is free and comes with 60 MB of new uploads per month.
  • They provide rich-text notes, including highlighting, checklists and formatting.
  • Evernote can be used on phone/computer and sync across devices.
  • Users can tag and merge notes, or select multiple notes and change their combined tags.
  • Users can attach files to notes: word, sheets, presentations, images, PDFs.
  • Evernote has too many features/too complex for simple note taking and somewhat cluttered.
Apple Notes
  • It is completely free to use and it doesn’t require or consume iCloud storage space.
  • Users can send notes to text message, messenger, mail, social media and third party apps.
  • Users can create multiple folders, and assign content from various apps within a share sheet on Mac or iOS. No device limit.
  • Users can share their notes directly to Reminders, and create “Apple Notes” lists within the Reminders app.
  • There are no tags so no way of grouping notes together by tag across various folders and can't search for tags.
  • It is free, easy and simple to use with visual grid layout and it has an eye catching imaging.
  • Users can use search field to search and “pin it” button to pin an item on any website and they can use more option to view similar items.
  • Users can go back to the original website to learn more about the item that they pinned.
  • There is a debate whether photos taken from websites are compliant legal rights of the original owner of that photo.
  • It is considered as a site for women, whereas other sites are more popular with both genders.
See detailed SWOT analysis

Key Takeaways

User Stories and User Flows

According to the key takeaways I documented the user stories and prioritized them as High, Medium and Low. The High priority stories defined MVP (Minimum Viable Product) for Blocbox. Below you can see the high-priority user stories.

I drawed the user flow diagrams based on the defined user stories.

Branding and Style Guide

The hexagon shape created the 3d box impression for Blocbox's concept of collecting and storing items in a box. I picked colors that could communicate the brand as simple, dependable, structured and serious while being friendly, warm, welcoming and trustworthy. The color palette consists of cold and warm tones to compliment each other. My intention was to make sure that everyone felt welcomed to Blocbox while carrying a structured application identity.


I created Blocbox's Low Fidelity wireframes and explored different layout variations in Balsamiq. I updated them with Blocbox's logo, content and fonts that I picked and created the High Fidelity wireframes in Illustrator.

Usability Test Results

I used UserTest.IO and conducted usability tests with 4 users with the first version of the prototype. I asked them to perform a set of tasks. You can see a sample of these tasks below.

See the entire test script

Key Takeaways

Based on the feedback that I gathered during the usability tests I decided to make the following changes in my design.

Design and Navigation
  • Users liked that Blocbox's design was simple and clean, but adding the content section was not grabbing their attention. They said that it could be due to its being in grayscale.
  • They tried to click on items on the left navigation bar and wondered about their purpose of use.
  • Users wanted to be able to utilize search and looked for help options. There was no option to walk them through the tool as a tutorial or as a wizard.
Decisions: There will be a notification message at top when users visit Blocbox's dashboard for the first time to inform them about how they can add content.
Product Purpose
  • Users were confused about the purpose of the product. They thought that there wasn't enough information about how they could use it. They were confused about the term “box.”
  • They thought it might be a cloud storage tool. “It’s easy to navigate around, but what is this product? Is it like Dropbox?”
  • They thought that it might be a data aggregation tool, mark down version of google docs. They suggested integrating it with google docs.
Decisions: Most users captured the purpose of the product correctly. However, it is true that there are many products available with the same purpose of use. The content needs to cover what differentiates Blocbox from its competitors.
Sign In/Sign Up and Account Settings
  • They thought that there were different ways to sign up for the product with all the “Get Started” options.
  • They thought that the signup options were sufficient. Some suggested adding google as a sign in/sign up option.
  • They thought the available options on the account settings were sufficient.
  • About avatar image, they missed the “Edit” link. They wanted to click on the image to update their profile avatar image.
Decisions: The avatar image will be clickable to make it easy for users to update their account profile photo. Google Sign In/Sign Up option will be available.
  • The message bar at top was avoiding users to access the “Add New” dropdown options. It was confusing that they had to close the message in order to click on the Add New button.
  • They suggested making the boxes editable in addition to the edit icon. “Why can’t I click the whole thing to view and edit? I would expect that.”
Decisions: The message bar at top will not require to be closed and it will not avoid users to take an action on Dashboard page. The boxes will be editable.

Home Page and Dashboard

I performed a preference test by placing the "Add New" button next to the search field at top vs. placing it in the body of the Dashboard. The audience thought that either options were acceptable, about 41% preferred the "Add New" button in the body of the site instead of the header. Some thought that it was confusing to see it next to the search field. Since the preference test was not statistically different between them I decided to place it in the body of the site.

See test results

I also performed a dashboard navigation test to see if users could click on the "Add New" button to upload an item on Dashboard easily. About a total 57% of participants completed the step successfully in an average of 4 seconds.
See test results

I performed a 5 second test for Blocbox's homepage to see whether users thought that the brand appeared trustworthy. Majority of them found the site trustworthy and rated it as 4 and 5 out of 5 rating scale.
See test results


Based on the test results and the decided changes I created the mockups in Photoshop by adding Blocbox's colors, logo and images. I conducted usability tests with 3 users with the updated version of the prototype. Below you can see a link to one of the usability test session recordings as a sample and the final mockups.

Session recording

What I Learned

I developed a responsive home page and a dashboard for Blocbox to practice my coding skills. Here is a link to the code in GitHub. As a result of this project, the product purpose was communicated successfully because all users thought that the site was about collecting items similar to the the services that Blocbox's competitors provide. Users thought that the site looked very professional and reliable. They liked the design and the color palette. They said that everything they would want to see was there. They liked the idea of being able to use Blocbox for free without paying upfront and being able to save links compare to the other sites, where they were just allowed to save files. They mentioned that adding more information about the company, its mission statement and employees would have been great.