Blocbox is a simple, easy-to-use cloud storage platform for saving and sharing notes, images, and links.
See Prototype

Background Story

This is a school project.

We were already given a layout and we were tasked to tweak it according to our own liking- from UX Research all the way through coding its pages via responsive HTML and CSS.

Tasks

User Research

UX/ UI Design
Info Architecture
Branding

User Testing
Front End Development (HTML/CSS/JS)




Tools

Google Forms
Illustrator


Photoshop
Draw.io
Balsamiq
Sketch
Invision
UsabilityHub
Lookback
Atom
Github

Tasks

User Research
Info Arch.
UX/ UI Design
Branding
User Testing
Front End Dev. (HTML/CSS/JS)




Tools

Google Forms
Illustrator
Photoshop
Draw.io
Balsamiq
Sketch
Invision
Usabilityhub
Lookback
Atom
Github

The Challenge

Bombarded with information every minute of our lives, sorting and saving only the ones that actually matter to us has never been more essential. Blocbox aims to help us do just that.

MS Word, SD cards, and bookmarks were the most popular media storage people use. They still have their place. But as people become more agile, and the amount of data we consume keeps getting bigger, we need to create better storage.

Research



Survey Results

The survey mainly revolved around the users current usage of their gadgets, their online browsing behaviors & the motivations for such behaviors.

80%

of the content they browse is social media

50%

Amount of time they use their laptops to browse content online

60%

Likelihood of saving content that interests them

1/2

of the people who save content use the built-in bookmarking feature of their browser or app

80%

of the content they browse is social media

90%

Of the respondents have desk jobs or occupations

1/4

Write and keep notes to remember things for personal reasons

1/2

of the people who save content use the built-in bookmarking feature of their browser or app

I also asked about their backgrounds to see if there is a colleration between their occupation, hobbies, & their online habits.

Tool: Google Forms

See Survey Results Details

User Personas



Katrina

30, Norway
Nurse



Francis

33, USA
IT Business Analyst



Katherine

26, UAE
Document Controller

Their Goals:
  1. Find an easy way to organized all of their online contents.
  2. Seamless access to their files regardless of which device they use.
  3. A sharing option for personal & professional contacts.

Their Frustrations:
  1. The need to use multiple apps & devices for saving content.
  2. Bookmarks and saved files are not accessible in all types of devices.
  3. Figuring out in which app or device they have saved a certain content in.
See Persona Details


Competitive Analysis

I compared 3 big names in the cloud saving and sharing industry namely:

  1. Evernote.
  2. MS OneNote
  3. Box
Each has it’s own unique set of strengths & weaknesses, and opportunities & treats, both as an app & as a business.

I don’t personally used any of these apps, so my competitive analysis data are based on various reviews I found online.

See Full Analysis See Full Documentation

Information Architecture



User Stories

I approached this step imagining how each of my personas would use the app based on their background. Each one had a different priority.

  1. Adding a note
  2. Adding a link
  3. Looking for a photo they previously added

See Full User Stories
See Full User Stories

User Flows

This visualizes the steps a user takes to accomplish each user story.

  • Sign In/Up
  • Change/ Update Account Settings
  • Add an Item
  • View an Item
Tool: Draw.io

See Full Chart
See Full Chart

Lo-Fidelity Wireframes

The design of the individual pages has evolved over time. These are some of the early versions of the design.

Tool: Balsamiq

See Full Resolution

Hi-Fidelity Wireframes

For hi-fidelity mockups, the proportions and hierarchy of elements are more precise.

Tool: Sketch

See All Hi-Fi Wireframes

Branding



Logo

I was aiming for a minimalist and literal translation of the name “bloc” and “box.” Thus, the skeleton cube was chosen for the direct translation and the silhouette of the letter “b” was highlighted to represent “bloc".

Tool: Adobe Illustrator

Color

I want to make the website distinguishable from the blues of MS Word and Box and from the greens of Evernote. while still maintaining the professional and trustworthy look of it. Thus, I went for the middle ground which is teal. And I use complimentary colors to complete the set.

Typography

Aiming for clean lines, picking san serif typefaces came natural. I chose Poppins for the h1 & h2 and Lato for the rest of the text. Both were chosen for their circular geometry which gives a sense of friendliness.

Visual Design



Mockups: Desktop View

The layout, color choices and placement of elements changed as I get more feedback from users. These are some of the mockups.

Tool: Sketch

See Mockup See Mockup

Mockups: Tab & Phone View

One notable change from the laptop view is the usage of a drawer menu.

Testing & Conclusion



Final Test Results

In general, early testers of the site find the design clean and very easy to navigate. It’s intuitive and trustworthy looking. Although there was one flaw that has been consistently brought up by the testers. It was the difficulty of finding the settings button. With the current testing tool that we were using, the bottom 5% of the screen is hidden. Thus, testers needed to scroll down to see the button.

Tool: Lookback, UsabilityHub

See Final Test Results
See Final Test Results

Key Takeaways

In summary, the site was successfully designed. The positive feedback has triumphed over the negative. There were things that could have been improved like the placement of the settings button and possible addition of the trash bin., Although overall, the product was a successful MVP.

If I could do it differently, aside from correcting the flaws said earlier, I would also compare the layout of Blocbox to the layout of other competitors. That might have given me a better idea on the necessary and unnecessary features of a good cloud storage platform. I would also add a footer on every page to make them more cohesive. I will incorporate the add button in the dashboard boxes instead of creating a dedicated box on the top right corner of the screen. Lastly, I will put a search box where the add button is currently at.

Wanna see my other work?

See Filo