2020 / Web Design & Development

Logofood

Wireframing, UI/UX design, development

When I told a good friend of mine, Kuno, who runs a variety of internet businesses that I also experiment with design every now and then, and that I was studying design, he for some unbeknownst to me reason had full confidence in me and had me design his new e-commerce project which turned out to be my very first professional design endeavour.

Defining the problem

What Kuno wanted was an e-commerce website directed towards an audience who only buys products in bulk. I reasearched the competition and found that this audience is generally accustomed to browsing tons of catalogue with little to no thought to their design. Since Kuno’s project wouldn’t be new in its idea, it had to differentiate with the competition in some way.

So I thought if I design a website that’s attractive in its design by focusing on aesthetics to communicate quality with the audience, and do this all while also making the website as easy to use as we could, it should not only help make its initial sales to get the project off the ground, but also to keep it going long-term as a dominant force in its field.

It’s important to keep in mind that due to the low-budget nature of this project I couldn’t test any of my hypothesis, so instead of relying on hard data, I ended up relying on my gut. Ideally, if at all possible, I would make these decisions based on real user feedback.

Wireframing solutions

When wireframing for solutions I wanted to make it simple in structure and uncluttered in functionality. It’s that reason why I ended up with the idea of re-using the masthead on the home page, which is a Single-Page Application, for both the introduction to the website as well as the context title of each page on the front page (category, search).

For the product page I opted for a simple toggle-able content area to see the description or the details of the product, given that’s the only two things a potential buyer cares about. The rest can be hashed out via the sales team by clicking on the “Ask an offer” page, which takes you to the contact page.

The contact page needed to showcase the team, their contact details, the clients the company has and a general contact form for good measure.

Design

The end result of these designs is a clean, minimal website that gives you exactly as much you need and not a bit more. It communicates quality and with the personal introduction on the home page and the small team with all of their personal contact information on the contact page it also tells you that you get a personal touch when doing business with this company.

The Category System

The holy grail of this website is the category system. It’s what the audience will interact with to find a product they are looking for. I like to think of the category system as an almost like omni-sidebar, which has multiple features baked into it and yet it is still a category system.

It features a category list, a subcategory list, a search and filters - all intuitive to use and space-saving in nature, so none of it clutters the user experience. It’s important to mention that none of the actions you take here will reload the page either, as the front page of the website is a Single-Page Application, which keeps the flow of information change instant.

The Language Switcher

One common thing I saw in researching all of the competiton was how much space was wasted on repeatative information when there was no need to - one such example being the language switcher. Most of the competition tended to include the currently active language as a choice in their language switcher, when there is no need to - because why would you want to go to the language you already are on? That’s why in Logofood, you can only select a language that is not currently active.

Development

Once the design was in place, I built the whole thing on WordPress as a custom theme. The home page is built with React.js and to make that happen I built a few custom API endpoints into WordPress. Overall I'm quite happy with what I squeezed out of WordPress in terms of speed as my previous experience with building custom projects on it have left me unsatisifed.


Working with Asko was a breath of fresh air. The process was really nice and he kept me in the loop with all the updates that he was doing. I knew at all times what I was spending my money on and the end result was very satisfying.

— Kuno Kompus, CEO of Logofood