Design Rationale Report
E-commerce Flower Shop Website UX Prototype
Figma link
Web Views –
https://www.figma.com/design/ZmSgRpEkdteZxB6NT3OvP1/flower-shop?node-id=0-1
Mobile Views -
https://www.figma.com/design/ZmSgRpEkdteZxB6NT3OvP1/flower-shop?node-id=192-308
1. Overview
This report outlines the design decisions behind the flower shop website prototype. The goal is to create
an elegant and functional e-commerce platform where the flower shop aims to offer a seamless online
shopping experience for floral products, promote special events, and allow users to easily get in touch
with the shop. This report explains the design decisions made throughout the project, including color
palette choices, typography, layout, and accessibility considerations, to ensure a consistent, usable, and
aesthetically pleasing experience across both web and mobile interfaces.
2. Color Choices
The chosen color palette of pink, white, gray, and purple reflects the floral theme and conveys a warm
and inviting atmosphere:
Pink:
• Represents love, care, and happiness, evoking emotions commonly associated with flowers. It is
used for background and highlights to grab attention.
White:
• Acts as the background color, providing a clean and uncluttered look while emphasizing the
vibrant floral images.
Gray:
• Used for text and secondary elements like form labels, ensuring readability without overpowering
the design.
Purple:
• Adds an element of luxury and elegance, particularly in headings, promotional banners, and call-
to-action buttons.
This color palette creates visual harmony and aligns with the flower shop’s brand identity, enhancing user
experience.
3. Typography Choices
The fonts were carefully selected to balance aesthetics, readability, and usability:
Calibri:
• Chosen for body text because of its clean, modern look and excellent readability.
Alata and Grenze Gotisch:
• Used for headers and titles, adding a touch of elegance that aligns with the floral theme.
Domin:
• Applied to buttons to ensure clarity and immediacy. Its bold style helps users easily identify
interactive elements.
Inter:
• A versatile font used in forms and navigation menus to provide a contemporary feel with high
readability.
Clicker Script:
• Adds a decorative touch in special sections (e.g., event invitations, greeting messages) to align
with the shop’s focus on creativity and beauty.
The combination of these fonts helps create a visual hierarchy, making the user interface easy to
understand and navigate.
4. Design Patterns and UI Components
The design follows common UI/UX patterns to create an intuitive and familiar experience for users:
Navigation Bar:
• A fixed top navigation bar (for web) and a hamburger menu (for mobile) provide easy access to
essential pages (Home, Shop, About, Events, Contact).
Card Layout:
• Product lists are organized into cards containing images, names, prices, and “Add to Cart” buttons.
This makes it easy for users to browse products and compare options.
Carousel Slider:
• A hero carousel on the homepage showcases seasonal flowers and promotions, capturing the
user’s attention immediately.
Interactive Elements:
• Buttons are styled in purple or pink to encourage actions, such as "Shop Now" or "Proceed to
Checkout".
Form Components:
• Input fields, dropdowns, and buttons on the login/signup pages provide an intuitive experience,
guiding the user through each step smoothly.
These design patterns promote usability by leveraging familiar elements, making interactions effortless
for both novice and experienced users.
5. Layout Decisions
Each screen’s layout was designed with clarity and functionality in mind to ensure smooth navigation and
interaction. Below is a brief overview of key layout decisions:
Homepage:
• The homepage features a hero banner to highlight promotions, followed by featured products
and upcoming events. A footer section provides links to contact information and social media.
Product Shop Page:
• A grid layout organizes products, with a filter panel to allow users to sort by price or category.
Product Details Page:
• A large product image is placed alongside product details, pricing, and an “Add to Cart” button to
facilitate quick purchasing.
About page :
• About page gives an overview of the shop’s story and values, building trust.
Events Page:
• Events are displayed in a list format with images and descriptions to highlight the shop’s
involvement in weddings, seasonal promotions, and workshops.
Contact Page:
• A form for inquiries, along with address details, ensures customers can easily reach the shop.
The mobile layout mirrors the web version but with adjustments (e.g., stacked elements, larger buttons)
to maintain usability on smaller screens.
6. Accessibility Considerations
Accessibility was a key priority in the design to ensure the prototype is usable by people of all abilities:
Font Sizes:
• The font sizes used are 20px for body text and 24px for headings to enhance readability, especially
for users with visual impairments.
Contrast Ratios:
• Text and buttons use colors with adequate contrast against the background to meet WCAG
standards. For example, black text on a white & pink background is clear, while purple buttons
stand out on pink backgrounds.
Alternative Text for Images:
• All product images and decorative elements include alt text to provide meaningful descriptions
for users relying on screen readers.
Keyboard Accessibility:
• The prototype ensures that all interactive elements (e.g., buttons, input fields) are navigable via
keyboard. Focus indicators are also visible to help users track their position on the page.
Responsive Design:
• The prototype ensures a mobile-friendly experience, with layouts adapting gracefully to different
screen sizes.
These accessibility measures ensure the design is inclusive and functional for a wide range of users.
7. Conclusion
The flower shop UX prototype was designed with a focus on aesthetics, usability, and accessibility. The
color palette and typography reflect the beauty and elegance of flowers, while the use of familiar UI/UX
patterns ensures an intuitive user experience. Thoughtful layout decisions guide the user seamlessly
through the site, whether browsing products, exploring events, or making a purchase. Accessibility
considerations, such as appropriate contrast and responsive design, ensure the site is usable for all users,
making this flower shop website both beautiful and functional.
