How to design a pretty website from scratch

Episode 9: 16/06/2018

?

The work goal for 2018 is to give the El Toco search engine a website. It’s about a year and a half old by this point. It should probably have a website.

?

You might be wondering what on earth I’ve been doing during all that time, if it doesn’t have a website. The official answer is that a search engine is a simple website, slapped on a complicated back end, and I’ve been doing the back end first.

?

The unofficial answer is that I don’t have a clue what I’m doing. So, arriving at each job, I first have to teach myself how to do it, before actually doing the work. As we shall see in coming entries, nowhere do I have less of a clue than when designing the website.

?

The other unofficial answer is that every time I try to work in Medellín, some god with a very sadistic sense of humour decides it's time for me to go off on an adventure across the city. I zoom around, photocopying and signing meaningless sheets of paper, in order to satisfy box ticking exercises that I wouldn't have had to do, had I stayed in merry England.

Yup, this episode contains some more therapeutic writing. But let’s talk about the website first. It’s ultimately far more important.

Which comes first, the chicken or the brand?

Crocodiles are ambush predators. They do not actively go around chasing fish. When fishing, a crocodile sets up shop, opens its mouth, and waits.

?

Dolphins are pursuit predators. If you are a small fish, the sight of Flipper zooming towards you, clicking happily, is more terrifying than if it were a great white shark.

?

Both of these are valid ways for predators to catch food. Ambush predators are not better or worse than pursuit predators, they’re just different. In the business world, they are analogous to launch strategies.

?

In 2018, Grace Beverley is an undergraduate music student at the University of Oxford. She publishes videos on YouTube about student life, cooking on a budget, and so on, and also about gym routines, which is how I came across her. In future years, having built up a brand on social media, she will then launch a small range of exercise equipment, followed by a label of gym clothes.

?

This business strategy is equivalent to ambush predation. You create your brand first, then use it to make money out of the fish which come your way.

?

With El Toco, I’ve chosen the pursuit predator strategy. The technology needed for a search engine with filters doesn’t exist yet. We have to create it. I want to be sure I can do that before going and creating a big song and dance in public, in case it turns out to be literally impossible for some ghastly technical reason.

?

Having the product first feels safer, but I will learn in a few years’ time that it makes fundraising significantly harder. Grace Beverley’s seed round for her clothing label will raise over ￡5 million in 2021. When you’ve been through fundraising yourself, such figures have a bit more meaning – that’s an absolutely vast sum for a seed round, especially for a clothing label, which needs few if any capital assets. In 2022, El Toco’s seed round will ask for ￡3.8 million in order to roll out its search platform globally, a significantly more ambitious goal. But, as an unknown brand from an anonymous founder, we will get nothing like that figure. This has various implications, which we will explore later in this series...

?

Anyway, long way of saying I didn't want to do any of the branding work until I was sure that the technology would work.

Following 2017’s efforts, that’s a done deal, so now I can do the website. This is well over a year later than in my original business plan. Which is, frankly, terrifying. As I’m starting to realise, such delays are a standard part of startup life.

?

Logo design was quick and painless. For a few days, the dining table was covered in pictures of toucans in unflattering angles, trying to work out the best arrangement for the logo. Then my good friend Nikki Trailor suggested sitting the bird on top of the words, and El Toco's logo was born.

?

We're bringing detail back

With the logo done, the website is next.

?

Modern web design is quite codified and centres on what economists call the consumer and what web designers call the user. Who is the user, what is their goal, and how does your product help them achieve this.

?

For most startups, this is obvious. If you’re making nursing pillows or meat cleavers, you don’t have to spend too long brainstorming your user.

?

For a search engine, it’s virtually impossible. The user is every Tom, Dick, and Henrietta using the internet. Yes, you can probably figure out who are the early adopters. But this is the first website I’ve ever designed, and it’s too much of a leap to get from that insight to ideas on how things should be laid out on the page.

?

One thing is clear, which is that the results page is the heart of a search website. Everything revolves around how we get our results page to differ from Google’s.

?

?

The trick with El Toco's search results is that we have a lot more information on each result than Google provides. For example we tell you a page is about tennis, that it is a shopping page, and that it comes from Germany. This means you don't have to open each website, find it's useless, and return to the search results page to try again. This, however, creates a design challenge, which is that our results contain a lot more information than people are used to. People do not like a deluge of information because it requires too much cognitive effort to digest.

I spent a lot of time working out how to condense the labels we give our search results into something which is still easy to digest. Online shops have the same problem with their search results, and are experts at condensing it into the most concise format possible.

Although many details will change, the wireframe layout I came up with for the results page on mobile devices is the one we will use forever afterwards. The design of the desktop version will be have a more meandering story.

?

After the wireframes comes the fun bit, which is the colouring in.

?

A lot of software during the dot com boom tried to emulate real life objects, the idea being this would make it feel more intuitive for users. Actually it just felt clunky and that design style, skeumorphism, dated pretty fast. Now, in 2018, things have been repeatedly abstracted, simplified and cut back, and we’re in the thick of what they’re calling flat design.

I dislike flat design. Rows of abstract icons are boring. My brain finds it harder to understand things when they’re all laid out in a very limited colour palette. In an attempt to look past flat design, I’ve been adding detail back in again. These are my ideas for our results page:

?

?

There is a big flaw in all my designs. They are too noisy, which makes them tough to use. But I will be proven correct by calling the end of flat design. In a few years, everybody will be getting rid of it, see Windows 11 for example. So, while not knowing literally the first thing about graphic design, and while working on my first ever website project, I have, by either blind luck or judgement, managed to predict the rough direction of user interfaces for the coming years.

Unfortunately, this will not stop the alpha testers from saying that our website visually sucks, because it's too noisy. We will talk about their feedback in the next episode.

Our first contractor

Around this time I was introduced to Ana Restrepo . By amazing coincidence, she had recently finished a Masters in Fine Arts at the University of Northampton, just down the road from where I grew up. I can’t really exaggerate how small the world feels, when you’re sitting in a café in the balmy heat of Medellín talking about Kettering, Corby, and the surrounding area.

?

Ana’s specialism is very detailed and realistic illustration. This was perfect for what I had in mind with the website. She became El Toco's first contractor.

?

At the top of each page on our website, the plan is to have a nice banner illustration to make things look pretty. Then the rest of the content will be very functional, to balance it out.

?

With my wireframes cutely laid out in Microsoft Word, the only tool I have, and Ana’s illustrations rolling off the production line, I settled down to program the website in mid March 2018.

Then I stopped, because I suddenly had to move house. The time had finally come for the next round of immigration-related drama.

?

The visa of doom

?

While designing the website in my temporary apartment, all day, every day, the feeling of dread was a constant companion. Not just because of how far behind the business plan I was. The apartment’s owner would return from sabbatical in a few months, by which time I needed to have moved out. They would not be happy to find me spread all over their living room, pretending to be a web designer. In order to move anywhere, however, I first had to renew my business visa.

?

We started the visa renewal in January, with four months to sort it out. Trouble began immediately. The criteria had changed, meaning the visa agency could only guesstimate which documents we needed to support the application.

It is never a good sign when the people you’re paying to handle the application don’t know what to do. But it was not their fault because, like governments everywhere, the Colombian government is very good at setting a policy direction, but less good on the details needed to deliver it. This will already be starting to sound familiar to people who have read story of the first visa, where the policymakers had clearly not ironed out all the kinks.

?

Most of the guesstimated list of documents came from my accountant, a friend of a friend who had kindly offered to help. Unfortunately, he was studying some sort of Master’s degree in his spare time, bringing up a young child, and divorcing his wife. There was at least one trip to Dubai in there somewhere as well.

?

Under no obligation to provide the documents by any specific date, he ignored my increasingly desperate pleas for help. For almost two months I was trapped, unable to move house or apply for the visa, and absolutely desperate to do both. I left messages, the visa agency left messages, I even visited his actual house, all to no avail.

?

It became clear that I wasn’t going to get the visa before I needed to move out. I made evasive manoeuvres into an Airbnb. Despite its haughty approach to customer service, Airbnb, with its no-questions-asked attitude to renting, definitely came to the rescue.

Interlude: The Airbnb

?

Each time I move house in Colombia it seems to reach a new low. The only Airbnb which I could reasonably afford was a small studio apartment. Everything I owned, except my computer and clothes, now joined my furniture in the storage warehouse.

?

There was nothing enormously wrong with the Airbnb, but I did not emigrate to the other side of the world in order to find myself homeless and resorting to tourist accommodation. It was not a great day to be me. The mood was further dampened by the host’s decision to decorate everything in chocolate brown.

?

The sofa was chocolate brown. Within its two rooms, all the other furniture was also chocolate brown. As were the floor tiles and even the skirting boards, weirdly. The overall effect was a throwback to a British post-war living room, such as you might see in the Imperial War Museum. The only thing missing was a crackly radio playing big band jazz numbers.

?

The one ray of sunshine was the family of scarlet macaws. The apartment’s tiny balcony looked onto a small patch of grass overshadowed by huge trees and for some reason the macaws loved it. They are very noisy animals when they get going, rather like their human compatriots. Many times, I was reading on the balcony, just so that I could look at something which wasn’t chocolate brown, and mother nature would answer my prayers. Not by delivering a visa, but by sending down a pair of scarlet macaws, squawking away at maximum volume into each others’ ears. They didn’t care about visas, or photocopying. It was a welcome reminder that, in the scheme of things, my troubles were unimportant.

End interlude

I’d been in the Airbnb for a week when we finally got the wretched documents from the wretched accountant and applied for the visa. Just like the previous year, it had taken months to get to this unimpressive milestone, leaving only four weeks left before my visa expired.

?

As before, at the end of those four weeks, life drops off a cliff. I’d be forced to leave the country on a hastily arranged flight to goodness knows where. All my personal possessions would remain in the warehouse in Medellín, and I’d have to find some way of extricating them from abroad. It would be expensive, time consuming, and contribute nothing to El Toco. A situation to be desperately avoided.

?

The Colombian immigration ministry responded promptly, demanding two surprise documents. If not delivered within four days, my application would be binned.

?

The first document was the sort of first class, unadulterated government stupidity which is impossible to believe until it happens to you first hand. We needed to include a letter, signed by me, asking for the visa. Yes, that’s right. My visa application was being rejected because it didn’t include a letter, asking for the visa.

??

The second document was an uptodate certificate for El Toco from the chamber of commerce, confirming that the company still exists. This was understandable, because all companies have to renew this every year, indeed we have the exact same process in the UK. I had a crisis management meeting with my long suffering lawyer, who confirmed that this certificate could have been produced months in advance, had anybody asked, but it was laughably implausible to do it within four working days.

?

This didn’t stop us from trying. I will spare you the blow-by-blow account but, yet again, you can imagine me sweatily running around the city, fetching other documents, photocopying and fingerpainting them, only to be told that those were the wrong documents, or that they were printed out on the wrong colour paper. By which time, we had missed the four days, and the visa application was rejected.

?

There were moments during those weeks when I’m quite sure Maria Elisa at the visa agency and Catalina my lawyer shook their heads at disbelief as the situation continued to unfold without any of us being in control. It wasn’t their fault. Like the employees of the banks, the people working in the chamber of commerce clearly don’t understand their own processes, often giving completely contradictory instructions depending on who you asked. Nobody outside can be blamed for not understanding it either.

?

But when the visa application was rejected, with ten days left before my visa expired, the person having the darkest of dark days was me.

?

I sat alone, in the gloom of the chocolate-covered Airbnb, with my head in my hands.

How had it come to this? You know launching a startup you will face challenges. But at least those challenges are generally connected with the startup itself. In this case, the almost intolerable stress is coming from things which have got essentially nothing to do with the business at all. Given that the odds are against a startup anyway, diverting so much energy to these tasks makes failure guaranteed. All this effort, just to stay in the country, simply isn’t worth it.

Calm after the storm

Then, in an instant, the skies cleared. We got the certificate we needed, paid the ￡30 fee to reapply and the visa was approved the next day.

?

I swung into action, viewing apartments with an unmatched energy, desperate to escape from the expensive Airbnb.

?

The one viewing I will never forget from this time was an apartment in the most beautiful landscaped gardens I have ever seen in a private dwelling. There were brilliant flowers, shady palm trees, perfectly trimmed lawns, it was like going on a tour of a botanic garden. As we entered the cool of the apartment, the agent casually mentioned that it had been vacant for a while because of some problems with the structure of the building.

Nothing prepared me for what we saw: a gigantic crack ran diagonally across the living room wall, about 2 centimetres in width, as if Zeus had decided to yank the building apart like a loaf of bread. Despite a very tough bedrock, Medellín has a perennial problem with subsistence and there had been several high profile cases of tower blocks having to be evacuated because of bad foundations. There was a genuine risk of going to bed one night and never waking up.

?

I ended up taking a lovely apartment literally behind the Airbnb. It is on a high floor, making it light without receiving the direct sun, something you learn to avoid when living on the equator. The generous living room has a really shiny floor which is perfect for practicing salsa. Moving house involved two five minute trips on foot, one with my suitcase, the other with my computer. My furniture was extricated from the storage warehouse and, with no time to lose, I settled down to program the website.

?

Actually programming the website has been much slower than expected. This is partly because Colombia has been doing well in the world cup, so I am frequently shocked out of my skin as all the roads and neighbouring apartments erupt in manic celebration every time a goal is scored. The other reason is because website development is hard. One spends ages trying to get everything laid out prettily on the page, only to open it on a mobile phone, or a different web browser, and discover the layout is completely broken.

?

?

What does the future hold at this point? I am now, finally, settled in Medellín, with a visa which will last for several years and all my belongings under one roof. Everything is once again stable, in the way that I expected it would be when I originally came here in 2016.

?

This lets me return to the true problem of the year, which revealed itself at the end of 2017 and is vastly more important than the visa saga. I cannot possibly finish the artificial intelligence alone. Money, employees, or both, need to be found somewhere, and the obvious place to look is London.

?

My current plan is to use Medellín as a base from which to work, while doing all the business development in London, which is fast developing a reputation as the Silicon Valley of Europe.

?

Despite the higher living costs of London, it is easy to imagine how the Medellín part of this plan will become unnecessary. Frankly, after the ordeal of this year, I’m too exhausted to care.