About

Enemærkets Hostahave

Context

Academic project
Design & development
April 4th 2024 - May 22nd 2024

Technologies

WordPress
php, CSS & HTML
Adobe XD
Breakdance
ACF
Adobe Illustrator

Introduction

Enemærkets Hostahave is a company that combines a physical visitor garden and nursery with online plant sales. After a change of ownership five years ago, the new owners have focused on attracting more visitors to the garden through a dedicated online effort to keep up with the times. With my advice, they have successfully created a social media presence that has grown from 100 to over 6,000 followers on Facebook over the years, but they feel that their website has not kept pace.

The website before the redesign was a solution they inherited with the change of ownership, and it appears outdated and with suboptimal features. They wanted a complete redesign of the site to make it appear more trustworthy, modern, and professional. However, the primary goal was to create an intuitive and easy backend because the more time they spend on the website, the less time they have to tend to the garden.

Before
After

Laptop

Tablet

Mobile

We've had Sarah renew our website with the aim of attracting more visitors to our garden.

Sarah has taken a professional approach to both our desires and needs. She has listened and provided constructive ideas for development. Additionally, she has created a new logo for our company to make us appear more credible.

We would use Sarah again anytime and recommend her work.
Helle S.
Owner of Enemærkets Hostahave

Project requirements

The page is to consist of both a 'visitor's garden'-part as well as a webshop.

There needs to be a system for setting up events on the site.

There should be a separate system for blog posts, as well as one for care guides for hostas and other plants.

Other important considerations

The target audience primarily consists of women over 45 years old, but many are also 60+. For this reason, it was especially important that the site was easy to navigate for people who do not consider themselves tech-savvy and have poorer vision. Therefore, no 'smart' and modern features were implemented; instead, familiar and intuitive solutions were chosen, which were tested on the target audience to ensure user-friendliness."

A large portion of the target audience also preferred to browse the site on their mobile devices. While it's always important to have a responsive design, this was particularly emphasized as their original website did not provide a good mobile experience.

Visual design

Before the redesign, Enemærkets Hostahave had a logo. The logo was a low-quality bitmap image with a white background included in the image itself, making it difficult to use on different backgrounds. Additionally, it became extremely pixelated when scaled up in size for signage.

To address this issue, I created a new logo that would serve as the foundation for the new visual identity. In close collaboration with the company, we developed a logo that met their requirements.

  • Scalable
  • Works on a dark and light background - a white version of the logo was created for this
  • Virke på både mørk og lys baggrund - der blev skabt en hvid version
  • Logotype in a different color than the emblem.

Process

Semi-structured interviews

At the beginning of the project, I conducted interviews with informants from the target audience.

During these interviews, I sought to clarify their desires for the new website, identify pain points with other sites, and explore a visual direction by examining competitors' websites.

Wireframe testing

I created an interactive low-fidelity prototype in Adobe XD and conducted a series of user tests.

Through assigned tasks, I gained insight into how the target audience interacts with the site and whether the proposed interaction design and information architecture were intuitive or frustrating for the audience.

Mockup interviews

Based on the insights, I created mockups that were shown to the target audience.
The mockups were developed based on A/B testing, where one element was changed at a time, and the target audience was asked about what appealed to them the most.

Furthermore, they were asked whether the website appeared credible and suited Enemærkets Hostahave.

Website construction

Backend

Through the use of Advanced Custom Fields, I was able to create custom fields that were quick and easy for the owners to fill out in the backend.

Setup

With the Breakdance page builder, I created templates that dynamically fetch content from the fields, hide them if the fields were not filled out, and update the information in multiple places at once.

Frontend

The result was a visually appealing frontend experience, which the site owners don't need to spend time maintaining the design guidelines themselves since their content is simply pulled from the backend and automatically translated to the frontend.

Se næste case

Se forrige case