How I built the Red Cup Cafe website

Negotiation

How the project started

I approached the client having worked with him before and he was happy to start a redesign.

"I need a website" is the common request, but that results in poor websites.

If I missed the strategic stage, the client would have missed out on several 5-6 figure opportunities.

Hat tip to Brennan Dunn, author of "Double Your Freelancing Rate" for this planning process.

Screenshot from redcup.com.au
Built using Joomla, the owner wanted a unique and authentic look

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:

eCommerce trends in Australia from 2012-2016, indicating eCommerce made up 7% of all retail sales in Australia in 2016
7% of all retail sales were online in 2016

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:

If I had asked people what they wanted, they would have said: faster horses - Henry Ford
In other words, you need think outside the box. People wanted to get places faster, but they couldn't see past their current systems.

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.

User Experience Planning

Much of the planning was done during the negotiation phase. You can't decide on a plan before understanding what the customers actually want, after all.

From a UX perspective, I built user personas, gathered customer feedback, considered a few user scenarios, built journey maps for these, and uncovered as many opportunities as possible.

From a wider view, I also enquired about his other systems such as POS, marketing and general processes. That was helpful for thinking through integration needs or possible scope/requirements deficiencies.

Stuff.

The target audience

Of course, every business wants to cater to 'everyone'. But I drew a mind map to first build a large list of possible 'drawing cards' for this cafe.

Broadly speaking, gurus break a target audience down into two main categories: demographics (age, location, income-level, and so on), and psychographics (interests, behaviours, and so on).

Some of the psychographic data I put together - cosy, highly sensory, strong visuals, my go-to-place for relaxing. This is in a mind map
This is some of the psychographic data I pulled from customer reviews, the owner, and other research.

Apart from demographics, I also did section on 'target audience by time'. This was because the cafe had a considerable time range from early morning right through to late night.

Some of the demographic data I put together from different time bands - lunch, dinner and friday nights
The different audiences by time included morning, breakfast, lunch, dinner, friday night (live music), weekends and morning/afternoon.

User personas

From this information I was able to build a rough set of user personas.

The following is demographic and psychographic details of 'Eric the electrician', one of our five personas.

Persona information about a local electrician
This was created using Xtensio

This shows 'Eric the electrician', while others were: 'Amy the asian' (a high percentage of Box Hill is Asian), 'Susie the student' (multiple schools nearby), 'Bill the businessman', 'Barbie the young adult'.

User Scenarios / Customer Journeys

From the personas I put together some user scenarios.

An example of a user scenario with the old and the new, with the solution in place.
This scenario depended on the full solution, not just the website (the only part done to date)

This helped me to see what the whole journey would be like, before sketching them.

One of my customer journey maps showing the range of emotions for an optimum experience and a poor one
Two businesswomen decide to go to the cafe, and this maps an optimum and a poor experience, and the opportunities therein
One of my customer journey maps showing the range of emotions for an optimum experience and a poor one of students on a hot day
A group of students go to the cafe after school. The red line shows an optimum experience, and the green a poor experience.

For the purpose of learning, I made this into a digital map using UXPressia afterwards. I found, as expected, the diagram wasn't as flexible. It also wasn't as visual. But it was a lot clearer!

(Click the image to show in full)

A customer journey map using UXPressia
UXPressia didn't box me in too much, but nothing is as flexible as paper. For example, I couldn't show the potential gains from doing a certain opportunity.

The purpose of this exercise is to uncover the full range of touchpoints, emotions, and customer experiences surrounding the product.

I gained a better appreciation around the following questions: why do they get coffee? What do they want out of it? Is speed important? Is the taste important? What is important?

The importance and convenience of an app seriously came to the forefront through this, amongst other things the cafe could do internally.

With an app, I discovered you could:

  • Deliver on speed for those in a rush
  • Relax with friends for longer
  • Reduce staff time (customers can order & pay themselves)
  • Increase satisfaction for customers who feel more in control of their order
  • Increase repeat customers (push notifications; a quick 'repeat' order button)

These were clearly going to improve the experience much more than a website could.

Solution finding

Now, with a far better understanding of the whole picture, I could come up with a creative solution.

A website wasn't what customers were really going to benefit from: some kind of preordering app would be necessary.

However, this app would have to integrate with their POS (the money machine at the counter & EFTPOS), which was too old. A new POS was necessary.

As this hasn't been implemented yet, I can't give too many details!

Here's my process, though:

  1. Gather needs from: all relevant people at the business; technical environment; types of customers; probable future requirements; and so on
  2. Research the available systems
  3. Analyse key options, not going further if they don't meet critical needs
  4. Rate key options' features, if necessary, to pick one from multiple options

Prototyping

The quick draft version

As we had a very tight budget, I did the prototyping in the CMS I would use in the live site, Joomla.

At the same time, I commissioned a graphical piece that doubled the value of the site (more on that later).

Joomla was chosen over WordPress for it's better structure, better security, and depth of knowledge with available human resources.

WordPress can deliver a better experience from its ease of use, but the client was not needing to update the site much. As to the front-end, people often relate to me: 'wow this looks like a WordPress site!'.

But while Joomla's limitations with ease of use can be overcome, WordPress can't easily overcome its security and structural issues.

I gave a link to the hi-fi prototype to some testers for qualititative review.

The chosen template, JA Mono, by JoomlArt
The chosen template, my starting point.

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.

An early drawing of a dog as a mascot
An early drawing of a dog as a mascot

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.

Quick sketches of home page and other page layouts
Quick sketches of home page and other page layouts

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.

The new title shows all the time, and has a black background to show the white with high contrast
The new title shows all the time, and has a black background for 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:

A pencil sketch of an inside cutaway of the cafe
A quick sketch for the freelancer, given together with photos

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.

A complete isometric cutaway of the inside of the cafe
The final inside drawing

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,

  1. Having spent perhaps 5-10 seconds only on the site, what are your first impressions - would you go there?
  2. What, if anything, helps this company stand out from its competitors? Explain your answer.
  3. Go to the menu and choose what you would like to have. Explain your choice.
  4. Who do you think would be interested in this cafe - the sorts of people (target audience)?
  5. You want to find some reviews about the place. Look some up and talk about how that influences your decision.
  6. You've decided you want to go, now see if you can find your way there from your home/business at 2 Selwyn St, Blackburn VIC 3130 (or if you've chosen 'student' -- school: Box Hill High School, 1180 Whitehorse Rd, Box Hill VIC 3128)
  7. You forgot to check the opening times. It's now 4pm on a Tuesday: do you have time to go there?
  8. What frustrations did you have about the website?
  9. If you could add or remove anything, what would you do to improve the site?
  10. What was nice about the site, did anything put a smile on your face?
  11. How likely would you go there?
    • 0 Not at all likely
    • 1 Unlikely
    • 2 Possibly
    • 3 Likely
    • 4 Highly likely

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.

Finalising

Optimising, securing, making final changes.

At this stage I bedded down on details.

Given this was on a fully-fledged CMS, attention to reducing speed was a huge need.

Security issues were standard Joomla-specific steps, so I won't detail them here.

Responsive work was incredibly important given probably 80% of people would be viewing from their mobiles. Obviously, a mobile-first approach would be needed (partly this is building for mobiles, then adding features for larger screens, so those on their phones don't have to download large files).

Speed optimising results at a point in time
Speed test results by GTmetrix at a point in time.

Speed Optimising

I used Pingdom, GTmetrix, and Chrome's developer tools to work out speed bottlenecks and optimise the site.

Images were optimised using optimizilla.

Javascript was inserted only on the relevant pages, and deferred if possible. I learned about what defer and async actually mean:

The difference between normal execution of JavaScript, deferred and asynchronous execution
The difference between normal execution of JavaScript, deferred and asynchronous execution

Other work included ETags, setup of a Content Delivery Network, Caching, GZipping, minifying/uglifying and combining CSS & JavaScript, amongst other things.

Responsive Optimising

The menus had to be extensively tested and tweaked for different screen sizes.

Out-of-the-box, the template only provided for an off-canvas menu for mobile. This is misplaced for the hand, which is usually situated at the bottom of the phone. It's also an extra (unnecessary) step to tap on the 'hamburger' lines (is that really a known 'convention' by the audience?) and then one of the 4 options.

The buttons now bunch up tighter on small screens, and also change position to the left on when the phone is turned sideways.

The menu is on the bottom when the mobile is vertical, and on the left when viewed horizontally
The menu is on the bottom when the mobile is vertical, and on the left when viewed horizontally

The sub-navigation on the menu page also had to bunch up on smaller screens.

I brought in an abbreviation, and rotated the text to make it fit nicely on smaller screens. It kept going to 2 lines so I ended up using the abbreviation on all except the largest screens.

Unfortunately, it seems there is a limit with CSS in that items rotated keep the width of the un-rotated element. I had to change the styling to get rid of the background-color for this reason.

Live!

We were very pleased with this site, and it was a pleasure working with the client.

If you haven't already, do view it and go there! www.redcup.com.au.