mission x nashville k9 8las university · crowdcast visual design, branding, ui/ux, responsive...
TRANSCRIPT
LO P E Z CO F F E E S H O P
Visual Design, Branding, Logo Design,
Responsive Website
C ROW D C A S TVisual Design,
Branding, UI/UX, Responsive Website
M I S S I O N XVisual Design,
Branding, UI/UX, Marketing Materials, Responsive Website
N A S H V I L L E K 9 U N I V E R S I T Y
Visual Design, Responsive Website Redesign, Wordpress
8 L A SVisual Design,
Branding, UI/UX, Marketing Materials, Responsive Website
C H R I S S TOVA L LFive Work Samples
http://Giant.is/here • [email protected]
MissionX is a new technology intended to bridge the gap between the “Online2Offline” commerce industry. They
provide information to the consumer through mobile, and when they need it the most, at the point in time when
the consumer is formulating purchase intent. When Mission X came to me, they needed everything. They hired
me to handle branding, user interface and experience, admin interface, website design and creation as well as
marketing materials.
MISSION X
As with most projects, the idea is presented as
nothing more than a pitch of the idea and some
rough visuals. This one was pretty good though,
it wasn’t on a napkin from their favorite coffee
shop.
From my initial meeting with the
client I dove in an started sketching
some rough ideas. The client wanted
gamification and something related to
time and potentially like “X Files.”
Initial concepts for the
logo and brand were
pitched at the same
time as the initial
wireframe for the
app was completed.
From here the project continued to develop with more refinement
and additional variations.
MISSION X, CONTINUED
The final logo and brand
color were selected, and a
brand guideline was released
for use within the company.
The first test app screens
were created to see how
the color pallet could be
applied.
This is when the project really started to get fun. Moving
forward on all fronts as quickly as possible. The coders
started building the architecture based on the screens that I
created. I began skinning and finalizing the detail of each
individual screen.
MISSION X, CONTINUED
Marketing materials and sales decks were created.
And the website was
designed and created.
MISSION X, CONTINUED
MISSION X, CONTINUED
The entire admin interface was up next.
These are a few select screens from the
entire software suite.
Website sign-up screens were another asset that I created.
MISSION X, CONTINUED
After the app was developed, white label versions of the software were created in order to offer the
technology to major retailers as a licensed software.
Nashville K9 University came to me after launching their new online dog training classes. They had a workable
site but a few pages needed a major user experience and graphical upgrade. The landing page needed to be
tuned to help with conversions. In order to create a sales funnel, and having been through the StoryBrand™
training program, I used that knowledge to tell a story about the training classes. The page had many responsive
issues that needed to be corrected.
NASHVILLE K9 UNIVERSITY
NASHVILLE K9 UNIVERSITY, CONTINUED
As with any design project, I get some samples from the client on
what they want to see and then hit the sketch book. This gives me a
visual map to follow as I start designing.
Next I created an official wireframe that was presented to the client to ensure
we both agree to the overall structure and look of the landing page.
Once the wireframe is
approved, I jumped into
Illustrator and started
designing the user interaction
on the site. Once I have them
established, I do some test
coding to ensure I can code
what I’m designing
NASHVILLE K9 UNIVERSITY, CONTINUED
I created custom mouseover effects based on samples provided by the client.
One feature the client requested
was the ability to add new slides for
each of the three sliders created,
without needing to learn the slider
software.
NASHVILLE K9 UNIVERSITY, CONTINUED
In order to achieve this, I
used Super Slider Pro 3 and
created custom post types
for each of the three sliders
on the page.
In the end, the landing page was tuned to three specific breakpoints for optimum responsiveness for each device
size. A large part of this redesign was to add user interaction to the page to create points of interest as the user
browsed the page.
NASHVILLE K9 UNIVERSITY, CONTINUED
Once a site has been up and running for a while, I turn on HeatMap tracking to study what parts of the page are
being interacted with. With this data, I’m able to go back and fine tune areas of the page that may not be
converting as well as expected. A/B split testing can now occur.
NASHVILLE K9 UNIVERSITY, CONTINUED
8LAS
8las came to me needing a brand, marketing materials, a website and parts of a 3D interface for an augmented
reality design and presentation software. The project included a brand, logo, website and user interface design.
8 l a s
8LAS, CONTINUED
The 3D interface created was big and blocky as it was to be used in an augmented reality interface. It’s designed
to be easy to scroll to the next tool type. It also undergoes a color change to have a quick visual que as to what
tool you’re currently using.
8LAS, CONTINUED
A responsive Wordpress website was
created as well.
Lopez Coffee Shop came to me after purchasing an existing business so we started from scratch with a
total brand package. They needed a new brand, a website, signage and printed collateral. They wanted
something new and different for the look of the shop. They asked for Pacific Northwest and liked the idea of
a coffee totem.
LOPEZ COFFEE SHOP
I looked at coffee shop
logos that were totems
but they were just stacked
cups and coffee pots. For
this one, I decided it
would be cool to draw the
figure using the common
coffee elements.
This logo was approved without any
revisions. That doesn’t happen very
often, but when it does, you know you’ve
done your job well.
LOPEZ COFFEE SHOP, CONTINUED
The brand was then applied to all of the shops products.
LOPEZ COFFEE SHOP, CONTINUED
I also created a responsive wordpress website.
CrowdCast was a concept for a new startup. The concept was a crowd funded TV show app. The audience
contributes and the show would be produced once it was funded. This was pre-Patreon. I did the branding, the
user interface and the responsive website.
From here we jumped right in
on the user interface. They had
a team of coders standing by. I
developed the interface for
both the iPad and the iPhone.
CROWDCAST
They client had a good idea
of what they wanted when
they came to me. The logo
only went a couple rounds
of changes.
CROWDCAST, CONTINUED
All app screens were designed at both iPhone and iPad size.
CROWDCAST, CONTINUED
A responsive website
was designed creating
screens for each
breakpoint.