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

Category: design

Week 6, Day 1: Research and UX

posted Tuesday, July 26 2016 @ 3:07 pm EST

This week I'll be creating an "unfolding game" in the vein of A Dark Room or Candy Box. Unfolding games are a small, somewhat new genre of video game that start out very simple, almost mundane, and then expand in scope over the course of play. I feel this will make for an interesting UI demo, because it will require an interface that begins with almost nothing (a single button, a line of text or two) and smoothly evolves into something much more complex.

Our Company: No fictional company this time, I will be publishing without pretense under my own name.

Our Audience: Unfolding games are all about engaging the human curiosity, so our wide target can be "pretty much anybody looking for something to do on the internet". More specifically, this kind of experience is most likely to appeal to people in their 20s - 40s trying to kill 20 minutes to a couple of hours online.

Use Cases:
    • Online entertainment.
    • Potential ad revenue if things really take off.

Content Strategy:
    • Provide an interactive experience which is effortless and intuitive to learn.
    • Start with a single button, and gradually add elements as the player progresses.
    • Surprise users with new reveals often enough to maintain engagement, but not so often as to confuse.
    • Use non-interactive style changes such as text and background color to reflect various events.
    • I'll include Google Analytics to keep an eye on how things are going.

UI Spec:
This will be a lightweight one-page app.

• Main Interface - various lists, logs, and buttons to interact with the game logic.

• Bottom-left
    • © ZAS 2016 - medium gray font to be less intrusive, links to portfolio site

• Bottom-right
    • Save - export game data to a simple text string
    • Share - buttons for various social media platforms
    • Restart - restart the game from the beginning

Flowchart and Wireframe:

Flowchart Wireframe, reflecting fully-revealed end game UI.

Tomorrow: mockup, beginning implementation!

(Click to read more)

Week 5, Day 1: Research and UX

posted Tuesday, July 12 2016 @ 7:53 pm EST

Going to try and keep this brief, as I haven't got a lot of time today.

Our Company: MetaFeed is our fictional company of the week. Their product will be an online data aggregator which pulls down data from a variety of social networking sites (Twitter, Facebook, Google+, etc.) to show all your important news in one convenient location.

Our Audience: Anybody using multiple social media sites will find this helpful, especially if they're using three or more.

Use Cases:
    • Catching up on a bunch of different social networking sites.
    • Keeping logins all together for easy access. (Password storage on client's browser.)
    • Sort and search aggregated content with ease.

Content Strategy:
    • Content pulls in data from various APIs.
    • Update the page live when new updates are found. (No need for user to to refresh.)
    • Passwords are handed directly from end-user to social networks, not stored by our server.
    • I want to do some more portfolio work with AngularJS, so I'll probably be using it here.

UI Spec:
This will be a lightweight one-page app.

• Top Navigation
    • Logo, product name
    • Username and logo for each signed-in social network.
    • Settings - just opens a modal.

• News
    • If no networks are logged in, show a basic message instructing user to do so in the settings.
    • Newsfeed, sorting options, search.
    • Label for network, who posted it, time posted.
    • The post content itself.
    • Reply from MetaFeed, or go to post on originating social network.

• Settings (modal)
    • List of all supported networks.
    • Click an entry in the list to log in.
    • OK / Cancel

Flowchart:

Flowchart

Wireframes:

Login message. Settings modal. News feed.

Tomorrow: mockups!

(Click to read more)

Freelance Project: Wisdom of Astrology

posted Tuesday, July 12 2016 @ 2:00 pm EST

This took quite a bit longer than I would have liked, and I didn't have time to add every little thing I wanted to, but overall I'm happy with how it came out. So, with permission from my client, here's a look at what I've been working on for the last couple days.

Live URL: http://www.cathypagano.com/

Key Features:
• Bolt CMS for content management.
• Theme built from scratch in Zurb Foundation.
• Imported all content from client's old website, overhauled layout.
    • 61 newsletter pages, which were brought over automatically using JSON, Selenium, and PHP myAdmin.
    • Custom interface uses Blogger API to pull down content from three different blogs.
    • Integration with PayPal for service charges and donations.
    • YouTube embeds (both single video and playlist).
• Filters for imported content:
    • Change all "Comic Sans MS" to significantly better "Comic Neue".
    • Enforce a minimum font size to correct unreadably small text.
    • Change broken links on images to nice Magnific links (where applicable) or otherwise remove them.

The homepage, with main navigation and sidebar. Astrology is the largest section on the site. One of the three Blogger blogs included, in list view. The books section is fairly straightforward. The Services page, with PayPal integration. The Astrology Videos page, with YouTube integration.

Later tonight: Week 5 research, spec, flowchart, and wireframes!

(Click to read more)

Week 4, Day 2: UX Design

posted Monday, June 20 2016 @ 8:00 pm EST

Because I'll likely be busy tomorrow, I'm looking to get something of a head start today. Ideally this will be the first of two blog posts.

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Home
    • Projects
    • Blog
    Not 100% certain a top nav is needed this time, may decide to skip it later.

• Home (/)
    • Background will be several large, high-rez photos from Sam's portfolio.
    • Small sample gallery and intro video.
    • Contact information (name, email, phone #) readily available.
    • Email form to contact directly via website.

• Projects (/projects)
    • List of projects, each linking to a gallery page.
    • Thumbnail for each.

• Project Galleries (/projects/<project_name>)
    • Loads project images from Google Drive.
    • Current / previous next view
    • List view

• Blog (/blog)
    • Sam said he isn't looking to blog much, but it would be good for SEO.
    • Basically just the usual WordPress news page, themed to match the site.

• Download (/download?id=<download_id>)
    • Accepts a URL parameter to provide a download of a corresponding ZIP file on Google Drive.
    • Loads project name, customer name, from accompanying XML in same folder, displays on page.
    • Gives an error message without URL parameter, or if ID is not found.

In interest of expediency, I'm doing the flowchart and wireframes by hand this time.
It doesn't look quite as nice, but it's a lot faster.

Flowchart:

Flowchart

Wireframes:

Later today: mockups!

(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 2, Day 2: UX Design

posted Tuesday, June 7 2016 @ 5:07 pm EST

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Home, Meet our Cats, News, Reservations
        • the page you're currently viewing is highlighted on top nav
    • Language select: English / Japanese

• Home (/)
    • Above the fold:
        • large photo of café interior
        • marketing message which is also a cat pun
        • "scroll down for more info"
    • Below the fold:
        • graphical links to Cats, Reservations, and News
        • hours, location, directions
        • menu, pricing
        • summary

• Meet our Cats (/cats)
    • single image for each cat with their name
    • access lightboxed gallery pages for each cat
        • 2 to 4 photos, possibly a video
        • brief personality bio
        • calendar of cat's availability
            • internally links to the calendar page
        • link to cat's adoption page (if applicable)

• News (/news)
    • birthdays
    • adoptions
    • holiday and misc closings
    • general promotion stuff

• Reservations (/reservations)
    • for each day, list cats expected to be present
    • note any days with closings or irregular hours
    • make reservations to visit for a given timeslot
    • can link to a specific day using hash location

Flowchart:

Flowchart

Wireframes:

Home page. Cat galleries page. Cat gallery lightbox.
News page. Calendar and reservations. Date information lightbox.

Tomorrow: away from keyboard..

(Click to read more)