BlocBox

BlocBox makes collaboration simple. Whether you are a web designer, fashion expert or photographer, BlocBox provides you with an easy tool to collaborate with classmates, colleagues and customers.


My Design Process

After researching customer needs, taking surveys and running competitive analysis, there were 3 main features the food truck connoisseurs wanted to see; Search, Reviews and Delivery. Taking this information I started with a simple sitemap and user flow.

Sitemap

 

balsamiq mockups

Home Screen - Mockup 1

Home Screen - Mockup 2

Home Screen - Mockup 3

Dashboard Mockup


Brand Identity

With a clear understanding of the user needs and website flow, I looked for a color palette and logo that portrayed two words; cloud and collaboration.


High-Fidelity Designs

With a finalized color scheme, font and logo, I built out the websites most important screens to test.

 

home screen

 

dashboard

 

Account Settings


User Testing

To test the main screens, I ran a few usability tests with a focus on navigation and design with UserTesting.com and UsabilityHub. A few of the results from the Usability Hub tests are shown below as well as the Invision Prototype used for the tests.

Design Preference Test

Heat Map Click Test


Final Designs

With the feedback received in UsabilityHub and UserTesting.com, I created every screen to satisfy the complete user flow and developed the website in CSS/HTML. Below you will find the link to my Github page to click through the final product.