CRATE

This right here is a project from my Bloc.io design apprenticeship.

CRATE

Challenge

Create a SaaS web application that allows people to collect information and store it in a single place. A user of said application should be able to create simple documents, store images, links to websites, and collaborate with others. With so many options for content curation, storage and collaboration on the market today it seems like everyone’s got a favorite app for this or that, but not this and that. Some applications are great for bookmarking content to check out later, but terrible for making a simple grocery list. Some applications are fantastic for grocery lists, but fall short when it comes to saving that recipe from that site you’ll need to reference later on when you’re turning groceries into dinner. Furthermore, what if it’s a dinner party and you need to share the fare planning with some friends? CRATE needed a product that would do all the things without being cumbersome or too complicated for the average target user to even bother with.

Behold the productivity of Stock Photo Guys.

Research

Personally, I just use the Notes app on my iPhone for most the features to be offered by Crate, but then I'm the sort of person who thinks the next best thing is grabbing a marker and using the back of my hand for external cognition. Thus, I needed to find out what people who don't always make sure to grab a sharpie before leaving the house use. If not iNotes (I call it iNotes) then what other tools are they using, why are they using them, how are they using them, and in what context. I needed to know who I'm designing for.

Check Out Survey

Choosing a handful of respondents from the survey, I invoked the power of reciprocity to get more information in exchange for delicious butter cookies.  I can't be sure that anyone has ever said cognitive psychology and baking are separate things, but on this day they would've been proven incorrect. Moving right along, we're starting to get a better idea of what users want (apart from trans fats and sugar) in a product like Crate. We know what they use competing products for, where their pain points are, what features matter to them the most; we have a contextual basis to begin developing heuristics.

Please the exuberantly decorous personas - I'm blaming the sugary treats for this one.

Using the theory of the paradox of choice the primary goal was to reduce the amount of options for the user to the bare minimum necessary to accomplish all of the tasks designated by Crate as fluidly as possible. In order to eliminate redundancies within the program (it was found that if a user is given more than 3 ways to accomplish the same task, they tend to spontaneously combust and are gone forever) random user testing was used to determine succinct placement of elements such as buttons for adding content and basic navigation within the application.

Development

To keep things simple, the application was divided into 2 parts: Personal and Team. They encompass the same types of content, however the Personal area (“Your Crates”) is kept, well, personal, with the option for the user to then push selected pieces of content to the Team (“Team Crates”) section, which is a collaborative environment.  A user could, for example, have a Personal grocery list for an upcoming event they’re hosting, then decide that they’ll need some input from others within their Crate community and publish the list for others to see, comment on, and/or contribute to. Upon logging in, returning users’ main page consists of divided streams of their personal content as well as recent Team activity so it’s obvious that their content is separate from what everyone else can see. I used Balsamiq to flesh out some ideas because we live in the future and wasting paper is dumb.

From the initial ideation I moved on to whipping up some lo-fi screens for usability testing as well as to begin putting some thought into how users would be interacting with the application. In the great battle of side nav vs. top nav, the side nav won the iteration war. In order to accommodate users' need for vertical space it seemed a necessity for minimizing cognitive load via excess scrolling if we're considering that the device context is likely a laptop. We're also assuming here that the target user will be big into sci-fi and therefore find some delight in the Star Trek default profile image - at least in testing. If you're curious, the InVision prototype for this phase is here.

Development

To keep things simple, the application was divided into 2 parts: Personal and Team. They encompass the same types of content, however the Personal area (“Your Crates”) is kept, well, personal, with the option for the user to then push selected pieces of content to the Team (“Team Crates”) section, which is a collaborative environment.  A user could, for example, have a Personal grocery list for an upcoming event they’re hosting, then decide that they’ll need some input from others within their Crate community and publish the list for others to see, comment on, and/or contribute to. Upon logging in, returning users’ main page consists of divided streams of their personal content as well as recent Team activity so it’s obvious that their content is separate from what everyone else can see. I used Balsamiq to flesh out some ideas because we live in the future and wasting paper is dumb.

From the initial ideation I moved on to whipping up some lo-fi screens for usability testing as well as to begin putting some thought into how users would be interacting with the application. In the great battle of side nav vs. top nav, the side nav won the iteration war. In order to accommodate users' need for vertical space it seemed a necessity for minimizing cognitive load via excess scrolling if we're considering that the device context is likely a laptop. We're also assuming here that the target user will be big into sci-fi and therefore find some delight in the Star Trek default profile image - at least in testing. If you're curious, the InVision prototype for this phase is here.

Now we've gotten the basic functionality and usability out of the way, we can start thinking about the look and feel of the application. The color scheme was chosen to be less visually shocking than those of competitors; less contrast and more decorous hues provide a brief respite for those who need a break from screen-tensity. Since Termina was used for the Crate logo it seemed logical to use that for header items for the sake of consistency. Museo Slab was chosen for other text items for readability, scalability, and just the overall blocky feel. A more granular style guide will be made available for the development team.

Takeaways

Looking back on this project, now nearly 2 years in the past, I can see a number of ways in which it could be improved. However, it was my first experience taking a project brief and transforming it into something of substance while taking into consideration the value of designing for a user. Over the course of the project I had to learn and become relatively alright at using a number of different types of tools, from Sketch (which I rarely use now that XD is actually useful) to Balsamiq, InVision, Photoshop (which I'd never used for UI design), UsabilityHub, Github for sharing progress with my mentor, and my old pal Illustrator. Gaining an understanding of Logo & Branding (early sketcherations of Crate logo available upon weird request) provided valuable insights into what drives people to use a product beyond basic functionality, and I'll never not remember pining away over the proper typefaces to use to best suit the application.

CRATE is ramshackle, it's clunky, and it's evidence of what happens when you skip over drilling the principles of Gestalt, but it's right about where I fell in love with design.

TOP