FlowerPot: developing intuitive UX/UI design for a mobile application

How to develop a mobile application for a startup that highlights the company's advantages and its services via interface solutions?

Based on the FlowerPot case study, we will consider how Turum-burum developed a native mobile app design by implementing data-driven UX/UI solutions tailored to the niche peculiarities. The developed platform takes into account all aspects of the customer's interaction with the app and provides an exceptional user experience.

Introduction to the FlowerPot project 

Dicentra is a well-known Ukrainian company that sells flowers online and in stores. It offers a wide variety of products, has many customers, and has been working with Turum-burum studio for years.

This time, business owners approached us with a new challenge — creating a customer-oriented mobile app for Android and iOS called FlowerPot for selling flowers. The startup differs from traditional stores and offers interesting and sometimes revolutionary solutions. 

Business concept: taking care of environment and your wallet

We studied the business idea and customer expectations in detail. As a result, in addition to the standard brand services, we also learned about creative ideas from the owners:

1. Practical and environmentally friendly product

Ukrainians have moved around a lot in the past two years and vases are usually not the first thing for them to move with. To solve this problem FlowerPot offers flowers in pots that can be used for home flowers after the gift has wilted. 

2. Simple search for relevant options 

Unlike traditional flower shops, where the range of products is often too wide, FlowerPot offers a small assortment — only the most popular and beneficial options. After all, the store's target audience is quite broad, and not everyone is willing to spend a lot of time searching for the right product. 

3. Fast and convenient online and offline shopping 

One of the key ideas of the project is to allow all representatives of the target audience to buy flowers quickly and comfortably. Therefore, customers can:

1. Come to the nearest FlowerPot store in Kyiv and personally choose a product;
2. Place an order online and pick it up on the way home at the convenient company's location;
3. Buy flowers and wait for delivery at specified time and location.

Project goals

Business owners wanted to create a mobile application that will in the best way showcase the company's services and allow users to quickly perform the target action — choose and buy flowers.

So Turum-burum's task was to create a mobile app design that:

• has clear interface and intuitive navigation;
• emphasizes the brand's strengths;
• requires a minimum number of steps to place an order;
• facilitates the search and selection of relevant products;
• stands out from the competitors.
  

Key UX/UI solutions for creating a customer-oriented application

For the FlowerPot project, Turum-burum developed around 120 screens, including a loading prototype and pages with possible errors. Our team worked out every app block and element in all possible states to ensure a high-quality user experience.

How did we manage to create a user-centric interface that is easy to use on the go, even when using the app for the first time? Find the answer below.

1. Quick app registration 

The authorization page is the initial touchpoint for customers with the application and is vital for forming the first impression about the platform. To make user experience more comfortable during this phase, we have provided a quick app registration, which takes only 4 screens and 2 minutes. 

For authorization, users only need to enter their mobile number and confirm it by entering the code from the SMS. A user must then provide their name, gender, date of birth (to receive personalized offers in the future) and address. It is important to note that they need to provide this information just once, as the platform automatically stores it.

2. Main page: simplicity without sacrificing functionality

About 86% of users expect to find all the important information about the company's services and products on the first screen.

So we developed the interface information architecture and placed the blocks in a way that allows customers to quickly solve their tasks, including:

1. Getting acquainted with the company's services

When opening the app, all registered users immediately see customized images that serve as entry points and allow them to quickly find a relevant product in a particular category of the catalog.

2. Viewing the selected product

People are not always ready to choose and buy a product on a whim. They often need time to take a purchasing decision. That's why we've added the ‘Favorites’ block to the main app menu. This allows customers to mark the product they like, quickly review them and add to the cart after making a final decision.

3. Tracking order status

For FlowerPot app design, we applied the best practices used for various web products.
For example, once an order is placed, a status update block appears on the user’s main screen, much like what you see with delivery services. This block shows the order's progress and lets users track the courier's location on an interactive map. In such a way, customers always know where their order is, making the process more convenient and ensuring they receive their order on time. This feature makes the platform more user-friendly.

4. Quickly pick up orders in a physical store

After placing an online order, a QR code appears on the customer’s home page. To pick up the order in a physical store, a customer just has to show this QR code to a store employee. No need to give your name or phone number— it's a fast and easy process.

3. Product catalog and filters: providing convenient and quick products search

To help users quickly and easily find the right product in the catalog, we've added a range of filters that allow them to:

1. Group products by price

Since the main goal of the brand is to make the purchase of flowers as quick as possible, we decided to group products by their price. This way, the customer can choose a certain budget and view the offers available to them. 

2. Prioritize search filters

We prioritized filters based on popularity, so the most popular products appear higher on the list. Additionally, to enhance user experience, we’ve enabled customers to select multiple types of flowers. This feature is especially helpful for people who are unsure of their choice or need several bouquets.

4. Product page: minimum words — maximum meaning

A product page is one of the most important website sections for making a purchase decision by customers. On this page, users usually learn more about the characteristics of products and choose the relevant product. To facilitate the search, we:

1. Made a focus on product photos

High-quality and realistic photos are crucial in e-commerce, especially for products where visual appeal is key. To ensure clarity and prevent confusion, we use neutral backgrounds for product images and include dimensions in the photos. This approach helps build trust and transparency with customers and boost their loyalty to the brand.

2. Added concise and informative product descriptions

According to statistics, 87% of online clients find product descriptions the most important factor for making a purchasing decision, since they cannot physically see or touch the advertised goods.

Therefore, when you click on a product in the app's catalog, a bottom sheet will pop up displaying key product characteristics on one screen. To make your user journey as short as possible, we've kept the descriptions concise and direct — no longreads, everything is short and to the point. 

5. Shopping cart and checkout: ensuring quick order placement

The shopping cart and checkout pages are actually the final steps for buying a product, and it's important to ensure a flawless user experience here. However, the statistics say that the average exit rate from the site at the cart browsing stage is 70%. The most popular reasons include:

• 26% — the requirement to create your own account;
• 22% — too long process of checkout filling in;
• 17% — interface bugs;
• 13% — a small selection of payment methods

All these factors share a common theme: they require additional time from customers. So when we designed these pages, we ensured intuitive and simple design by:

1. Adding cross-sell tools that save customers' time

Cross-sell tools are an effective way to take care of users and increase your average order check. So, we identified the categories of goods that are most often bought together with flowers and offered them to users by allowing them to buy in one-click cards and sweets. This way, customers can buy everything they need in one place and simplify their lives.

To ensure maximum convenience, we’ve also created templates with greetings for various occasions. When purchasing a card, you can either write your own message or select from a range of pre-written options.

‍2. Ensuring automatic checkout filling

The checkout is placed only on two mobile screens, has a minimalistic header and a clear footer not to distract the user from placing the order.

The user’s basic information is automatically filled in, as it was saved during registration. In addition, we have provided an option to contact the FlowerPot manager to clarify the order details.

In other words, we created a ‘clean interface’ that requires minimum time and effort from users. 

3. Adding several ways to select an address

In the checkout, the user can change or edit their location by adding a note on the map or entering the address in the search bar. When creating this block, we were inspired by the best UX/UI practices of taxi apps. This allowed us to ensure the transparency of the block, as well as the accuracy of the entered data.

6. Working out high-quality UI: small things matter

The style of web products affects user loyalty, brand awareness and, as a result, business conversion. To create a consistent and native design, we developed and added interesting customized elements, icons, etc. to the interface. In this way, we emphasize the niche theme and create an emotional connection with users, which is especially important for the B2C business model.

For the FlowerPot project, Turum-burum designed approximately 120 screens, including loading prototypes and error pages. We worked out every app block and element in all potential states to deliver a top-notch user experience.

FlowerPot project result

Thanks to close cooperation with the client and application of the best patterns of various web product types, we managed to develop a native design for the mobile application that successfully conveys the brand's values and benefits.

The result is a user-friendly application that combines the company's offline and online services, taking into account the needs of a wide target audience and business objectives.

The app is already available on the App Store and Google Play, so you can download it now! We are confident that users will like it, especially those who value their time and comfort. 

‍