Override the default image zoom level and lock it to
either ‘cover’ or ‘contain’ using the icons on the right.
zoom lock
Arrow Keys
for forward & backSpace Bar
to cycle image zoom.
We empowered our client's web team to manage their own transition
to a new site by providing strategy, initial designs, style
guides, wireframes, and database migration.
ow and then, you find that you are
just one piece in the puzzle. In
AZ Redbook’s case, great execution
wasn’t nearly enough; they needed a
partner to build them the right tools.
oday, many companies have a
business model that incorporates
their website and they have a capable
web team that could use a little help
with high-level strategy, design, & tech.
ather than trying to push AZ Redbook
into letting us design & manage
hundreds of pages for them, we gave them
the plans, templates, training & jump-start
they needed for their team to succeed.
We started with an evaluation of their
site structure and user flow working
together with site analytics to discover
that most of the traffic wasn’t driving
anywhere, and huge sections in the
site were effectively orphaned from
each other without clear navigation.
After mapping this out, we came up
with a new proposal for structure and
navigation, and then collaboratively
worked with the client to discuss their
goals with possible solutions. Together,
we brain-stormed new content and
functionality to improve ad revenue
by introducing native advertising as
well as ads that track down the screen.
We then focused on simplifying 35
facing pages down to 6 main content
types, and proceeded to wireframe
those to map out versatile templates
that could be dynamically controlled
using the Wordpress WYSIWYG editor.
This emphasis on wireframes not only
allowed us to be strategic for SEO and
to establish content hierarchy that
greatly simplified the design process,
but we also mapped out unique user
journeys that considered origin,
motivations, and final directives. In
In this case, that looked like email
subscriptions, RSS feeds, online
discussion, and increased engagement
leading to site loyalty and longer view
times. Robust strategy always saves time
for everyone, reduces do-overs, and
results in just plain better work.
As is often the case, the client
didn’t have a formally
documented brand or the
budget to create a new one.
Many designers despair –
but a brand is so much more
than Pantones, fonts &
vector files. For AZ Redbook,
we recognized they had been
creating a top-notch
publication for over a decade
with a very established
look and feel. It really just
came down to capturing it and
then translating it to the
web and then documenting it.
Because their team would
be responsible for porting
over thousands of articles
and an unknown number of
pages, we couldn’t just
hand them a good design.
We had to give them the
tools to reproduce its look
and feel. For this reason,
we created a technical style
guide that could function a
bit like a brand book but
with a heavy emphasis
on codability, use of type
hierarchy & reproducible
design elements.
Today, there are too many devices with
different screen sizes and resolutions to
make it possible to design for a specific
platform. A 'Device Agnostic' approach
focuses on letting the design break
down where it best fits with the content
itself, allowing it to always looks good on
any device. In this case, a very editorial
layout had to be flexible without loosing
its original form. Designating the
progressive breakdown of columns in
each section based on content was
a straight-forward approach that still
allowed the news stories and media to
be the central focus of attention.
It’s really scary to spend
1/3 of the budget on strategy,
but by this point we already
had great wireframes, pre–
defined interaction, and a clear
style guide. Once we had
determined the look and feel
using some mood-boards, it
practically designed itself.
Well, sort-of. There were still
all of those pesky technicalities
like using a bootstrap grid and
IAB ad sizes on our home-built
ad server, but hey, that’s why
you hire a specialist, right?
Great digital design has to
focus on the intersection
between usability, brand,
and innovative ideas. On the
other hand, profitable design
focuses on keeping things
simple for the people who
actually have to execute it.
This is why we chose to
focus on using elements
that took advantage of
existing frameworks &
wordpress plugins.
One of the goals for any site
is to see people have great,
seamless, easy, and interesting
or unique interactions. I
believe that the details
say as much about the brand
as its overt promises. This
is the stage where simple
small animations, transitions
and little surprises can make
all of the difference.
There are several great reasons to
prototype: First, clients ask for less
revisions because your ideas can now sell
themselves. Second, you quickly discover
why your innovative navigation idea isn’t
being widely implemented. But most
importantly, you can actually test it!
In this case, it was just some quick
code using big images and a few hover
states and simulated menu. But a more
complex project, especially any kind of
mobile web app, can’t possibly
anticipate everything. However, you can
discover those things on the font end
by watching regular people interact with
a prototype. Click on the button above
to see the one we made for this project,
and resize your browser to approximate
how it would look on different devices.
Because, really, even experienced
designers struggle with flat mockups.
I’m going to be honest here and say that I'm not even slightly
trustworthy with a database. Fortunately, we had a few
genius in our dev-department who managed to parse through
the antiquated, painful, and weirdly modified version of
Wordpress that their site was living on. This brought over
all of the content articles and the links to their media-hosting
service. They then used some nifty home-built software to
parse all of the content to remove weird code and simplify
images, lists, and headings into something manageable that
could actually be styled properly.
After our team ported over their old site to a fresh Wordpress
Installation and our front-end developers built out the home
page and initial templates, we handed the whole thing over
to AZ Redbook’s internal team to begin the arduous climb
to complete site standardization. Will it take them a while to
comb through all of their archives and create the additional
pages they have in mind? I'm sure! Am I confident that we
just gave some a team of professionals the tools they needed
to stay relevant to their readers and move more fully into
the digital age? Absolutely!
I was the principal designer for all of the work shown unless otherwise noted, and I am the author and creator of the case studies within this portfolio. This website exists as a digital resume for the purpose of providing proof of experience in order to gain future potential work. Many of these projects were completed collaboratively in a “creative for hire” agency, freelance contract, or software company with copyright assigned to that entity or client.
I always have language in my creative contracts that I discuss with clients and employers that specifies my ability to display my work publicly. This includes concepts and processes as well as final deliverables, given that all of these are necessary to display my competence as a UX and Product Designer. I follow best practices to the best of my ability to assure that my work for clients is in compliance with copyright, either through open licensing or purchase of stock photography, mockups, icons, and other creative resources. However, I recognize that digital ownership is sometimes disputed on the internet. I do not assume legal liability for work completed in good faith on behalf of corporations and organizations, even if it is displayed here in my Resume. Even so, I take copyright and intellectual property seriously as a professional designer and photographer.
If you have any questions or concerns about something displayed here, please contact me and I will do my best to resolve them as simply and expediently as possible. Thank you!