These days, numerous individuals exchange flowers on various occasions. However, due to busy schedules or distance from loved ones, many opt to order flowers online to save time and provide their loved ones with peace of mind.

On the Mikhak Talaee website, users can purchase the flowers they desire. However, the website's current design is inadequate, leading to difficulties during the purchasing process. Therefore, we revamped the website to facilitate easy flower purchases for users.

Here is a sample displaying a part of this design, but you can scroll down and read more or click the button to view the complete Figma prototype.

Project Overview

Team

My Role

Duration

Tools

Sorour Askarzadeh

Shamim Validi

UX|UI Designer

3 Months (Summer 2023)

Figma, FigJam, Photoshop, Zoom, Google Meet

While analyzing the website through user research, we identified some key pain points:

• Despite the simplicity of the overall format and content setup, users find it challenging to complete their purchase process.

• There is a lack of sufficient information, such as images or detailed explanations regarding size and plant maintenance conditions.

• Increase the number of customers purchasing from this website by creating a user-friendly platform with valuable information presented in a clean and straightforward design.

Design Goal

Solution Statement

Build up trust for users visiting the website:

• Provide a website that shows all details that customers need about the business.

• ​​Add a refreshing friendly tone to our logo, colors, and content.

Users want easy access to filters and other facilities:

• Design the website in such a way that users have easy access to filter and all categories that help them choose and buy the desired product easily.

Users need descriptions of each product:

• Provide sufficient information about each product.

The Process

In our project, we followed the Double Diamond method, which is rooted in the Design Thinking methodology. Rather than a linear progression, we moved back and forth between stages as the project evolved.

1

2

3

4

Define

Discover

Develop

Deliver

Discover

Firstly, we conducted a heuristic evaluation as it is the best way to evaluate usability, commonly used in User Experience (UX) design.

• It is better to organize the site based on the availability of a flower.

• The website filter is not functioning properly.

• When a user clicks on the flower arrangement, it redirects to a different page, but the flower sale page is currently unavailable.

• The filters are quite confusing and seem to lack integrity.

To collect valuable insights, feedback, and opinions from users regarding their experience, needs, and expectations related to a product or service, we decided to conduct user interviews.

• Most people are looking for a florist online shop they can trust.

• Users prefer to see information in appropriate categories.

• Users want to have complete and easy access to clear and transparent information about each product.

Competitive Analysis

Interview

We analyzed 6 florist online shop websites' content & features.

• Half of the websites provide users' opinions, which can greatly help users' purchases.

• The details about each product were complete on the websites reviewed, which can help users make a better choice.

• They had proper and efficient filtering.

Heuristic Evaluation

And these are our takeaways:

Define

Persona

Our customer’s top needs and goals are:

Affinity Diagram

We organized all the information we collected from our research using affinity mapping.

• Confidence while buying flowers online.

• Having the right category.

• Having easy access to the description of each product (price, color, size of flowers, number of each flower in a bouquet, and storage conditions).

• Proper filtering.

Develop

Task & User Flow

First we designed a task flow that represents the user’s journey through a specific task.

Then we designed a user flow that represents the series of steps the user takes to accomplish a single task in the website.

Site Map

Wireframe

At the next step we designed website's lo to mid fidelity wireframes:

UI Kit

Once we presented our proposed colors to the business owner, she wasn’t necessarily a big fan. She had already collected 3 colors she liked to use with the new design. Unfortunately, the colors didn’t follow any of the color theory and accessibility guidelines. We took her colors and adjusted them to align our color palette with UI standards and best practices. As part of refreshing the website, we also took better photos of the flowers to better represent their details. Here you can see the full UI kit we created for this project, including fonts, buttons, forms, and colors.

Homepage

Product Page

Category Page

Checkout Process

Deliver

High fidelity prototype

For the hi-fi prototype, we designed several pages for the website.

Homepage

Category Page

Category page

Product Page

Checkout Process

Reflections

What did I learn?

• I learned that purchasing any product should be an easy task. Simplifying checkout process makes the overall purchase experience much better.

What can we do next?

• In the future, we plan to design the virtual flower arrangement section of the website so that users can easily utilize this feature and have a positive purchasing experience.

• Effective time management is crucial for group projects, as missing deadlines can significantly impact other team members' roles.