How I built the Red Cup Cafe website

My strategy process

1. "Why you're here"

Here, I utilise my introversion to listen well to their problems, difficulties and frustrations. I try to map them to actual lost revenue or opportunities.

I quantify these problems, in money lost per year.

For example, a very rough estimate of the number of people lost because they didn't want to wait in line was:

• Lost revenue: 100 orders/week x $8/average order cost x 52 weeks = $41,600/year

Now, the numbers are estimates. If the owner knew the number more intimately, and new the actual average order cost was more like $15, then that's about double, or $80,000. I didn't need to know the exact amounts.

I also try to use stats where possible. This one shows simply adding online ordering is worth a lot:

Then, let's calculate for them:

You can change the numbers to match your revenue.

2. "Where you want to be"

Next, we cast the utopia. The goals. The broad picture of where they want to be without much detail.

Without this stage, we're potentially fixing the symptoms, rather than the actual problems. We're also potentially limiting ourselves to a narrow subset of solutions.

Crucially, I uncovered the need to look to what customers are now calling for - using their phones to pre-order. This is more than what the owner envisioned, but would be crucial to overcoming a key problem: people being turned away because of long lines.

3. "What we want to do"

This is where I outline the broad solution.

For this project, I researched and created several user scenarios. This painted the 'before' picture and the 'after'.

I outlined what a website could do for them, as well as the need for an app to pre-order. (This also required a few other needs which I will not detail.)

4. "What risks we'll minimise"

This section outlines some potential problems.

It's helpful to document for the business owner, to know that you know about these pitfalls. It's also helpful for you, to build them into your costs and be accountable for them.

5. "Why we're the best for the project"

This is a pretty standard 'why us' section.

So why me?

I had:

we connect the big picture so you get a return on investment

So I work out their goals so we can focus on them, rather than including every feature or never getting the solution off the ground.

fundamentally better solutions, not just micro improvements

I operate through holistic thinking, as best summarised by Henry Ford:

6. "How we can do this for you"

This is where I put the offer, with features and benefits and the cost with the expected return on investment.

7. "How we can keep each other up to date"

This sets out communication and reporting needs.

What else helped?

In this case, despite agreeing my proposal made sense from a business point of view, it helped that I turned the question around and ask "what would you be willing to spend?".

Having been at an impasse because the proposal was too high, we agreed to a compromise and went from an off-the-shelf template instead of a custom one.

The template setup

Due to the compromise due to a low budget, I had to use a template. I chose the template using the earlier research, summarised to 'unique', 'authentic', 'on trend' and 'an escape'.

But this meant I could install a fully functional Joomla website, with that template, in a few minutes.

Then it was a matter of getting rid of elements not needed, and changing the content.

Lo-fi rapid prototyping

I had an early idea of using a mascot to lighten up the tone of the website, but the client didn't like this. Partly, I think this was because I wasn't able to confidently describe the value that a mascot could bring.

The idea also incorported an element of fun choice: "choose you dog", with the mascot tweaked in various ways for the different types of foods.

I enjoy quickly sketching different layout ideas on paper - it's freedom allows me to match the speed of my brain's creativity. Generally, I've found digital tools can't match paper for the lo-fi stage.

Invariably, only parts of it made it to the hi-fi prototype stage, but that's part of the creative process.

For example, I envisioned customer reviews to be a prime part of the home page. But testing (see below) revealed the pictures were the motivating (mouth-watering).

Hi-fi prototyping

Lo-fi prototyping helped to rapidly discard bad choices. It also helps to reduce the my mental energy (cognitive load), aka a 'brain dump'.

Your brain has limited RAM, it seems.

In Joomla, I needed to make a lot of little CSS changes.

It's easy to edit the CSS via Chrome's inspect tool, change the CSS on-the-fly, then when you get it right, copy that into the css file.

For example, I didn't want users to have to work out what the images were about (by scrolling over it). Why make them think? So I made the text's opacity: initial rather than 0, and added background-color: black for extra clarity.

Graphic design & how I doubled the value

Part of the distinctiveness of the cafe is mixing the old and the new. I wanted some pixel-art as a throwback to the 80's style of games like Minecraft has done so well.

That would easily take 50 hours. 45 of which I did not have.

So I had the thought of producing some isometric art or pixelated icons. A view of the cafe for those booking would be handy, and not just eye candy.

But that would easily take 50 hours. 45 of which I did not have.

I decided to see whether an overseas freelancer (I used Upwork) had the skills and a low cost of living.

This is my sketch I gave them to look at, plus actual photos, and a stock picture with the isometric look I wanted:

Well, I was blown away! I had a large selection of highly skilled graphic artists, within a good pricing point (a few hundred dollars). Easily ten times less than what I could have done it for.

I worked with them closely in parallel to my other work. It only took 5-15 minutes every couple of days for a couple of weeks to manage this.

Offsetting the items on the home page wasn't fitting, so I ended up putting the sketches on the homepage. This also filled in the blank squares, which was handy.

When you look at the final implementation, you'll notice on small screens (which would be 80%+ of the readership) you can zoom into the picture.

The zoom was a technique I learned from Shopify websites, which customers crave (you can't touch or feel products on a website, so any extra detail is helpful).

Easily ten times less than what I could have done it for.

Ultimately, this enabled me to give the client fully twice the value than what they paid for, due to this amazing freelancer from South America.

Qualitative testing

Once I was happy with the basic look and feel of the site, and the content, I wanted some testing.

I realise you want to test your actual customers, or as close as possible. That was going to be expensive. I used Upwork again, knowing I could get 10-20 minute video responses for about $10-$20 each.

I opted for some fairly basic parameters, knowing that the cheaper people would probably be overseas. I asked for those with experience of Australian culture.

In order to cut poor quality responses, I informed applicants they needed to be familiar with the 'UserTesting - Example of a 5 star test' videos (they could search YouTube for those).

I chose several questions that I took from UserTesting and other sites. If you like, you can view the questions now

I was surprised at the depth and quality of the responses I got. It's amazing how close you get and how easily you can rationalise to yourself 'oh that'll be fine'.

The changes we made as a result of the testing:

1. The booking page was basically 'phone us', which wasn't simple. To encourage more function bookings, we added a form.
2. Links to the address/map weren't working for iPhones, so I changed it to http://maps.apple.com/..., which still works on Android (yes, opens in Google Maps).
3. The opening hours were listed at an angle, which gave it a unique look, but were too hard to read. In consultation with the client, I changed it to my other idea, of using night and sun icons to add uniqueness. This also conveys the closing times.
4. Totally changed the menu system, which on mobiles slid out from the side ('offcanvas') but at a grand total of 4 items, was totally unnecessary. Now the menu was four fixed items on the bottom (most users of the site would be on their mobiles, and most mobile users hold their phones on the bottom).
5. A couple of template/CSS-related issues.
6. The Facebook feed was simply unnecessary. A link to the page was all that was needed.

I got positive feedback about a lot of things, of course. For example, the visuals on the home page made people's mouth water, and they like the submenu on the 'menu' page (which uses Bootstrap's scrollspy for the subsections). It made navigation on that long page easy.