mission x nashville k9 8las university · crowdcast visual design, branding, ui/ux, responsive...

22
LOPEZ COFFEE SHOP Visual Design, Branding, Logo Design, Responsive Website CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website NASHVILLE K9 UNIVERSITY Visual Design, Responsive Website Redesign, Wordpress 8LAS Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website CHRIS STOVALL Five Work Samples http://Giant.is/here • [email protected]

Upload: others

Post on 28-Jul-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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]

Page 2: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.”

Page 3: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 4: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 5: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

Marketing materials and sales decks were created.

And the website was

designed and created.

MISSION X, CONTINUED

Page 6: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.

Page 7: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.

Page 8: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 9: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 10: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

NASHVILLE K9 UNIVERSITY, CONTINUED

I created custom mouseover effects based on samples provided by the client.

Page 11: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.

Page 12: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 13: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 14: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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

Page 15: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.

Page 16: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

8LAS, CONTINUED

A responsive Wordpress website was

created as well.

Page 17: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

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.

Page 18: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

LOPEZ COFFEE SHOP, CONTINUED

The brand was then applied to all of the shops products.

Page 19: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

LOPEZ COFFEE SHOP, CONTINUED

I also created a responsive wordpress website.

Page 20: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive 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.

Page 21: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

CROWDCAST, CONTINUED

All app screens were designed at both iPhone and iPad size.

Page 22: MISSION X NASHVILLE K9 8LAS UNIVERSITY · CROWDCAST Visual Design, Branding, UI/UX, Responsive Website MISSION X Visual Design, Branding, UI/UX, Marketing Materials, Responsive Website

CROWDCAST, CONTINUED

A responsive website

was designed creating

screens for each

breakpoint.