Honung i Uppsala

Designing and coding landing page with basic e-commerce features

March 2023 - ongoing

Honung i Uppsala

Overview

Honung i Uppsala is a project started by a friend of mine who aims to sell locally produced honey online. When I offered to help, I took the opportunity to redesign and code the website and to improve its functionality and user interface.

Quick update (November 2023)

I’ve created a modal window which is visible when the user clicks on the cart icon and shows all products that the user wants to buy. For now the cart works only on the products page which means that if the user goes to another page, the products in the cart will be removed. This will be the next task to fix. Meanwhile the cart shows a small image and details for each added product, counter and calculates the total price. Here’s a demo link. Progress in Figma can be seen here.

Inspiration and first sketches

Given that it was a small-scale project, I focused more on the design and implementation, as it gave me the chance to learn and try something new. I began by researching other websites that sell locally produced food and discovered that many of them have confusing experiences, visually unappealing interfaces, and some security issues. I then created sketches to establish the layout and moved on to designing the interface.

image

image

Current state

The current design and implementation were coded manually in HTML by my friend, who was also learning how to code at the time. As he had no design experience, he could not do much in that direction.

image

Prototype

After presenting my prototype, my friend was impressed with how the same content could be structured and presented in a visually pleasing way.

image

image

image

image

Framework

The next step was to choose a framework and code it. As the website was primarily a landing page with basic product selling features, I decided to build it using Hugo, which is easy to work with, fast, and flexible.

The e-commerce aspect would have been challenging and expensive to implement, so we decided to try a different solution without paying for fully developed e-commerce platforms with a lot of features. As my friend sells honey at open markets, he could manually update quantities and take care of product delivery without involving third parties.

Reflections

This project is an ongoing work in progress, as I continue to learn, research possibilities, and code.