Zeke Franco

Process

listen.

There isn’t a shortage of research methodologies, but good research comes down to listening and gaining empathy for all parties involved. This includes stakeholders, company employees who provide service and of course the user.

My goal in kicking off a project is to facilitate and promote a user experience research process with a cross functional team. Design research isn’t just about how to make an experience better it’s about discovering which user needs an experience must fulfill in order to be great. Modeling how the business’ strategies and processes can align with a user’s needs is how I design products and services that continue to create value for both sides.

  • Facilitate information gathering sessions from a diverse set of participants
  • Reframe business goals to align with user needs
  • Plan and conduct exploratory, evaluative and usability research studies
  • Analyze available data to form a research strategy
  • Use lean and agile methods in order to delivery value while researching
  • Use rapid prototyping to evaluate multiple hypothesis
Bar graph chart
Mental Model
OmniOutliner document
Content Strategy

design.

  • Sketch
  • Wireframe
  • Visual design

I believe the purpose of design is to solve problems with visual solutions. Attractive things work better, but designing (as in architecting) something for ease-of-use while emphasizing aesthetics is always my goal. I start my work off by organizing user goals into tasks then categorizing content based on logical paths users will take.

At each point in the process I try to simplify the tasks. Sometimes this is done in the visual design; sometimes it’s done behind-the-scenes by (for example) persuading a stakeholder to modify the way they approach a process on the site.

My visual design approach is largely influenced by typography and grid-based layouts. Content is the most important part of a site: making sure content is visually organized in an intuitive manner is crucial to a successful design. I use graphical elements to emphasize importance and to create a visual hierarchy. Imagery is carefully selected to elicit an emotional response from the user.

Visit my DESIGNS section to view my work.

build.

Hand-Crafted CodeNo two people will mark up a site exactly the same way, but markup should follow a logic. The core principles of my development style is to be semantic, adhere to standards and to be forward-looking. I’ve highlighted a few areas of consideration I have when I’m developing markup.

Markup with Meaning

Thinking about each element used from the point of view of semantics:

  • I make sure to pay attention to every detail of the markup. Such as when to use a:

    • <div> vs <section>
    • <strong> vs <b> vs <span class="bold">
    • <dl> vs <table> vs. <ul>
  • I’m a huge supporter of microformats, so I use them whenever applicable
  • I make sure the content makes sense when JavaScript is disabled or when the page is just raw HTML
  • Choosing properly named IDs and classes such as using #primaryContent rather than #leftColumn or .highlight rather than .yellowBG

Markup Flexibility

Markup and styles that are usable by other developers and content creators:

Flexible Height and Width Backgrounds

Making sure containers of content are height and/or width flexible when appropriate—even when they have background images.

Frameworks, Great for Teams

Sometimes I’ll use a framework such as the 960 Grid System or jQuery to make development faster and make code cleaner, especially when working with multiple developers. It can create a concise way to lay out elements with minimal code overlap.

CMS Friendly CSS

CMS user-friendly classes like .alignleft, .aligncenter, .alignright, .unem, and .break aren’t the most semantic in nature, but when you have nontechnical users who need to use a CMS via a WYSIWYG interface to publish content, these classes can result in a better experience for the publishers.

Compatible

I have vast amount of experience working with IE6+, Firefox, Safari, Chrome, Opera and more recently mobile devices.

  • Feature detection is an important part of being unobtrusive. I use Modernizr when working with HTML5 and CSS3 to make sure capabilities and features degrade gracefully.
  • I make use of conditional comments and progressive enhancements to deliver great experiences tailored to the user’s browser.

*This site is meant to showcase many of the new features of CSS3 and HTML5. Therefore not all browsers may be supported. This site tends to be playground for experimental techniques.

Accessibility

Accessibility shouldn’t be ignored. Regardless of the project’s constraints I make sure to create my markup so the basic needs of all users can be meet.

Screenreader Users

  • Alt tags with appropriate descriptions WCAG 1.1.1
  • Proper heading hierarchies and label usage WCAG 1.3.1
  • Skip to links WCAG 2.4.1
  • Unobtrusive JavaScript (This doesn’t make a site accessible, but it’s a good start ARIA is used when possible)

Keyboard Users

  • Make sure hover and click events map to focus and keyboard events WCAG 2.1.1
  • Creating a logical tabbing order so that the whole site can be navigated by just using the keyboard WCAG 2.4.3

Other Areas of Accessibility

  • Captions for the hearing impaired. I’m generally not in control of video content, but I do my best to persuade the business to provide captions. WCAG 1.2.2
  • Providing cognitively appropriate content. For example, facilitate proper read aloud of abbreviations WCAG 3.1.4
  • Three flashes or below per second WCAG 2.3.1

evolve.

Roadmap

Evolving a site is crucial. Sites often stay stagnant for far too long. Long awaited updates get rolled up into massive redesigns. Redesigns aspire to add many new “shiny” features as well as a new visual design while trying to maintain all the features of the current site. In many cases the stale content and legacy information architecture will be left untouched.

Ultimately time becomes a constraint and the majority of the time is spent on visual design for the purposes of aesthetics rather than solving problems. The new features often feel shoe horned into place because they weren’t evolved holistically. I make sure to take the time to educate marketing and IT teams about the value of constantly improving the business’s online properties. A key tool to keep a Web site fresh is to create a road map for the business.

After the listening stage has been completed I like to create a roadmap with the business to communicate where the user experience of the site should be in a determined timeframe. The timeframe depends on the business. For startups it might be three months to a year. For a larger corporations with multiple sites it could be one to three years. The roadmap will take all the best ideas and break them up into iterations.

The iterations start with the current site design and add or rebuild parts of it until it matches the end goal. The hardest part for most teams is to decide which features to put in each iteration. I let the research we’ve gathered from user testing, mental models and web site analytics determine the prioritization of ideas. By evolving the site it allows the business to learn how each new feature or design tweak effects their users and the business.