Florist E-commerce site - Case study

The challenge was to redefine the way that an existing e-commerce Florist site interacts with users in order to make it simple, delightful and user-friendly. Improved usability and interfaces through the knowledge gained by usability inspection, user testing and the formulation of requirements. These helped to connect and convey customer behaviour insights to optimize the digital product.

A research and concept phase which referred to the existing website set the course at the beginning of this project. General use cases based on personas, information architecture and detailed wireframes for the whole digital appearance followed.

1_ Process – Agile florist

My Role was as UX/UI Designer.
I was responsible for these deliverables: research, analysis, affinity diagrams, personas, user goals, needs and flows, user journey, card sorting to structure and validate IA, site map, wireframes, prototyping and visual design.

Usability Test Results

2bis_User testing results
2Bis_ Requirements

Requirements 

Strategy:  After gathering my research, I created user personas that helped to test and refine the designs from the site mapping phase right up to the final handoff. Also, it contributed to understand the target demographic, motivations, habits, and place a face for the player.

Persona

Design > Site Map

4_bis_Site Map

User Journey

5_bis_User Journey

Creating the perfect user journey. Many UI elements had to be completely redone or rethought to make the user journey a pleasant one, while making it easy for the users to keep doing what they were used to do already on the platform: order flowers. Most elements have not only been simplified to a maximum, but have been designed to make the whole ordering process way faster.

Wireframes > Prototyping > UI 

6_bis wireframes – prototyping – ui

I then began wireframing, to make sure that the experience would be intuitive but also a delight to use. Starting low fidelity, figuring out what is best placed where, and then moving on to a higher fidelity. The cycle went something like: Wireframe -> Test -> Resolve -> REPEAT
I designed a transactional journey from searching and selecting a product, adding to the basket and purchasing. The creation of lo-fi wireframes allowed to begin testing the ideas with users. It was interesting to realise how each level of fidelity helped refine the site in a different way.

The transition from lo-fi wireframes to final prototypes

Same company, a total new experience:

If you compare the new product design to the previous one, it’s pretty much day and night. A new iconography system is now in place to make it easier for users to filter the products they are looking for. The user dashboard has been reorganised completely and the whole experience is not more flawless than ever thanks to a side cart that is always present during the order process.
The interface does not contain UI‐bling or unnecessary elements. I opted for clear, readable typography —choosing colours with high contrast to increase legibility in outdoor, low‑light conditions. The use of colours has been kept to a minimum to assure a clean aesthetic, but to keep the bright colours mostly for call to actions or elements that really need to stand out of the design. The design is uncluttered, clean, large and well spaced. All the design decisions help to exude a sense of confidence in the design.

Final UI

14
15
16
17
18
20

Outcomes:

I tested the high fidelity prototype with a user that was involved in evaluating the already existing E-commerce Florist site. His feedback was that I achieved a clean and efficient way for customers to interact with the company and realise a purchase. He also felt that it has a clear, consistent and simple navigation.

Selected Works

LUSH AppCase Study

Wild BloomE-commerce site

Mental Health App Big Radical Studio

BlossomPhotography