Building Community at Blue Tree Cafe

Daily UI Challenge #001

Blue Tree Cafe is a small health foods and smoothies shop located in Honolulu. When I visited the cafe last year, I noticed that it’s very neighborhood-y and has established strong relationships with its customers in-store. Working out of Blue Tree for 6 hours on a Sunday and again for 6 hours on a Monday, I saw two different sets of customers.

Shout-out to Todd T. for shooting this image I’m borrowing from Yelp.

People hung out at the cafe on Sunday in groups of 3 or 4. The employees there knew their customers and joked around with them all day. Many customers also brought their children to socialize with one another out on the shaded patio.

On Monday, Blue Tree turned into a grab-and-go. The cafe is located inside of a residential building and most of its morning patrons were regulars getting their morning coffee, juice, or acai bowl. At lunchtime employees faced another rush, this time with more savory food sales.

Although Blue Tree had a strong presence in the Ala Moana neighborhood, I saw an opportunity for it to provide a better way for its customers to connect to the cafe and with one another via its website.

Behold my first Daily UI challenge… designing a sign up page for Blue Tree Cafe for customers to opt in to the Blue Tree community.


Tl;dr version: Back in Brooklyn and without access to customers of Blue Tree Cafe or users of its website, I took on this UI challenge with a UX mindset and tried to create the best UX version of the sign up page possible within my time-box of 2 hours. If you’re up for the details and the process— read on! If not, simply check out the sign up page images and key takeaways below.

I did some initial research on sign up pages. I read this from Digital Telepathy…and also this and this and this and many more others…to understand each element on different sign up pages and why they existed. I also did some analyses on other small coffee and juice brands like Toby’s Estate Coffee, Rawpothecary, and Blue Bottle to look at common practices.

The first iteration I made leaned more towards the “fresh” look. This was a health-centric cafe after all, therefore I chose to use bright colors and a slightly off-white background. I thought of all the fun people were having socializing in the little shop and created a tiled background.

I used the slightly narrow and eclectic Advent Pro type in the main nav and parts of the copy to reflect the holistic feel of the original Blue Tree website without bringing the user back to 1969 Woodstock. To balance out the edginess I also used Calibri to give the center card a warm and soft character.

The red dots on the top right corner of each input field indicates required fields. The optional drop-down starts a conversation with the customer who opts in and helps Blue Tree Cafe identify customer goals, but there is a separate sign up for promotional email to filter out users who don’t actually care for interacting with Blue Tree online. If customers had second thoughts about opting in, the bottom left button directed them back to the homepage.

Although the blue on the card came from the Blue Tree logo, it being the centerpiece gave the entire page an unapproachable feel that was a bit corporate and uninviting.

So I quickly made a second version.

There were very few assets available on the Blue Tree Cafe website itself. I decided to make use of the background image Blue Tree already had on their landing page. The oak brown of the copy and the red bricked wall in the background gave the sign up page some earthiness. The handwritten font also reflects the chalk board menu in the background image.

Key takeaways I learned from my first Daily UI challenge:

  • Know your typefaces. I will get myself better acquainted with fonts so I can choose them in a more efficient manner than scrolling down the list and trying them out one by one.
  • Don’t strive for perfection. This is but a hypothetical exercise, yet I spent a total of 3 hours of on this project although I had intended on giving it only 2. That is 50% overtime! I probably would have spent more time on it had my PS4 not beckoned me with No Man’s Sky. Lesson learned.
  • Less steps is more. Like on-boarding or check-out, it’s easy to lose customers if the process is long. There is an optimal time for every interaction. For instance, in this case it was not the best time to ask customers to opt in to email promotion because they were still unfamiliar with what the community provided.
  • Copy is crucial. It wasn’t until I started writing out the copy that I realized how difficult it was to give the words the correct voice. Serious props to copywriters. How could I entice users to join a community without giving them that creeped out feeling of initiation? How could I also communicate the purpose and benefits of signing up in one or two sentences? It’s definitely a work in progress.

Thanks to those of you who got this far. All feedback is welcomed.