David Bazile

Personas

The main challenge designing the app was trying to meet the conflicting expectations of two very different personas:

• A young “wired” couple with lots of smartphone experience who expects the app to meet the same level of fluidity and aesthetics as apps they’ve used in the past. Automation and exploratory search are high priorities for this persona.
• A retiree with very little smartphone experience who expects an uncomplicated interface for a system whose use is now compulsory. He will not want anything “magic” happening, which rules out automation and he will not have any desire to poke around the application “looking” for things.

User Journeys & Wireframes

I mapped out two user journeys for each persona:

• Setup, in which the persona walks through their first interactions with the app, from installation, through registration of accounts, and finally to completion of the persona’s first task (i.e., adding funds to an account)
• Maintenance, in which the persona performs their primary tasks. Along the way, unobtrusive affordances for enhanced functionality were presented for easy discovery.

Mantra: Keep the "Simple Path" clear

With Henry in mind, I defined a concept I called the “Simple Path”, which is effectively a beeline from the central hub view to the app’s primary purpose: adding funds to an account.

Henry’s primary focus would be to just open the app, check his balance and possibly add funds without being bothered by whichever artistic idiosyncrasies an app vendor decides to inflict upon him. With that in mind, it made sense to keep the account balance and a direct shortcut to adding funds front and center. On the way there, he may see something he wants to explore, but it won’t obstruct his goal.

Samantha and Jorge on the other hand may manually add funds, but if they use auto-refill (which we expect), the first view they see will be the entry point for exploratory search (i.e., the lunch menu) which they are very likely to engage in.

• User Journeys (PDF)
• Wireframes (PDF)

Background

Here is the design used for the “human version” of this site from 2014–2015. My intention for this over-engineered piece of work was to learn EmberJS and Bootstrap.

The original code has been bundled and archived into a GitHub repository.

Mockups

• Mockups (.PDF)

Background

Here lies a previous design of this site. My original intent was to build a site without any frameworks or libraries—just vanilla HTML, CSS, JavaScript and Python. I almost pulled it off, but ended up using highlight.js and Python Markdown because as it turns out, hand-rolling your own lexer for 7+ languages isn't exactly a walk in the park.

I started out intending to support as far back as IE8, until I realized that I do enough of that at work and life is too short.

The original code has been bundled and archived into a GitHub repository.

Site Map (.PDF)

I designed this site map up front in order to build my URL strategy. I later learned that this is actually part of the design process, not just some incidental action.

• sitemap.pdf

Draft Mockups (.PDF)

This was the first shot at designing the page. I ended up blending parts of this design into the final version.

• mockups-draft.pdf

Final Wireframes (.PDF)

This is what I settled on for the design.

• wireframes-final.pdf

Background

This site and its name were heavily inspired by Mega Man Battle Network series, which around the time my friend pitched the site to me was blowing up in popularity online.

At this time, I was learning about advanced CSS 2.0 techniques.

• Prototype
• Mockup

Background

Blogs were exploding in popularity around the time a friend of a friend asked for this design for her own blog.

Unfortunately, all I've got left from this project is just the mockup as I don't believe I ever properly backed-up the prototype.

• Mockup

Background

I got my start in web design/development building web pages for the myriad creative types of the online Mega Man fan community: fan-fiction authors, sprite artists, illustrators, self-appointed anime/game news correspondents, community forum moderators, etc. This is one of the last projects I did for my old crew before I joined the military.

Unfortunately, all I've got left from this project is just the mockup as I don't believe I ever properly backed-up the prototype.

• Mockup

Background

I made this design for a Return to Castle Wolfenstein gamers' group I was a member of. This was a pretty straightforward layout with a minimal amount of PHP for server-side includes for itemizing directories of thumbnails and screenshots.

I bumped into these guys back when I was averaging about 15 hours a week of RTCW. I'd hang out on their server because it was always well-coordinated, organized and people actually contributed to the match instead of just running around aimlessly. Impressed by my mad medic skills and because I was there all the time anyway, they asked me to join up. After I went to their website to register, I saw what they had up there and offered to spiff it up for them.

I believe they went live with the redesign shortly after delivery.

• Prototype

Background

This mod was based on the PC-based first-person-shooter Return to Castle Wolfenstein. The team was attempting to use the RTCW engine to write a campaign mission storyline. The goal here was replacing the HTML 3.0 monstrosity that was their original site to help build hype for the mod.

So what happened?

I'm pretty sure this project ended up being vaporware and was never released.

Background

Implemented with limited CSS knowledge and the ubiquitous table-based layout, getting that goon's arm to properly float off the main body made this relatively simple design a big pain. Looking at this code to package it up makes me cringe. I'm still trying to figure out how I made this work all those years ago.

This gamers' group was centered on the Tribes series. I don't know much about any of the games as I never played any of them but this was made as a favor for a friend.

What the heck is d3fect studios?

In case you're wondering, d3fect studios was my design nom de plume back then, .com and everything! Of course, with the clientele being what it was (i.e., broke teenagers without the means to pay), I never charged anything and it went nowhere. Oddly enough, a squatter picked it the domain name within days after I let it expire...

• Prototype

Background

For those not in the know, Hidden Palace Zone is the name of a stage from the Sonic the Hedgehog series. It also happened to be the name my friend decided on for his fanfic repository.

The “chaos gems” in the background were actually the result of a completely serendipitous mistake I made in a 3d modeling program I was messing with at the time. I just adjusted the HSB values for each in Photoshop, then stuck em in the background.

I committed my biggest web development atrocity on this project—using Flash for the navigation items. The nav made a little bleep sound when you clicked on one of the elements. This, of course, does not fall back to anything in the event Flash isn't installed, and the list of URLs is hardcoded into the .SWF file. In my defense, I was 16 and Progressive Enhancement wouldn't pop up on anyone's radar until a few years after I delivered this.

• Prototype