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

Category: ux

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 4, Day 1: Research and Planning

posted Monday, June 20 2016 @ 6:40 pm EST

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

Our Company: My brother Sam is a photographer, and in addition to working for Motif magazine, runs his own small business "Sampson J Photography". He has asked me to create a WordPress site to replace the very rough-around-the-edges Wix portfolio he's using currently. I've been planning to include a WordPress site in this challenge regardless, so this seems a good opportunity to actually help out, rather than just making another fictional business demo.

Our Audience: Sam has done work for assorted special occasions, weddings, and even a documentary. There's probably more I'm not aware of. Our audience is anybody looking to hire a photographer for their event(s), so primarily I'm creating a platform where Sam can showcase his work and demonstrate his talents.

Use Cases:
    • View galleries of Sam's work and assess his skills as a photographer.
    • Availability and contact information.
    • Provide download of completed photo work to customers.
    • Needs to be easy for Sam to update and add new content without doing any coding.
    • Google Analytics.

Content Strategy: The front page will have his contact information and a sample of his work readily available. A selection of galleries from various projects will be available as well. Customers who have hired Sam will be able to access their files via a password he provides them with.

To start with, the site itself will be hosted on Neocities, the photos on Google Drive, and the videos on YouTube (which is to say, much the same as was done with Kūsō Neko Pāku). When Sam is ready to make the move to WordPress.com, that will be as simple as just copying the files over from Neocities.

As WordPress sites go, this one isn't really going to involve very much blogging. We primarily need it to act as a CMS for Sam to create new galleries and add photos to them. Since this is the first website I'm doing for a real business, it seems prudent to hook up Google Analytics tracking for visitor statistics, too.

Tomorrow: spec, flowchart, and wireframes!

(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)

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)

Week 2, Day 1: Research and Planning

posted Monday, June 6 2016 @ 7:22 pm EST

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

Our Company: This week's site will be promoting "Kūsō Neko Pāku" (Daydreaming Cat Park), a fictional cat café in Tokyo. Originating in Taiwan and very popular in Japan, these theme cafés allow patrons to lounge with a veritable clutter of friendly cats while sipping tea or coffee. Aside from adorable feline employees, the main thing these businesses have in common are their terribly designed websites. Unformatted HTML, error pages, and broken links abound. We'll see if I can do better.

Our Audience: Because land is so scarce in Japan's big cities, most of the population lives in small apartments, and pets aren't allowed. Between this and the country's obsession with all things 'kawaii', we can target the broad demographic of anybody that loves cats but can't spend time with them at home.

Specifically, a more focused target would be students and young workers with busy schedules; members of this group that require stress relief and companionship to cope with their day-to-day grind.

Use Cases:
    • Basic information: quickly access hours, location, directions, and summary blurb.
    • See the cats, get to know a little bit about each of them.
    • Calendar to work with your schedule.
    • If I have extra time, it may be prudent to implement Google's Website Translator for the tourists.

Content Strategy: Pictures and profile pages for each cat in a gallery format allows users to build a preliminary attachment with the feline staff. A quick and easy-to-use calendar system allows users to plan a visit when the cats they want to see are likely to be available. Reservation and prepayment allows us to guarantee them a spot.

Tomorrow: spec, flowchart, and wireframes!

(Click to read more)