< Back
Weekend Web Development
Return to Top Top ▼ Newest First

Category: week3

Week 3, Day 5: Front End

posted Friday, June 17 2016 @ 7:12 pm EST

Everything should be just about nailed down now. See screenshots and video demo below.

Live URL: http://havinsurance.neocities.org/

Key features:
• Signup and login process.
• Modals on Home page for each insurance type.
• Modals on Quote page to add policies to account.
• Fix for page content horizontal shift resulting from modal's removal of the scrollbar.
• Account page data from XML for selected policies.
• In lieu of having an actual database, browser cookies are used for temporary account info and policies selections.

//www.youtube.com/embed/KK7keK_UIgo?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view, top. Home view, with lightbox. Policy quotes view. Policy quotes view, with lightbox. Account management view.
(Click to read more)

Week 3, Day 4: UI Development (cont.)

posted Thursday, June 16 2016 @ 7:39 pm EST

Live URL: http://havinsurance.neocities.org/

As mentioned previously, this project uses Zurb Foundation 6 for its responsive layouts.

Home Layout

Quote Layout

Account Layout

Tomorrow: finished implementation!

(Click to read more)

Week 3, Day 3: UI Development

posted Wednesday, June 15 2016 @ 7:17 pm EST

Still working on this, got caught up in fussing with Equalize, so this has all taken much longer than I would have liked. Here's what I have so far:

Update: The home layout is mostly done now, but the other two will have to wait until later.

(Click to read more)

Week 3, Day 2: UX Design

posted Tuesday, June 14 2016 @ 12:41 pm EST

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Products: links to home#products
    • Quote
    • Log In
        • If not logged in, opens login / signup popup
        • If logged in, this is hidden.
    • Account
        • If not logged in, this is hidden.
        • If logged in, clicking directs user to /account
    • Contact Us: links to home#contact

• Home (/)
    • Hero image with marketing message.
    • Products: Homeowner's Insurance, Renter's, Flood, Vehicle
        • Clickable tabs expand to show more info on each.
        • Compare policies now!: links to quote page
    • Assorted other 'FAQ'
        • Accordion menu
    • Contact Us
        • Explain the site's purpose as part of the Website a Week challenge.
        • Provide links to my profile, the blog, etc.

• Quote (/quote)
    • Tab select at top for different insurance types.
    • Table comparison of different plans / coverages for the selected insurance type.
    • Select plans, one per type for a total of 1 - 4.
    • "Buy" selected plans, adding them to the account page.
    • "View my account details"

• Account Management (/account)
    • If not logged in, no account into is displayed.
        • "Please log in to continue."
        • Open top nav login / signup popup
    • View insurance currently on account: coverages, pricing, etc
    • Adjust coverages to a different level for that insurance type
    • Cancel insurance policies, removing them from account

Flowchart:

Wireframes:

Homepage view Homepage with login popup and 'Homeowners' section open. Comparing Insurance Quotes Popup shown when selecting a plan. Account Management

Tomorrow: mockups!

(Click to read more)

Week 3, Day 1: Research and Planning

posted Monday, June 13 2016 @ 6:55 pm EST

This project is now complete!
See it here: http://havinsurance.neocities.org/
Or, keep scrolling to read more.

Our Company: This week's site will be an online insurance sales company. (Property insurance: home, auto, flood, fire, etc.) I'll be reading up on a few actual sites of this type to inform my filler content a bit, but the main purpose here is to spend some time working with zurb-Foundation, as most of my prior framework experience is with the ever popular Bootstrap.

Our Audience: Our broad demographic is anybody buying property, or having property already, which they need insured.

Use Cases:
    • Finding and comparing available insurance plans.
    • "Buying" insurance. (See below.)
    • Log in, manage purchased plans.

Content Strategy: The main homepage itself is mostly for informational and advertising purposes. It functions as our sales pitch, and also provides general info. (Though being a fictional business, much of this will be lorem ipsum.)

There will be a way to search for available plans and "purchase" them. I say "purchase" in quotation because I'm not going to charge anybody money, but I want to have (what looks like) working payment forms and account management. (I'll make certain nobody thinks they're really buying free insurance. Don't want to get anybody in trouble.)

Tomorrow: spec, flowchart, and wireframes!

(Click to read more)