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

Category: research

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




Login message. Settings modal. News feed.

Tomorrow: 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 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 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)