Client: BeeBack LLC.
Website: BeeBack.io
My Role: Design, Management, UX

The future of retail through augmented reality

BeeBack is a combination of two products; a rewards + discovery mobile app, and a web tool for merchants. Our immersive app allows users to discover and redeem rewards through an interactive experience. Wondering what cafe to check out around you? Use our unique AR experience to find one, and then start the process of collecting virtual stamps on your rewards card!

Who it's for

Small-to-medium sized business and any users who wants to collect rewards for shopping.

BeeBack was designed to give merchants a fighting chance against big corporations. Without the deep resources larger corporations have, small to medium sized businesses find themselves working extra hard to generate revenue and make a profit. BeeBack's merchant portal was designed to help ease some of those struggles.

On the merchant side

  • Any small-to-medium sized business
  • Anyone wanting to add rewards for their business
  • Anyone wanting to track customer engagement

On the user side

  • Anyone who wants to earn rewards
  • Anyone who wants to experience augmented reality
  • Anyone who wants to engage in friendly competition

Crafting the identity

Everything from ground up.

The initial target group for BeeBack was younger audiences in the multi-cultural neighborhoods who prefer to sit in cafe's and meet with friends or finish their work. The branding reflected the target group when our research showed our target group in the targeted locations preferred a mascot-like figure. With the brand name including the word bee, we focused our energy on making a cute insect.

We played around with a few ideas:

bee drawings

But ultimately, we were unhappy with the mascot not being part of the logo as well. When we looked at a concept with a bee with it's wings spread out, we realized it looks like the letter B. We figured we use the bee to form the first letter of BeeBack.

bee drawings
Note - rotate the bee logo 45o to the left and you should see a heart on top of an infinity symbol. It speaks "Love Infinitely," a phrase we use for all struggling merchants. We understand the struggles SMBs go through, and we're here to help!

Crafting the social presence

Social media is the best source of marketing.

When we publicly announced our company, our goals and our logo, we gained a lot of attraction through social media platforms such as Facebook and Instagram. After seeing such success there and to target a specific group of audience in a targeted location, we focusing our energy in social media marketing. I was tasked with coming up with simple promotional content for our pages. This included banners, avatars and advertisements.

bee drawings

We tried a few different concepts, but ultimately, our social presence changed with time, the upcoming holidays and events that we partook in.

Crafting the style guide

Building a consistent product.

BeeBack is a complex product. It is both a business-to-business (b2b) and business-to-clients product. We couldn't build two separate website for each group. Instead we opted in to make one promotional landing page that catered to both groups. To be successful, we had to make sure our website was accessible for app downloads, while at the same time, we had to make sure it was informative enough to entice business owners to purchase our service. Furthermore, this website had to communicate and carry similar look and feel of both the mobile app and the merchant portal.

This meant, we had to make sure we started with a good style guide where our colors, fonts, and overall company identity was present.

Crafting the promotional website

A product with two audiences.

BeeBack provides service to both businesses and users. But at the core, we are a replacement for rewards cards. We wanted our promotional website to reflect that while providing information for both audiences. After some careful research, we opted into creating a block based interface where the sections were divided into cards.

The card system helped us stay organized, where the block based system helped us load content on multiple pages without having to re-write the code. We started off by creating a list of cards we would need to create based on what content we wanted to show. From this, we went onto creating wireframes for each of the card. This allowed us to drag, drop and stack different cards to see a wireframe of a page. Furthermore, it helped us visually see the flow on Sketch.

bee drawings

We still had to decide how we would like to display each cards. Options ranged from being attached, divided and stacked. Although all three options provided beautiful solution, our research showed us the path.

  • A. Attached
    • Pro: Great option for showing content quickly.
    • Con: Spacing may not be the best to show content for two different audiences as it will make the user feel they're related.
  • B. Divided
    • Pro: Great for showing content without content getting mixed with prior.
    • Con: Longer page.
  • C. Stacked
    • Pro: Best option for showing content for multiple audiences. Creates a better and simpler UI. More design flexibility.
    • Con: Requires too much work for the user to get to their content.

Ultimately, we decided to go with option B with divided content. This was the compromise of the two other options available. Option B allowed us to display the information we wanted without causing confusion on who we were targeting.

Crafting the merchant portal

Catering to the merchants.

Aside from providing a simple solution to punch cards, we also wanted to help out the small to medium sized business owners we worked closely with. Majority of these merchants ran their business blindly, not knowing how many customers were interacting with their existing loyalty program (getting cards and redeeming drinks). Furthermore, they were unable to keep in contact with their users once they left their store.

Our goal with the merchant portal was to provide analytics on loyalty interaction by telling the merchants how many customers came into the store, how many sales they had and how many redeemed a reward. Furthermore, we provided a means of communication for the merchant to the customer. This direct messaging service allowed the merchants to send over special offers to those who signed up to be notified.

Crafting the mobile AR app

The socially augmented world of BeeBack.

Users are smart. They need something more than just a simple an app that allows you to redeem. We wanted our users to want to come back to the location. We wanted them to compete with their friends to see who received the most rewards. We wanted to increase the merchants business

Creating an app with such ideals was tricky. As a team, we wanted to create an interactive and social platform. We wanted the users to immerse them selves into our world of BeeBack. That is why we created the social augmented reality experience within BeeBack.

BeeBack is the Pokemon Go equivalent to loyalty. If its a rainy day and no customers, merchants can set up an AR event in their location to have users come in.

- Jas Gill, CEO, BeeBack