Background
Main Street Florist is an innovative online platform dedicated to bringing the beauty of flowers directly to your doorstep in Hong Kong. Founded with a passion for floristry and a commitment to quality, Main Street Florist aims to make floral gifting easy, accessible, and delightful for everyone.
The idea for Main Street Florist emerged from a simple love for flowers and the joy they bring to people’s lives. The founders, a team of experienced florists and tech enthusiasts, recognized a gap in the market for a user-friendly online flower shop that not only offers stunning bouquets but also prioritizes customer experience and timely delivery.
Research Insights
Recent user experience research highlighted that 70% of online shoppers abandon their carts due to complicated navigation and lengthy checkout processes. Additionally, studies show that 64% of consumers are more likely to trust brands that provide clear and transparent information about their products and services.
As always, I did some market research on competitors to investigate the current offerings in the market and take inspiration from particular features that I liked about each app/website.
Identified Pain Points
Complex Navigation
Many users struggle with apps that have cluttered interfaces, making it difficult to find what they need quickly.
Many users struggle with apps that have cluttered interfaces, making it difficult to find what they need quickly.
Lack of Trust
Users are hesitant to purchase from online florists due to concerns about quality, delivery reliability, and security of payment.Inefficient Checkout Process
Lengthy and complicated checkout processes can lead to cart abandonment.
Product Vision and Solution
From these findings, I decided as a product to identify key goals:
Intuitive Navigation
Solution: The app features a clean, straightforward navigation bar with clearly labeled icons. This layout reduces cognitive load, allowing users to find their way effortlessly.
Impact: By simplifying navigation, users can quickly browse and locate their desired bouquets, enhancing overall satisfaction.
Trust-Building Features
Solution: The app incorporates trust indicators, such as secure payment icons, customer reviews, and high-quality product images.
Impact: By providing transparent product information and showcasing customer testimonials, the app instills confidence in users, reducing purchase hesitations.
Streamlined Checkout Process
Solution: The checkout process is simplified into three clear steps: Review Order, Delivery Details, and Payment. Each step is designed to minimize friction.
Impact: This efficient design reduces cart abandonment rates, ultimately leading to higher conversion rates and customer satisfaction.
Solution: The checkout process is simplified into three clear steps: Review Order, Delivery Details, and Payment. Each step is designed to minimize friction.
Impact: This efficient design reduces cart abandonment rates, ultimately leading to higher conversion rates and customer satisfaction.
Wireframe
Based on the identified pain points and corresponding solutions, I created a set of simple wireframe to effectively communicate our vision for the Main Street Florist app to the client. The wireframe for the Main Street Florist app is designed to embody user-friendliness, refreshing simplicity, and trustworthiness. Each element is carefully crafted to ensure an intuitive experience that guides users seamlessly from browsing to checkout.
The UI
The design phase of the Main Street Florist app builds upon the wireframe concepts, transforming them into a clean and professional user interface that reflects the brand identity and enhances user experience.
The design strategy for the Main Street Florist app centers on creating a user-friendly, refreshing, and trustable experience. By prioritizing simplicity and visual appeal, the app aims to make floral shopping a delightful journey for every user. Predominantly green tones with white space to create a refreshing and calming atmosphere. Friendly and modern fonts that enhance readability, contributing to the overall simplicity of the design.
Get Started Screen
The Get Started screen features the logo prominently at the center, set against a beautiful background of our best bouquet. This visually appealing design invites users to begin their floral journey with us, creating an immediate emotional connection.
Login/Register Screen
The login and registration screens are designed to be straightforward and user-friendly. With a clean layout and minimal text, users can easily navigate the process. Encouraging prompts guide users to sign in or create an account, ensuring a seamless entry into the app.
Home Screen
A spacious design with a clear focus on featured products and seasonal offers. Easy-to-use navigation bar with icons for Home, Browse, Cart, Wishlist, and Profile, ensuring users can navigate effortlessly.
Browse Section
Categories and products are displayed in a visually appealing grid, allowing users to see multiple options at once. Product search for products, simple filters, and sorting feature, enabling quick access to desired products.
Product Detail Page
Multiple refreshing high-quality images of each product. Concise, trustable information about the flowers and care instructions. Add to Cart button is prominently placed for quick access.
Checkout Process
Streamlined checkout steps. A simple, three-step process—Review Order, Delivery Details, and Payment—to reduce friction. Convenient feature that allows users to save their delivery addresses and payment information securely, streamlining future purchases and enhancing the overall shopping experience. This functionality not only saves time but also fosters a sense of familiarity and trust with the platform.
UI Compilation
