Page 1

1

Kelley


Nike Surf Application Ux / Ui / Visual

Challenge Nike is on the forefront of using technology to help athletes achieve. Unfortunately, their presence in the surf community hasn’t been as smooth as in other markets. Bringing a unique tool for surfers to accelerate their learning will earn Nike a greater market share with surfers. Good waves are something divine. Many meteorological forces have to combine in harmony to create the perfect conditions. As a surfer, predicting when these conditions will come together is a full time job. In order to ease this process, I needed to create a system of easy to use infographics that move seamlessly through users’ digital touchpoints.

Solution The main goal of Nike Surf is to provide surfers a useful tool not found anywhere else elevating Nike’s standing in the surf community. 1. Incorporate Nike’s branding with layers of modern typography, bold color, and desaturated photography of athletes. Instead of using full black and white photography like in Nike’s running app, I adjusted the color palette to a cooler blue to reflect the aquatic nature of surfing and slightly differentiate between the two apps while staying cohesive. 2. Create uniform experiences when interacting with the application while keeping touchpoint differences in mind. 3. Use GPS functionality to start the app automatically when the user’s phone is at a surf destination and generate report conditions tailored to that specific location to reduce the steps needed and simplify the use of the app. 5. Allow users to rate each session to create a useful catalogue of what conditions work best for each spot. 6. Generate alerts based on past sessions to alert user to good conditions coming together.

3

Kelley


Target Audience Making sense of it all The amount of information and its constant variability can be a stress point for surfers trying to find good waves. In order to figure out what functions to prioritize and when to deliver them, I needed to gain a deeper understanding of my users.

What makes the best surf session for you?

What is the most important elemental condition for you?

What device do you check the surf report on?

What would you say your level of skill at surfing is?

Wave Quality

Tide

Mobile

Intermediate

Surfing with Friends

Swell

Tablet

Advanced

Less Crowds

Water Quality

Desktop

Beginner

Beautiful Weather

Wind

I created a simple questionnaire that I asked 40 surfers to fill out to gain more insight into who they were and how a surfing application could help them. Demographic Surfers ages 18 to 35, located in San Diego. These surfers are actively using services like Surfline to predict future surf. They either experience the sport on a very regular basis devoting much of their time to it or are working professionals who are limited on time and need to capitalize on each surf session.

Troy’s User Flow

Session Rating

After compiling the information from the surveys, I was able to start the information architecture and develop wireframe iterations. To initially test these, I introduced a couple personas to better understand different user’s journeys. Based on the persona of Troy, I created a user flow of what would happen after a typical surf session for a UCSD student using Nike Surf.

1

In Session 1

3

Countdown to the next set of waves and direction of swell.

NORTH SET

3:25 120

#

10

Next Set

2

How was it?

Swell Direction

Direction swell is coming in, in relation to where user is facing. 3

2

Heart Rate

Displays the users heart BPM. 4

4

Wave Count

Places dot on map for users current location. 5

GPS Session Que

If you are parked near the coast for an extended period of time. .

5

5


Troy Sanders Age: 21 Student

“ I just like dropped in and totally smacked the lip like ‘whipooow’.” Bi-Weekly Surfer Troy is a student of computer science at UCSD. He picked up surfing three years ago after he moved to San Diego from Oklahoma. He is looking to progress his surfing but with a busy work and school life needs to schedule his surf sessions at the most optimum times. Pain Points • • • •

Session Log Filter Choice Active

Session Rating 1 1

Beach Location

Blacks Beach

Map of Break

Shows different peaks and users location every time a wave is caught and ridden.

2 3

Session Rating

Personalized categorization of the conditions were.

Tide Detail 4

Allows users to switch locations if close to multiple breaks. 2

Session Timer

How long the surf session was. 4

5

6

7

8 3

Outdated Technology Boring Experience Low Tide Missing Swell

2:25 12 300 25 120

9

5

Wave Count

6

Longest Ride

7

Fastest speed

8

ft

1 1

Slide function to see tide chart in detail over time.

5 A.M.

5.8

Selected time/tide

2

Chart

Chart of selected data. 3

User can select past, present or future tides.

2

Average Heart Rate

Days of the Week

4

Other Logs

View other forecast logs.

mph 3

bpm

4

5

Kelley


7

Kelley


9

Kelley


11

Kelley


Kleenex : Comfort When You Need It Branding / Ux / Ui

Challenge Kleenex is the brand leader in facial tissue products, but it is also a premium product costing more then its generic competitors. In order to increase sales, Kleenex must show how they are better than the generic brands.

Solution The main goal of “Comfort when you need it” is to associate Kleenex’s premium quality with comfort. The campaign will show that the premium quality offers comfort to everyone, including tough guys. Versatility will be shown through the comic use of stereotypical tough guys and what Kleenex product they prefer. After checking out tough guy personas on the mini-site, users will be prompted to design and send customized Kleenex boxes to tough guys in their own lives.

Demographic People, ages 25 to 40, living in urban areas who opt for the generic brands because of the assumption that all facial tissues are created equal and therefore provide equal comfort.

13

Kelley


Interactive Video The intro will consist of rotating stills of tough guy profiles each with a quick sound bite to intrigue the user to see more. Once the user picks a profile, a short video will play ending with a call to action, using the voice of the tough guy, to explore more by clicking and dragging or swiping the Kleenex. User’s interaction with the Kleenex will lead to a more in depth profile of the tough guy including their favorite Kleenex product, customized Kleenex box, and the loved one who created custom comfort for them and why. This will lead the user to several calls to action to go ahead and create custom comfort for a loved one of their own.


15

Kelley


Tough guy’s customized comfort Kleenex box.

Loved one who created the customized Kleenex box for their tough guy.


19

Kelley


Otis: Friends of the Furry Illustration / Branding / Packaging / Ux

Challenge Otis, a direct to consumer pet goods company, needs to differentiate itself from the big box competitors where most people purchase their pet goods from.

Solution In order to differentiate itself Otis will compete on quality rather than price. To communicate this artisan experience I utilized Archer to add warmth and hand modified Marvin paired with a loose illustration style to add fun character to the brand. Delivering product straight to the consumer is another differentiation, in order to execute this a strong e-commerce experience was created.

Demographic Women ages 25 to 40, living in an urban area who are upper to middle class. These will be people who actively participate in crafting or following craft makers, interacting with pinterest and instagram on a very regular basis.

21

Kelley


Market Position Crafting an Unique Experience Educated consumers are for the most part fed up with inauthentic mass produced brand experiences. The Internet has really shaken up many market places allowing customers wider choices and more information about the products and companies they are endorsing. This shake up has driven a small business renaissance whether it be Etsy or craft made beer, people want real experiences made by real people. Although a booming market untouched by economic turbulence the pet industry has not gathered much movement in the crafted experience direction. Most people still buy mass produced pet products with little or no information as to where the products are made and with what materials. Their branding is often clunky, with a very unrefined use of color and form, feeling very corporate and cheap.

Percieved Brand

Percieved Brand

Percieved Brand

Price Quality

Price Quality

Price Quality

Percieved Brand

Percieved Brand

Percieved Brand

Price Quality

Price Quality

Price Quality

Percieved Brand

Percieved Brand

Percieved Brand

Price Quality

Price Quality

Price Quality

Otis position is targeted specifically at Millennial and Gen X women interested in artisanal goods. In order to communicate a hand made artisanal feel through the branding I created icon systems, patterns, and the logo itself in a loose illustrative style. To elevate the brand I utilized a muted color palette to give it some nuance and stand apart from the primary palettes of the competitors.


Otis Identity Development

23

Kelley


25

Kelley


27

Kelley


29

Kelley


31

Kelley


Volkswagen California Van Mini-Site Ux / Ui / Branding

Challenge Volkswagen’s new California van is the latest generation in the VW van heritage. Unfortunately, it’s such a large departure visually from the classic line that it has been slow to gain the cult-like sales its ancestors have relished in.

Solution Create a mini-site highlighting the heritage of the van line, connecting it with the California van and showcasing Volkswagen’s innovations that make the new van worth having over the older models. History of the van’s iconic usages will be discovered by the user as they navigate through the dynamic journey the site creates, echoing back to the van’s roots in adventures, and eventually leading them to the California van with a call to action to purchase.

Demographic The core Volkswagen demographic is drivers ages 18 to 45, about equally divided between women and men, with average household incomes of $50,000. They are smart, confident, independent, active people who enjoy driving and who live life to the fullest.

33

Kelley


Fahrvergnßgen Driving Pleasure The California mini-site is a series of vignettes illustrating a lifestyle of freedom, adventure and travel associated with the Volkswagen van’s heritage through an immersive experience. An interesting way to tell this story was by using the site navigation. By bringing the user horizontally through the pages they become part of a journey from the van’s classic heritage to the new California line. The landscapes blend seamlessly together just as the transition from the beloved classic to the new van.


35

Kelley


37

Kelley


41

Kelley


Innovation A core value of Volkswagen is being at the forefront of innovation. In order to give a more immersive experience and reference Volkswagen’s innovation the key features are shown through an interactive 360-degree video. When a hotspot is triggered it will open a secondary window showing a short video about the feature.


43

Kelley


Tijuana Te Quiero Illustration / Print / Social Media

Challenge Changing political climates have put a strain on an already problematic border crossing in San Ysidro. Many people rely on this crossing daily but go largely unrepresented and misunderstood in the U.S. leaving the experience an inhumane and sometimes deadly one.

Solution Tijuana Te Quiero brings much needed aid to the hundreds of thousands of people crossing daily. To increase awareness of the cause in a cost effective way, they use grassroots distribution of information through social media, stickers, posters, and shirts. A strong branding system will be used to show TJTQ’s positive positioning through fun illustration and color, balanced by a credible looking, minimal style.

Demographic People ages 18 to 35 living in San Diego who are socially conscious but may not be aware of the plight of crossing the San Ysidro border.

45

Kelley


TijuanaTeQuiero #BorderUnity

47

Kelley


Google Maps Cycling Ux / Ui

Challenge Google Maps is designed first and foremost for use navigating in a car. Small text and too many options on the screen make a quick read difficult while cycling, creating unnecessary safety risks. Another issue, is the pure focus on the utilitarian aspects of biking, when many use bicycles as a form of recreation. The experience of riding a bicycle is more than just A to B— by addressing the specific experience of cycling, Google can create a safer and more enjoyable user interaction.

Solution An interface designed with larger type and icons means less time looking at your phone and more time on the route ahead. By understanding what information is most important to a cyclist at specific points in their route, I was able to hide extraneous information from complicating the interface. When users reach specific points where more information is necessary, in-app messaging will deliver the content for only as long as it is needed. Testing of different interface designs yielded the best visibility while still staying true to Google’s iconic branding. Safety is the highest priority but offering high quality user experiences is a close second. New route filtering options will bring a richer experience to what is now a purely utilitarian interaction. Generating users’ routes to a specific experience of their choosing, such as a quiet relaxing ride down sunny side streets or a guided tour of points of interest, will give greater and more fulfilling interactions.

49

Kelley


Target Audience Making sense of it all Google Maps is more tailored towards automobiles, but with increased environmental consciousness globally, more people are turning to bicycles as a means of transportation. The redesign of Google Maps bicycle routing will focus on increased usability for riders but, most importantly, increased safety for riders.

100

*Sandra’s stats compared to 30 others surveyed

75

I created a simple questionnaire that I asked 30 people to fill out to gain more insight into who they were and how a cycling application could help them. Demographic Because Google Maps is such a widely used utility, the target audience is huge—anyone who has access to a smartphone and owns a bicycle will find this redesign useful. These users will vary from those who rarely use the web to the most savvy users, spanning a variety of locations. Because of this large range, intuitive options will be extremely important.

50

25

0

Sandra’s Flow Sandra is going out to explore her new city. She has a destination in mind but is willing to take her time getting there to learn more about San Diego. She decides to use the route filter option and selects to have Google inform her about points-of-interest on her ride to Blick Art Supplies. The directions take her to the most relevant POI’s without taking her too far off her initial route to Blick.

.

Mobile Usage

Cycling Time

Safety Concern

Projected Usage

Direction Savy


Sandra Werthington Age: 45 Lawyer

“ Theres nothing like a

San Diego sunset from the seat of your bike.” Target Use : Leisure Sandra is a real go-getter and just moved to San Diego from Chicago. She’s relatively active and is looking forward to being able to explore her new city while enjoying its beautiful weather. But as a new transplant she doesn’t know many people who can show her around, which leads her to Google Maps as a means to navigating. Pain Points • Complicated Options • Hard to Read Type • Hills • Road Hazards

51

Kelley


Current Application

Updated Application


53

Kelley


Peek and Pop function allows user to activate route directions much more efficiently.


55

Kelley


Selected Marks Transit - New York Craft Beer This mark pulls from the rich heritage of the subway system and Swiss design.

Sex With Strangers - Romantic Play The mixing of typography represents the many odd characters and how they interact with each other.

Noteworthy - San Diego Craft Beer Beer informed by classic blues with Clarendon and a hop music note, hearkening the golden age of records.

Fourth Wall - Play House This mark references breaking the fourth wall through its broken lines and structural feel.

Disgraced - Dramatic Play Contrasting weights show the characters changing plot line as the downward facing ‘A’ foreshadows his eventual fall from grace.

Madame Wongs - Kitsch Restaurant This dimly lit Chinese American restaurant serves up Orange chicken alongside potent Tiki drinks—it owns its kitsch with this mark.

Caputo Hair - Hollywood Barber A well groomed beard illustrates what this shop is about.

Into the Beautiful North - Western Play The slab serif hint at Western themes while the script balances with a feeling of light and beauty.

Otis - Pet Supply Hand modified and funky, representing a brand focusing on hand made fun.


57

Kelley

Sean Kelley Portfolio 17  

Graduating portfolio from SDCC graphic design program.

Read more
Read more
Similar to
Popular now
Just for you