Amia Bakery

UI Requirements

Meta Requirements

  • Navigation Bar: menu that will be seen across all pages inclusive all essential links

Footer at the bottom with essential links (menu/support- contact us/FAQ sections)

◦ Social links: Instagram, Facebook

User Tasks:

• As a user, Becca, I want to learn about Amia Bakery so that I can understand what the business is about

• As a user, Becca, I want to order Amia Bakery's Princess Cake so that I can enjoy it with my family

Pages to Design

Home
Our Story Page Menu Page Cakes Page Shopping Cart Check out Confirmation

High Level Requirement

Homepage with links to content
Our Story Page
Menu page that provides option of selecting a cake or cupcake Cakes page
Check out page to review order
Confirmation to complete order

Detailed Requirements

Homepage

  • Logo in top left corner

  • Clear Main navigation at the top

  • Search feature at the top right to look through bakery items

  • Hero Image – pictures of cakes/cupcakes in the background, and tagline

  • Have featured items displayed on this page, such as unique and new bakery foods, with

    picture, cake/cupcake name, and description

  • Testimonials and social links

  • Footer

Our Story Page

  • Our Story heading

  • Hero image at the top (with employees/owners if possible)

  • Information describing the business' story below

    Menu Page

  • Hero image with cakes and cupcakes

  • “Menu” with tagline

• Image of cakes on left, cupcakes on right with caption for each

Cakes page

  • Organized by Cake type (Valentine's Day/Birthday/Anniversaries/Weddings/Unique Cakes)

  • List of different cakes under each category

  • Image of each cake

  • Pricing and description of each cake

Option to select each image and add to cart/checkout option after choosing selection

◦ quantity for each

Shopping Cart

  • Image of item in shopping cart with total (excluding tip) on right side

  • Option to modify quantity

  • Subtotal

  • Taxes

  • Tip – option to add tip

  • Pickup time

  • Amia Bakery's address listed

  • Option to add coupon code

  • Option to request curbside pickup

  • Checkout CTA

Check Out Page

  • Enter email, name, phone number

  • Order summary

  • Option to include a discount

  • Payment information

  • Review and Submit Order

  • Complete purchase CTA

Confirmation

  • Thank you message

  • Order number