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.

Sketches

Design Decisions

 

Wireframes

Mockups

 

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.