Katie O'Brien Graphic Design Portfolio by katieob.design

Website www.katieob.design Email katieob.design@gmail.com Phone (603) 268 - 1856 Linkedin linkedin.com/in/ katie-obrien-design/

A little about me… Hello! I am Katie O’Brien and I’m a graphic designer. I got my start in creative design early on with a love of drawing, painting and creating. My interest in design and innovation initially drew me into Engineering, but I quickly found my passion in Graphic Design that combines my love of fine arts and passion for the design process. I’m proficient in print and web design; working with the Adobe Creative Suite, HTML, CSS and other web design tools like Squarespace and WordPress.

01. LUNA: DAIRY FREE PRODUCTS BRANDING, PACKAGING, ADOBE ILLUSTRATOR LUNA is a line of sustainable, vegan ice cream and other dairy-free products that cater of different dietary restrictions This fictional company is allergy and environmentally friendly and they’re targeting consumers who have limited options on what they can eat and who are conscious about their carbon footprint and want to live a green, sustainable life. Most likely the target audience for this brand will be individuals who are ages 20 to 35 and have some disposable income because vegan and sustainable products are slightly more expensive. These products would be sold in high-end grocery stores with many specialty foods.

Illustration was a big part of my process for this project. I used an illustrative badge logo for the LUNA brand and each package had a similar illustration and pattern that wrapped around it. The products are color-coded and the illustrations reflect the ingredients that go into the product.

why choose

Luna? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

dairy-free vanilla

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

Ingredients:

Oat base (water, oats), coconut oil, sugar, dextrose, glucose syrup, low erucic acid rapeseed oil. Contains 2% or less of: mono- and diglycerides of fatty acids, locust bean gum, guar gum, natural flavor, sea salt, vanilla seeds.

why choose

dairy-free chocolate

Ingredients:

why choose

dairy-free strawberry

Ingredients:

Pictured here is the complete line of LUNA products. Included are three flavors of ice cream and three flavors of yogurt, a carton of milk, and a package of butter. Each product stands apart with a unique pattern and color scheme but it’s still obvious that each package is part of the overarching LUNA brand. I created brand guidelines - also pictured on the left - that I applied to each product so everything remained cohesive. There is a list of brand colors, that can be used as background or accent colors on anything and then specific product colors, which each apply to a particular packaging design. The typefaces I used were Cherry Swash for the display text and Roboto for the body copy. The badge logo and LUNA type mark were created solely by me, not using any already established fonts for the letterforms.

02. PEGA NARRATIVE ILLUSTRATION LIBRARY BRANDING, ILLUSTRATION, ADOBE ILLUSTRATOR, CORPORATE Expand upon and organize Pegasystems modular illustration library. Illustrations are an important part of Pega’s visual brand, designers can pull illustration elements from a modular illustration library to create unique compositions & designs. I expanded upon the already existing library by illustrating a larger range of facial expressions and other additional components.

It was important to work within the confines of Pega’s already established visual style so that the new additions to the library blended seamlessly and fit cohesively into the brand. I also helped organize all the illustrations into one Adobe Illustrator file to make it easier for other designers to grab elements of the illustrations and use them as appropriate.

I started with six faces: three male and three female. I expanded those into a broader range of facial expressions including a basic blank expression, two different smiles, and a curious, inquisitive expression.

In addition to the facial expressions and illustrations of people, there are also various props and objects in the illustration library. I created seating that can be rotated depending on what angle a person is being viewed and various props to represent an office setting or different industries that Pega serves.

03. PADDLING PARK BRANDING, TYPOGRAPHY, WAYFINDING, ADOBE INDESIGN, ADOBE ILLUSTRATOR The goal of Paddling Park was to design a typemark for a fictional company that inspired a brand. It was my early process and research that helped me along and solidified my design. Because I was supposed to make up the company for this project I wanted to explore my options and research potential ideas and inspiration.

I decided on creating the fictional company Paddling Park - it’s a nature park that preserves ducks and their natural habitats. I designed the logo on Illustrator wanting to draw people in and make it seem like Paddling Park is a great place to come to relax, learn or become more connected with nature.

LOGO

TYPEFACES

COLORS

Syntax ABCDEFG ABCDEFG ABCDEFG MOOD

Beacon

t Stree Liberty

et Stre

L i b e rt y S t r e e t

Thomas E Collins Memorial Bench Knope Scenic Overlook

Small Pond

Wa s h ingt on S treet - walking trail

Welcome! Park Rules Be kind & courteous to others The park is open from until 9pm No weapons, alcoholic beverages, open flames, or glass containers No swimming, wading, or boating in any body of water Absolutely no injuring or disturbing any animal, setting any animal trap or snare, or having or taking the possession of any animal, bird, nest, or eggs not one’s own. Do not pick any flower or plant For more information please contact Paddling Park at (603) 555-1234 Leave no trace

tre

- designated parking lots

Leach Bench

et Stre e r t Cen

Lovers’ Bridge Leach Bench

Wa shi n g t on S treet

Lovers’ Bridge

hit

Paddling Pond

et Stre tre n e C

Jobert Bridge Visitor Center

- point of interest

I created wayfinding signage, including a detailed map of the property, and business cards for Paddling Park. Sticking to the brand guides I created (shown on the previous page) for both assets, I was able to ensure that everything looked cohesive and part of the same brand.

Trolley Grove

Paddling Pond

tre

Sunset Field

Knope Scenic Overlook

Small Pond

Jobert Bridge Visitor Center

h it

Thomas E Collins Memorial Bench

Trolley Grove

et Stre

Liberty Street

Sunset Field

Beacon

t Stree Liberty

Cameron Corvus Park Ranger

Tel: 603 - 555 - 1234 603 - 555 - 1856 Email: c.corvus@paddlingpark.com Web: padddlingpark.org

Address: 2021 Katieo Road, Concord RI 03304 United States

04. GRANITE MINI-ZINE EDITORIAL, PHOTOGRAPHY, ADOBE INDESIGN Granite is a fictional mini-zine about New Hampshire (the Granite State). Each issue focuses on a different aspect of the state whether it be a geographical region, town, attraction, historical aspect, etc. The May 2019 issue was about the state’s capital, Concord, which happens to be where I grew up.

The masthead for the cover incorporates the state’s famous symbol, the Old Man of the Mountain. I also used original photography taken throughout Concord for the article which explores 5 fun things to do in the city during the summer.

I was inspired by my home state of New Hampshire. The audience of this piece would be people like me who are from New Hampshire or have a personal attachment to it. I wanted all my design decisions to be inspired by the state and to speak to the state’s history, land, and charm.

The two articles featured are about fun things to do in Concord during the spring and summer and the history of the state symbol the Old Man on the Mountain. For both these articles, the cover, and the table of contents I used all original photography and artwork. For the JWU ad in the back, I was given the JWU brand style guides and approved stock photography to use.

05. NATIONAL PARK TYPEBOOK PRINT, ILLUSTRATION, ADOBE INDESIGN, ADOBE ILLUSTRATOR The National Park Typeface Booklet is a visual examination of the National Park typeface which was created by the Design Outside (DO) Studio in 2012. The type book was created in InDesign with elements brought in from Illustrator and goes in-depth into exploring the history and anatomy of the typeface while celebrating America’s National Parks. A big source of inspiration for this piece is the WPA-style National Park posters designed in the mid to late 1930s. They always catch my eye and I’ve always wanted to design a project that draws heavily from that art style. To do my illustrations for the type book, I researched on the National Parks and those WPA posters before I started sketching.

Printing was one of the biggest challenges I faced with this project. It was challenging to get everything to line up exactly the way I wanted because the dye-cut was so customized. My process included a considerable amount of of trial-and-error and prototyping. I spent more time sketching out my ideas by hand and prototyping them with copy paper than I did using design software.

The booklet was bound together using saddle stitching and most of the pages were printed on high-quality cardstock to preserve the integrity of the illustrations and the vibrance of the colors. As you flip through the book you work your way through the illustration, with a different park featured on each page. I printed every illustration and created a dye-cut, then using the layering effect to add texture and make the graphics pop off the page. However, for the cover, I printed on transparent acetate so the reader would be able to see into the first page of the booklet.

While researching this typeface, I was inspired by how the designers worked so closely with nature and the outside world during their process. I think it’s a really good example of how designers need to gather inspiration from all outlets. While Pinterest, Behance, and Dribble are great resources, I think it’s important to remember that inspiration can come from anything - especially nature and the world around us.

06. PEGA GLOBAL INCLUSION AND DIVERSITY BRANDING, PRINT, ADOBE INDESIGN, CORPORATE, REPORT The Inclusion and Diversity report is a Pega branded document that outlines the company’s vision for inclusion and diversity, their initiatives, and the recognition they’ve received. This was a large project with a number of moving parts. I worked closely with the global inclusion and diversity team to make sure that this document met all their needs and that it conveyed the right message for their team.

guidelines. I also made sure to follow Pega brand guidelines very closely. I was able to use stock photography to compliment the body copy on almost every page and made sure that all information was readily displayed and available to the reader.

As it is a large document that contains multiple different sections, it was important to maintain a visual style that stayed consistent throughout the entire asset. I created a grid template for the the document so each page fit consistently and adhered to Pega brand

It’s a live document that needs to be updated routinely as information changes and subsequently, has a lot of edits. It was important that I was able to take feedback from the client and establish a dialogue in order to represent their vision accurately.

Scan here to visit the full Global Inclusion & Diversity asset on pega.com.

07. 8 FOODS TO FIGHT STRESS EDITORIAL, ILLUSTRATION, PHOTOGRAPHY, ADOBE INDESIGN The goal was to take a magazine article and design it to fit into two very different genres of magazines. The article I chose was called 8 Foods to Fight Stress by Ardita Shah. There isn’t much copy and it has multiple sections for each of the foods. I thought this would provide an interesting challenge: trying to fill the magazine spread and also making it look like a real magazine article without long columns of text. I took inspiration from two styles I called the “self-help” magazine and a “lifestyle” magazine.

I found, through my research, that the self-help magazine had a very clean and simple aesthetic. Magazines like Breathe and Flow inspired the use of lots of columns and sans serif fonts in their designs. The text in these types of articles often adhere strictly to a grid and and use plenty of illustration to compliment the copy instead of photography. Meanwhile, I found lifestyle magazines like Women’s Health and Oprah tend to be overwhelming and eye-catching. Photography is the core of the visual style andmuch of the copy is pressure-inducing and evokes a feeling of FOMO. There are a variety of fonts creatively paired together and it tends to break the grid more often.

This is the lifestyle magazinein which I used a variety of different fonts and two columns of text for the main part of the copy. The introduction and the conclusion paragraphs break the grid and make the design more dynamic. I also used colorful photography as the eye-catching visual that takes up most of the spread with the article title being a focal point.

This is the self-help style of magazine and I took a simpler, calmer approach. All the text from the article title, to the subheadings, and the body copy, is all the same font just different weights. All eight sections are organized into four columns across the two pages and I included a simple illustration for visual interest.

08. BLATHERS MUSEUM KIOSK WEB, HTML, CSS, JAVASCRIPT, INFORMATIONAL KIOSK A self-service kiosk for a fictional museum that guests can use to purchase museum admission, special exhibit tickets, and renew/purchase memberships. I was inspired by the museum in the video game Animal Crossing when creating my branding and concept. During the early stages of the creative process, I reached out to multiple GLAM (Galleries, Libraries, Archives, Museums) professionals to get their feedback on self-service kiosks in museums and ask them what could be improved. The big takeaway I got from those interviews was that the primary function of a museum kiosk should be ticketing, not information. The information aspect is handled by the curators and professionals at the museum - it’s their job to research and share their knowledge and I didn’t want the kiosk to take away from that or be redundant. The kiosk should probably also be very simple and quick to use.

When you first enter the app you can either log in as a new guest or an already established member, depending on which option you choose it greatly affects your user experience. All guests can purchase tickets for their party (ticket prices depend on the age of the guest, their membership status, and if there are any special exhibits that they want to see). Please scan the QR code on the right to view a walkthrough of the app.

09. PEGA INCLUSIVE LANGUAGE GUIDE BRANDING, PRINT, ADOBE INDESIGN, CORPORATE A visually interesting and informal guide on how Pega employees should use inclusive and mindful language. This asset needed to work within the already established Pegasystems brand. This piece includes a lot of infographics charts and lists sited from various sources that needed to be adapted into the company’s visual style. It was critical that the piece be visually dynamic and present new hires with important information on the company’s inclusion and diversity values. I used Pega’s illustration style and branded shapes on the front cover

to compliment the text and invite the reader in. Throughout the document I used color and shapes to establish a visual hierarchy. The pick up icon system was used frequently throughout the asset.

10. HIDDEN PVD WEB, CONTENT MANAGEMENT, HTML, CSS, WORDPRESS A blog about the weird and unusual historical sights and landmarks that are in the city of Providence. I was inspired by the delightfully strange and unusual history of Providence, RI. The style of the blog reflects that peculiarity that goes hand in hand with this unique city. All of the colors and typefaces on the site have been inspired by my observations of the city since moving there in 2018. The layout and design showcase the content and posts in an organized and easy-to-navigate manner. The audience for this blog are history buffs who reside in (or are traveling to) Providence and are excited to explore the city and learn about its rich

and historic past. The content is what draws in the readers - the blog’s posts are the initial focus that navigated users to the site. With that in mind, it is important to me that all design decisions be made to enhance the content and not take away from it. Wordpress was used to power the blog and I was required to use the Twentytwenty theme. All of the content on the site, including photography, is original and was important to collect the inspiration materials before designing the site.

11. BBALL WELLNESS APP UX DESIGN, ADOBE XD, MOBILE APP An app that helps basketball players and enthusiasts meet their goal to become well-rounded players by filtering workouts by position, and coaching the user through a variety of different drills to increase ability and athletic prowess. This project was inspired by a fellow student, Ryan Wirth. I worked closely with him to develop his “dream wellness app”. The app is centered around basketball and sports and through research, I found a very specific design aesthetic. I looked at a multitude of sports teams for color palettes and running apps for layout and compositions. The flow of the app takes you through a welcome splash screen then, if you’re a new user, you can get a brief overview and personalize your workout experience by picking a coach - each of which has a different training style.

The main dashboard provides the user with a list of workouts that they can do including a daily challenge that refreshes every day to keep users coming back. The coach selected guides the user through the training session which is accompanied by visuals and a brief description to ease confusion.

Scan here to view BBall in action.

12. EVERGEAR BRANDING, EDITORIAL, PRINT, ADOBE INDESIGN, CORPORATE A fictional outdoor and camping supply company with a branded shopping catalog and tradeshow booth. The catalog was designed in Adobe InDesign and all of the product photography is my original work. This particular issue of the Evergear catalog was the ‘winter issue’ so I photographed lots of gear like coats, skis, snowshoes, mittens, etc. I also created an illustration for the front cover, I imagined this brand would use lots of illustrations in their designs and branding. To expand the brand and show another example of how this style could be executed, I created a cover for a potential spring catalog with its’ unique illustration.

The trade show booth was also created from scratch. I did not use a mock-up, instead, I first sketched out an idea of what I’d want the booth to look like. I wanted a set up where you can view the productsas they would be used in the natural environment - think the displays at IKEA. After my initial sketch, I brought it into Illustrator to create the outlines and refine the concept. Then, I brought it into Photoshop, I knew I wanted the winter illustration as the backdrop so I made my own mockup with linked smart objects to accomplish this.