Gardeny – Flower online shop design

Gardeny website mockup
Goal of the project

Because the focus of this short project was to develop my UI skills, I decided to conduct only 6 interviews to gather information about the user, the tasks, and the context. These interviews were made on a Saturday morning around one of the traditional markets of Barcelona.

5 competitors were identified and analyzed in terms of visual design (color palette, typography, layout, etc.), information architecture, functionalities, and interaction design.

Users and research
Style guide and problem statement

From a disparity of ideas to a meaningful website

Paper prototypes

These images show part of the low-fidelity prototype, which was tested with 3 different users to identify usability problems. Their comments were written on the prototypes and taken into account to iterate the product.

Home , paper prototype
Customize the selection screen
Login pop up
Write a message screen

High fidelity prototype

High fi Prototypes

The next video presents the final prototype and shows the flow of a user who is trying to buy a bunch of flower to decorate a table.

Take aways

The purpose of this short project was to train my UI skills using Sketch. Although the main focus was on the visual design, I also spent some time researching and testing the product. Users’ feedback is key to my design decisions. Without them, the result would have not been the same.

In this case, the “five-seconds test“, a very simple method for capturing a user’s first impression of a website, was essential to ensure a good selection of colors and typography. 

Because most of the competitors were offering similar features and functionalities to the customers, I also decided to put the focus on improving the user flow, minimizing the cognitive load and providing the customer with a flexible and fast way to buy flowers.


Leave a Comment

Your email address will not be published. Required fields are marked *