YouBeHero

The video above was shot in May of 2018 in Athens. It took us a day to shoot the whole thing however its preparation took almost two months.

I wrote the script on which the final result was based, I did the graphics and partly the editing.

Finally, I was in charge of the entire production. Lights, cameras, some of the props and making sure everybody was there on time fully prepared for their parts.

In total 17 people worked together and contributed in some way. It was fun indeed, but it was also a bit tiring.

The reason behind the video, is simply because the concept of the website is a bit hard to explain to some people.

I think it clears up the picture and makes the product more understandable.

The mockups

Once I had put all my thoughts onto paper, the time came to prepare the mockups.

It was then that the question rose: which tool should I use for the initial mockups?

After a brief research, it was clear that Balsamiq was the best. It has a small learning curve and it serves its purpose well.

I wanted to make sure as much as I could that I had thought of everything before actually going into coding.

This version of YouBeHero isn't where everything begun. There are at least 4 versions which I'd started without thinking about it too much.

So basically it was all the accumulated knowledge from those versions that lead me in creating all the pages as mockups first.

So that's what I did. I went ahead and created the page where everything would start: the homepage. User dashboard, charity page and eshop's page followed.

Once I created all the front-end and the back-end (admin) pages I moved on to Sketch.

Since Sketch is only available for mac, I wasn't able to install it on my Windows PC.

...Or was I?

I do have a Macbook Air though for the creation of the mockups of an entire webapp such as this, I assumed that it'd be a bit slow to work on Air.

What I did instead, was to install VMWare on my Windows PC, install MacOS and then Sketch. This way I had a powerful MacOS workstation right in my Windows PC. Problem solved!

You may check out all the sketch mockups on invision → https://invis.io/3MNYR2UZRF4 . Navigate the pages using the keyboard arrows (left + right).

Coming to an end with Sketch, it was time to get crackin' with the code.

For the previous versions I had used Materialize CSS framework. It's a nice framework that imitates Google's popular design style very successfully. I really liked it at the time.

For this version however, I was lucky. The new Bootstrap version (4) had just been passed from its pre-alpha phase, to proper relase.

I didn't think about it twice. It was an easy call - I love it.

Logo design

Designing a logo that has both meaning and is high on aesthetics, is always a tough job.

How does one start to design a logo? What is that makes a logo look awesome? Is it the logo that makes a product great? Or vice versa?

I knew from my experience that it was hard to design a logo. What I didn't know was that it's even harder when the logo is for something you personally own.

After spending endless hours working on the logo, I stopped.

It's impossible to create something that I really fancy without spending weeks working on it. I chose to go ahead with other things around the project than spend more time on something that can be done in the future.

Chrome / Firefox plugin

Moving on further with the project, I started working on the plugin (some people call it extension too).

It's a rather simple (and not simplistic) addon made with JS that has three main purposes:

a) It notifies the user when an eshop she has visited offers the ability to donate

b) It shows right over the Google search results if the site offers the ability to donate

c) Displays offers and discounts the visited eshop has but may not be easily visible

To download the plugin and see it in action, go to https://www.youbehero.com/gr/plugin

When the user activates the donation, she's redirected to the same page she was, but this time with an additional parameter in the URL.

If the user isn't registered but has downloaded the plugin, then the donation goes to the charity of the month.

The user sees right there and then if the eshop is affiliated with YouBeHero so as to donate an amount.

Charities

Currently there are 18 charity organizations supported by YouBeHero and its users.

Soon enough, each one of them will have their own promotional video to spread far and wide.

Below is an example of what I mean, created by yours truly. Do check it out!

Gamification

A large part of the app will be revolved around gamification.

To gamify something, means to add certain amount of gaming elements to it so that it becomes fun for the users to engage with it.

In this case the user will be able to collect points, badges, achievements and heroes.

Each hero (people like Dalai Lama, Nelson Mandela, Gandhi, Hippocrates, Melina Mercouri etc) will have specific badges with specific quotes that will nurture the user in the path of heroism.

How does that sound to you ? Check out below an example of what I mean.

I believe that the next generation of businesses shares responsibility and benefits with individuals and communities. They create new markets and fundamentally change the relationship between their business and their audience.

Businesses that are accountable to customers have greater capacity for innovation. When they’re able to listen and adapt, companies remain relevant and sustain long-term success.

Purpose motivates companies and customers alike. It’s the driving idea within every organization, team, and employee that makes change possible.

All of the above is what this project represents. Purpose, social responsibility and a more humane relationship between audiences, companies and charities.

Please register today and start your heroic journey with your next online purchase.

Team

Backend developer - Alexandros Sikamiotis

Media × Charity management - Eirini Damianaki

Development × E-shops management - Antonis Grekis

Badges design - Sander Giesing (grand master designer)

Character design - Artemis Katsampani

View all - YouBeHero team