Case Study: Blocbox

Blocbox is a SaaS (Software as a Service) web application where it is solely designed for users to store, upload, download, and create new files, wherever and whenever all in one place. Sharing and collaborating are other features that they have for easy workflow or just sharing and getting each other’s comments, feedbacks, and thoughts through. 

Main Goal

Blocbox wanted more than just a convenient online data storage when they came to me. They wanted to build their app around users. They wanted to make users be able to multi-task as well as create and store files, be able to comment and collaborate with their team all in one place without having the hassle of switching over to another tab, window, or app. They wanted to make sure that their clients gets what they need out of their service with pleasing to the eye design. And this is where I come in, my role as UX and UI Designer, to research, design, and build this app from scratch and to reach both my company’s goals as well as Blocbox’s potential users.

User Research

Conducting a thorough research on our potential users is essential before starting on sketching and designing. Here, the conclusion through Survey Questions show that there are a lot of people who uses online data storage for multi-tasking purposes. With the data results, I interviewed some participants and was able to create User Personas for them. Below are the conclusions that I made to create designs for Blocbox website.

survey-responsespie-chartspersona-vicky-imgpersona-lorraine-imgblocbox_user_personas-3

Sketches

SAMSUNG CAMERA PICTURESSAMSUNG CAMERA PICTURESblocboxsketches1blocboxlogodesignssketchsblocboxlogodesigns_mindmapblocbox_logoiconographics_Page_5blocbox_logoiconographics_Page_4blocbox_logoiconographics_Page_3blocbox_logoiconographics_Page_1blocbox_logodesigns_Page_7blocbox_logodesigns_Page_6blocbox_logodesigns_Page_5blocbox_logodesigns_Page_4blocbox_logodesigns_Page_3blocbox_logodesigns_Page_2blocbox_logodesigns_Page_1

Design Decisions

Printblocbox_typefaces_amyblocbox_sitemap_amytom

 

Wireframes

blocbox_hifiwireframe_upgradeplan
blocbox_hifiwireframe_signuppage_Page_1
blocbox_hifiwireframe_signinpage_error
blocbox_hifiwireframe_signinpage_
blocbox_hifiwireframe_resetpassword
blocbox_hifiwireframe_newusersdashboard
blocbox_hifiwireframe_newusersdashboard_adddropdownmenu
blocbox_hifiwireframe_myaccount
blocbox_hifiwireframe_linkedit
blocbox_hifiwireframe_dashboard
blocbox_hifiwireframe_contenttextedit
blocbox_hifiwireframe_avatarsetting
blocbox_hifiwireframe_addtext
blocbox_hifiwireframe_addlink
blocbox_hifiwireframe_addimage
blocbox_hifiwireframe_add_content_dropdownmenu

Mockups

thumb_blocbox_upgradeplans_selecting_mockup2
thumb_blocbox_upgradeplans_selectednewplan_mockup2
thumb_blocbox_upgradeplans_plantaskdone_mockup2
thumb_blocbox_upgradeplans_mockup2
thumb_blocbox_upgradeplans_errors_mockup2
thumb_blocbox_upgradeplans_errormsg_mockup2
thumb_blocbox_updateinfoaftersignup_mockup
thumb_blocbox_signup_mockup
thumb_blocbox_signin_mockup
thumb_blocbox_resetpassword_mockup
thumb_blocbox_resetpassword_emailsent_mockup
thumb_blocbox_homepage_mockup
thumb_blocbox_dashboardnewusers_mockup
thumb_blocbox_dashboardnewusers_addbuttondropdownmenu_mockup
thumb_blocbox_dashboard_returningusers_mockup
thumb_blocbox_dashboard_returningusers_addmenu_mockup
thumb_blocbox_dashboard_hoverimage_mockup
thumb_blocbox_addnotes_mockup
thumb_blocbox_addnotes_editmenu_mockup
thumb_blocbox_addlink_mockup
thumb_blocbox_addlink_linkadded_mockup
thumb_blocbox_addcontentimage_uploadedmsg_mockup
thumb_blocbox_addcontentimage_progressbar_mockup
thumb_blocbox_addcontentimage_mockup
thumb_blocbox_addcontentimage_completedtask_mockup
thumb_blocbox_accountsettings_savedmsg_mockup2
thumb_blocbox_accountsettings_mockup2
thumb_blocbox_accountsettings_errormsg_mockup2
thumb_blocbox_accountsettings_errors_mockup2
blocbox_upgradeplans_selecting_mockup2
blocbox_upgradeplans_selectednewplan_mockup2
blocbox_upgradeplans_plantaskdone_mockup2
blocbox_signin_mockup
blocbox_signup_mockup
blocbox_updateinfoaftersignup_mockup
blocbox_upgradeplans_errormsg_mockup2
blocbox_upgradeplans_errors_mockup2
blocbox_upgradeplans_mockup2
blocbox_resetpassword_mockup
blocbox_resetpassword_emailsent_mockup
blocbox_dashboardnewusers_mockup
blocbox_dashboardnewusers_addbuttondropdownmenu_mockup
blocbox_dashboard_returningusers_mockup
blocbox_dashboard_returningusers_mockup
blocbox_dashboard_hoverimage_mockup
blocbox_dashboard_returningusers_addmenu_mockup
blocbox_addnotes_mockup
blocbox_addnotes_editmenu_mockup
blocbox_addlink_mockup
blocbox_accountsettings_savedmsg_mockup2
blocbox_addcontentimage_completedtask_mockup
blocbox_addcontentimage_mockup
blocbox_addcontentimage_progressbar_mockup
blocbox_addcontentimage_uploadedmsg_mockup
blocbox_addlink_linkadded_mockup
blocbox_accountsettings_mockup2
blocbox_accountsettings_errors_mockup2
blocbox_accountsettings_errormsg_mockup2

 

Usability Testing

With in-person and remote testings, from hi-fi wireframes to prototype mockups, users find completing tasks intuitive and easy to use. The use of color is something that was bothering them the most due to bright colors which had portrayed childish, Lego-like theme. Testings ranged from navigation flows, preference test, clicking test, to five-seconds test to understand users for Blocbox and how they would navigate; what went well and what did not.

The results were surprising. Video usability testings where I was not in-person to assist them, they remain confused throughout the time. There were no clear instructions for them. However, they were able to finish the required tasks that I want them to do: signing up, adding content, and changing their account settings. Afterwards, they show that the dashboard was a success because they were easily going to what they want to do without my instructions as well as finding where things are very easily.

Conclusion

So, the design process worked well but I did tweaked a bit here and there before and after usability testings. I found usability testings very useful in a sense that I understand what is working and what is not working for users…and for clients end, it is crucial or their users and potential users will stop using their site.

The layout of the design for each page worked very well. The buttons were at the right place and the functionality was intuitive to the point that it was simple and easy to navigate throughout the tasks. The users of my usability testings had no trouble finishing a single task.

There some minor adjustments that I need to make. The search bar from the dashboard content area need to be longer and centered more. I had trouble with my CSS coding skills and it is likely to be difficult to know if it worked on all monitors since each monitor will likely to display differently. I am continuing to learn as I grow deeper into UX UI Design and Front End Development. This project taught me that it is okay to fail and not know everything and that we can continue to improve.