MA
2017 GRAPHIC
SAN FRANCISCO, CA
UX & UI PROTOTYPING
USER
DESIGN
MENTOR SAN FRANCISCO UX NIGHT DESIGN WEEK
2013
AIGA SF
AGAENCY
VOLUNTEER
PRESSRUN IRON CREATIVE MOBIQUITY HERO DIGITAL
CAMPING
RESEARCH
PROGRAMMING CHAIR
PRODUCTS THAT COUNT
USER FLOWS JOURNEY MAPPING
DIGITAL
SF FUN RUN
DESIGNER + GEEKS 50 SCHOOL PROJECTS EXPERIENCE IN DESIGN AGENCIES
YEARS
6 2 DEGREES CHRISTINA M CONNOLLY SELECTED WORKS BY
SELECTED WORKS BY
CHRISTINA M CONNOLLY
MASTERS OF ARTS, GRAPHIC DESIGN Academy of Art University 79 New Montgomery St. San Francisco, CA 94102
CONTACT ME christina.m.connolly@gmail.com
SEE MORE WORK christinamconnolly.com
© 2017 Christina M Connolly Written and Designed by Christina M Connolly Printing & Binding: Blurb, Inc. Typefaces: DIN & Museo Slab
CONTENTS PROJECT 1 Fitbit Kiosk Android App in Point-of-sale Display
5
PROJECT 2 Levi’s Interactive Catalog Responsive E-commerce Website
17
PROJECT 3 Desperate Redemption A Martin Scorsese Film Festival System Design
31
PROJECT 4 Wawa Rewards App iOs App Redesign
43
PROJECT 5 Taco Bell Kiosk Android App
53
DEDICATED TO My mother Anne and grandmother Regina. Forever a student.
6
MY DESIGN PROCESS BEGINS WITH DISTILLING THE COMPLEXITY BEHIND INFORMED INSIGHTS, ANALYTICS, AND CONSTRAINTS, EMPOWERING ME TO CREATE ELEGANT AND VISUALLY ENGAGING DESIGN SOLUTIONS. I’M PASSIONATE ABOUT USER RESEARCH AND PROTOTYPE TESTING TO DELIVER COMPELLING DIGITAL EXPERIENCES THAT ACHIEVES USERS’ GOALS AND BUSINESS OBJECTIVES.
CHRISTINA M CONNOLLY
PORTFOLIO
7
SCREENS
80
2 LANGUAGES
10
7 PRODUCTS WI-FI SCALE
2 UX DIRECTIONS INSTALLED IN BEST BUY & TARGET STORES
6 ITERATIONS 7 VIDEOS PRODUCT
8
PROJECT 1
4
2 CREATIVE DIRECTORS
FITBI KIOSK
PROTOTYPES
STORES
FEATURES
2000
+
FITBIT KIOSK WHO Fitbit has a range of products for people at different levels of fitness to stay informed about their step count, calories burned, sleep cycles, and more. Fitbit appeals to consumers who want to be more fitness-minded and live a healthier lifestyle.
WHAT Create a native android application for a point of sale display to assist customers in deciding which of the seven Fitbit products is right for them.
WHEN & WHERE This project was completed in 2014 at Iron Creative under the creative direction of Matt Cooke and Russell Tokar.
WHY To aid customers in their buying decision, highlight product features, define differences between products, provide a comparison tool, watch videos and understand how the trackers work with the Fitbit app.
Discliplines Information Architecture, User Experience Design, User Interface Design, Production Design.
Project type Android App in Point-of-sale Display
CHRISTINA M CONNOLLY
PORTFOLIO
9
10
PROJECT 1
FITBI KIOSK
t 1 Product
1
Screensaver
2
Home
3
Products
Fitbit Story
Zip
One
Flex
Charge
Overview
Overview
Overview
Overview
Charge HR
Surge
Overview
Overview
Features (1-4)
Features (1-4)
7
Philosphy
9
Track (5)
Features (1-4)
Features (1-4)
Features (1-4)
Features (1-4)
13
Mobile Run
Everyday Fitness (+Aria)
Everyday Fitness (+Aria)
Everyday Fitness (+Aria)
Everyday Fitness (+Aria)
Everyday Fitness (+Aria)
Everyday Fitness (+Aria)
Video
Video
Specs
Specs
Compare All
Compare All
17
Compare 2
14
Sync
Video
Video
Video
Video
Dashboard
Specs
Specs
Specs
Specs
15
16
Leaderboard/ badges
Compare All
Compare All
Compare All
Compare All
Other Apps Fitness
Application Map The information architecture was designed with a Fitbit Story section to explain the features and app that partner with every tracker. Ultimately this section was simplified and folded into the App + Dashboard section, repeated within each product.
CHRISTINA M CONNOLLY
PORTFOLIO
11
Animations Each of the circles swipe clockwise to fill in the entire cicle as the corresponding numbers and count up to the final value, like a digital stop watch.
12
PROJECT 1
FITBI KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
13
14
PROJECT 1
FITBI KIOSK
Ideation Two directions were presented for navigation styles. Shown here swiping right to left changes your product, swiping up and down changes the features within one product. The direction chosen uses swiping right to left to see features and a back to home to chose another product.
CHRISTINA M CONNOLLY
PORTFOLIO
15
16
17
18
PROJECT 1
FITBI KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
19
5 WHOLSALE
RETAILERS
3 POINTS 15
E-COMM PLATFORM TO COMPLETE
PURCHASE
WATERFALL DESIGN & DEVELOPMENT
SIGNAGE
5 OPTIONS FOR PAGE LOADING
ANIMATION
PROJECT 2
SOUTHERN
RESPONSIVE WEBSITE
25 TILES
20
1
STATES
BREAK
TEMPLATES
4 JEAN COLORS
292
3 SEASONAL CAMPAIGNS STORES
IN-STORE
LEVI’S INTERACTIVE CATALOG
LEVI’S WHO Women, men and juniors who want to purchase Levi’s products from Belk, a department store with numerous locations in the southeast.
WHAT Create an interactive catalog hosted by Belk.com (a wholesale Levi’s retailer) with the look and feel of a Levi’s branded experience with a direct path to purchase. The goal was to engage consumers, encourage exploration and elevate both the Levi’s and Belk brands. A fluid template was designed to be reused for different seasons of marketing campaigns.
WHEN & WHERE This project was completed in 2014 at Iron Creative under the creative direction of Matt Cooke and Art Direction of Tom Sears.
WHY Belk has an outdated e-commerce platform which doesn’t provide flexibility to feature a branded way to shop. The responsive site was built independently but needed to communicate with Belk’s e-commerce ecosystem to allow customers to complete their purchase.
Discliplines User Experience Design, User Interface Design, Animation, Production.
Project type Responsive E-commerce Website
CHRISTINA M CONNOLLY
PORTFOLIO
21
22
PROJECT 2
LEVI’S INTERACTIVE CATALOG
CHRISTINA M CONNOLLY
PORTFOLIO
23
24
PROJECT 2
LEVI’S INTERACTIVE CATALOG
CHRISTINA M CONNOLLY
PORTFOLIO
25
26
PROJECT 2
LEVI’S INTERACTIVE CATALOG
s o r t:
men
all
women
juniors
Cart (0)
SORT:
ALL
MEN
WOMEN
JUNIORS
BAG
1
l e v i ’ s ® c ata l o g fa l l 2 0 1 3
THE MODERN FRONTIER levi stRaUss foUNDeD His coMPaNY to oUtfit tHe PioNeeRs of His DaY. aND witH tHis New iNteRactive catalog, we HoNoR tHat sPiRit. eacH PRoDUct taKes iNsPiRatioN fRoM levi’s ® westeRN HeRitage aND tHe PRogRessive stYle of tHe BRaND. tHe ResUlt is a UNiQUe PoiNt of view tHat is DesigNeD foR tHe MeN aND woMeN of tHe MoDeRN fRoNtieR.
clIck TO ExplORE
new fit
the ultimate icon of american culture, the one that started it all.the original 501® jean. they’re tried and true, pure and simple, the one and only.
524
skinny
new fit
513
slim straight
512
perfectly slimming
505
regular
fit finder
535
legging
514
twill
“
the fit is so much better than other low-rise jeans!
boot cut
512
skinny
501
the original story
512
straight
new fit
chino
524
”
cargo
the modern frontier
511
trouser
Functionality The homepage tiles can be sorted by the filters at the top (All, Men, Women, or Juniors). When tiles were opened they took over the whole screen providing an immersive experience, depending on the tile selected users were presented with different templates.
CHRISTINA M CONNOLLY
PORTFOLIO
27
Template Design The template shown here has a color slider to feature the fit with the most colors available. Another templates featured a lifestyle hero image for a specific product, best sellers featuring the most popular fits, and then individual fits.
28
PROJECT 2
LEVI’S INTERACTIVE CATALOG
CHRISTINA M CONNOLLY
PORTFOLIO
29
30
CHRISTINA M CONNOLLY
PORTFOLIO
31
NIGHTS
FILMS
18 NAMING
EXPLORATIONS
ORATORS SONGS
SOUNDTRACK
32
PROJECT 3
FOUNDATION
YORK
13 MOVIES WATCHED
DELIVERABLES
3 56 AWARDS WON 11 18 COLLAB
BENEFITS THE FILM
NEW
DESPERATE REDEMPETION
30 LOGO
EXPLORATIONS
6
36 EVENTS TRIBECA
FILM FESTIVAL WHO Film lovers of the work of Martin Scorsese and supporters of The Film Foundation, a non-profit founded by Scorsese in 1990. Dedicated to film preservation and the exhibition of restored and classic cinema.
WHAT Create a brand and visual system for a film festival celebrating the director Martin Scorsese. The brand and visual system is based on the following thread found in many of his films. The leading character is driven to make something of himself, an incident happens with the one’s closest to him which leads him to feel guilty. He then goes on a desperate journey to make up for his transgressions.
WHEN & WHERE This project was completed in 2011 at the Academy of Art University, instructed by Hunter Wimmer.
WHY This project was a deep dive in systems design. The system is created by the sum of its parts. By developing a logo, identity, photography style, writing style, and visual style. The goal was to understand how a system can be applied to lots of different types of media both physical and digital.
Discliplines Branding, Photography, Art Direction, Graphic Design, Production Design.
Project type System Design: Poster, Ads, Tickets, Products, Schedule, Business System, DVDs & Booklet, Festival Catalog, Soundtrack, and Website.
CHRISTINA M CONNOLLY
PORTFOLIO
33
34
PROJECT 3
DESPERATE REDEMPTION FILM FESTIVAL
CHRISTINA M CONNOLLY
PORTFOLIO
35
36
PROJECT 3
DESPERATE REDEMPTION FILM FESTIVAL
CHRISTINA M CONNOLLY
PORTFOLIO
37
38
PROJECT 3
DESPERATE REDEMPTION FILM FESTIVAL
40
PROJECT 3
DESPERATE REDEMPTION FILM FESTIVAL
CHRISTINA M CONNOLLY
PORTFOLIO
41
42
PROJECT 3
DESPERATE REDEMPTION FILM FESTIVAL
CHRISTINA M CONNOLLY
PORTFOLIO
43
EVALUATIONS WAWA
LOCATIONS
310 PURPOSED
HEURISTIC 720
+
TYPES
29 HOAGIES STATES 6 RATINGS 886 TOP REWARDS FOOD & DRINK 20,000 SOLUTIONS
ON THE EAST COAST
FREE
DOWN LOADS
44
PROJECT 4
WAWA REWARDS APP
REDEEM
29TH
APPS
IN THE APP STORE
GIFT CARDS
WAWA WHO The Wawa rewards app is for loyal customers of this east coast convenience store. The app is for users who are looking to find locations, check fuel prices, pay with a gift card, and redeem rewards. Wawa creates fresh built-to-order food and beverages.
WHAT Refresh the Wawa rewards app to bring the look and feel up to date, as well as imporove the information architecture and hierarchy. Use heuristic evaluation techniques and competitive analysis to unify the design, streamline the user flow, and provide an improved user experience.
WHEN & WHERE This project was completed in 2015 at Mobiquity Inc. under the creative direction of Todd Kamps and Art Direction of Zack Dzanko.
WHY The design of the app had inconsistencies and bad reviews in the app store. Wawa needed to refresh the app to keep customers engaged and strengthen their brand loyalty.
Discliplines Heuristic Evaluation, Strategy, Information Architecture, User Experience Design.
Project type iOS App Redesign
CHRISTINA M CONNOLLY
PORTFOLIO
45
46
PROJECT 4
WAWA REWARDS APP
CHRISTINA M CONNOLLY
PORTFOLIO
47
48
PROJECT 4
WAWA REWARDS APP
Feature Design The competitive analysis of the market showed that Wawa needed to stay up to date with the competition by adding the ability to use Apple Pay.
CHRISTINA M CONNOLLY
PORTFOLIO
49
50
PROJECT 4
WAWA REWARDS APP
Design Recommendations • • • • • •
CHRISTINA M CONNOLLY
Simple sign up flow to minimize confusion Simplify the home screen once a user has signed in Remove double navigation Simplify visual queue of reward progress Allow users to get directions and call Wawa locations Simply Profile into sections to break up information
PORTFOLIO
51
52
PROJECT 4
WAWA REWARDS APP
CHRISTINA M CONNOLLY
PORTFOLIO
53
1 STORE IRVINE
5 UX DIRECTIONS 15 TACOS
4 23
UX DESIGN SPRINTS
MENU CUSTOMIZATIONS
SCREENS
17
4 PROTOTYPES 3
KIOSKS
5-BELL
SURVEY
9 HOURS
MVP APP OBSERVING ANDROID CUSTOMERS CONTEXTUAL
9 MENU CATEGORIES 1 ARTICLE WRITTEN IN FAST COMPANY
54
PROJECT 5
3
AGILE MODIFIERS DESIGN & DEVELOPMENT
TACO BELL KIOSK
TACO BELL WHO Taco Bell customers who are walking inside to place their order in the Baranca store in Irvine, CA.
WHAT Create a MVP kiosk application as part of a larger digital dine-in strategy. The kiosk allows customers to place an order, customize menu items, select dine-in or to go, pay, and stay informed of their order progress.
WHEN & WHERE This project was completed in 2015 at Mobiquity Inc. under the creative direction of Todd Kamps and Art Direction/Visual Design of Zack Dzanko.
WHY Based on the success of the Taco Bell mobile app and their taget market of Generation Z, the innovation team created a digital dine-in pilot program at the Baranca store to test the impact of customers placing their order using a digital device and a refresh in the store architectural design.
Discliplines Strategy, Information Architecture, User Experience Design, User Interface Design, Prototyping.
Project type Kiosk Android Application Design
CHRISTINA M CONNOLLY
PORTFOLIO
55
56
PROJECT 5
TACO BELL KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
57
User Journey Understanding the customers path through the store not only influenced how the kiosk was designed but also the placement within the store, maximizing space.
58
PROJECT 5
TACO BELL KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
59
60
PROJECT 5
TACO BELL KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
61
62
PROJECT 5
TACO BELL KIOSK
CHRISTINA M CONNOLLY
PORTFOLIO
63
64
65 65
SEE MORE WORK christinamconnolly.com
ACKNOLEDGEMENTS Thank you to my wonderful classmates, inspiring teachers, friends and family that helped me complete this journey to achieve my M.A. in Graphic Design.
66
UP WHIPPLE FARM
ALBANY
1793
APRIL BABY GREW
NY
VIOLIN &
IN SOFT BUILT COMPETITION BALL GYMNASTICS
DANCE
TRACK &
CHEERLEADING DRAWING
TOASTMASTERS
SUMMER
PHOTOGRAPHY
BFA
2009
FIELD
INTERIOR DESIGN
D1
MINOR IN PSYCHOLOGY
ATHLETE BIG EAST ACADEMIC ITALY STUDENT TOUR GUIDE ALL-STAR TEAM