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:
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.
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.
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.)
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.
This is a pretty standard 'why us' section.
So why me?
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:
This is where I put the offer, with features and benefits and the cost with the expected return on investment.
This sets out communication and reporting needs.
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.
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.
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).
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.
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.
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'.
From the personas I put together some user scenarios.
This helped me to see what the whole journey would be like, before sketching them.
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)
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:
These were clearly going to improve the experience much more than a website could.
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:
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.
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.
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).
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.
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.
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:
http://maps.apple.com/..., which still works on Android (yes, opens in Google Maps).
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.
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).
I used Pingdom, GTmetrix, and Chrome's developer tools to work out speed bottlenecks and optimise the site.
Images were optimised using optimizilla.
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 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.
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.