Nick Abele Design Portfolio

Page 1


Hello! My name is Nick I am a Communication Designer with experience leading projects from publications to apps. For me, design is problem solving. I try to bring that approach and thought process to everything I do. I have a passion for, and experience doing it all; branding, signage, websites, print publications, digital products, information graphics, group facilitation, design strategy, and more. I enjoy solving design problems strategically and creatively, bringing clarity to complexity, and making beautiful things. I believe that good design is clear, meaningful, and timeless and I seek out opportunities where I can achieve those ideals and make an impact. In addition to design, I also have many side interests including architecture, history, arts advocacy, travel, baseball and piano. In my spare time you can find me drawing at my drafting table, sitting at the piano, at the ballpark, or in transit maintaining a well-stamped passport. Senior UI/UX Designer YinzCam | 2016–Present Designer ThoughtForm | 2014–2016 Design Fellow Frank Lloyd Wright Foundation 2012–2014

Bachelor of Fine Arts Communication Design Carnegie Mellon University | 2012 Graphic Design Student Exchange Schule für Gestaltung St.Gallen, CH | 2010


The Battery Atlanta Digital Wayfinding Design a digital wayfinding solution to help fans discover and navigate a new neighborhood.


Horizontal Layout

Vertical Layout

ER

Optimal viewing zone

YA VE NU E

Visitors can tap any building on the map or the locations list on the right side to find stores, restaurants, parking, or the ballpark. The map also shows visitors the quickest route from their current location to their selected destination. Overcoming Challenges Our client came to us a week before opening night and with a specific design idea already in mind. We listened carefully to the idea but quickly realized that there was a better solution. I created a full size model of the kiosks in our office, and put together a quick sketch to explain the optimal layout of the screen and how our proposal would benefit users more and make the kiosks easier to use. By modeling a kiosk and explaining how visitors would actually interact with the map we were able to convince our client to use our design solution and deploy the maps just in time for over 50,000 fans to flood The Battery for opening night at SunTrust Park.

Viewing Direction

Locations list, titles, and descriptions are in an area of the screen that is harder for viewers to read. Map orientation doesn’t match the direction most readers will be facing. Fitting the map horizontally forces it to be smaller.

Most important information is in the optimal viewing zone. -Location title and description -Most detailed section of map Map can be larger when displayed vertically

BATTERY WALK

Standard Kiosk

TT BA

When designing a new ballpark, the Atlanta Braves also developed a neighborhood to surround the stadium and truly make the area an active year-round destination. To coincide with the opening of The Battery neighborhood and SunTrust Park, YinzCam designed an interactive map that is displayed on touch screen kiosks scattered throughout the development.

It will be less confusing if the map is oriented in the same direction as the people. Since a majority of kiosks will be located along Battery Ave. and the Battery Walk it makes sense to orient the map vertically.





Taliesin West Directional Signage Design a wayfinding solution to clearly direct visitors throughout the campus of a National Landmark while respecting the historic architecture.


Taliesin West was Frank Lloyd Wright’s winter home and studio. Today the National Historic Landmark serves as the headquarters for the Frank Lloyd Wright Foundation and School of Architecture at Taliesin. It is also a popular tourist destination, and venue for concerts, lectures, symposiums, and other special events. Although the campus has long been a hub of activity, it had inconsistent or non-existent directional signage to welcome and direct visitors. The campus needed a comprehensive design strategy and plan for a more clear and functional wayfinding system. I worked on the project from concept through implementation, studying the campus and its various functions, determining what directional signage was needed, designing a clear and cohesive visual system, and developing a plan for implementation.


I worked with the Director of Preservation and Public Access Manager to survey the campus, take an inventory of the signage in place, and determine where new signage would be needed.


Color is used strategically to identify sign functions. The red orange color is the signature color of the site and is used on signs that direct vehicles. Cherokee Red is used on all signs that direct people to campus destinations such as tours, bookstore, or apprentice court. Gray is used on all signs identifying Foundation offices. I drew on elements of Taliesin West’s visual vocabulary to integrate the design with the campus. Signs had to be bold and clear to accomplish their job, yet neither dominate nor take away from Wright’s architecture and the natural landscape.



LaLiga Club Apps Create a mobile app design strategy flexible enough to meet the unique needs of up to 42 clubs and appropriate for each club’s audience. Become the official mobile app provider for LaLiga.


In 2018 YinzCam began working with the top-tier soccer league in Spain, LaLiga. LaLiga is made up of 42 clubs split into Primera and Segunda Divisions. The clubs range from large, legendary franchises with an international fanbase such as Real Madrid and FC Barcelona to small, local clubs such as SD Eibar and SD Huesca. The challenge was to create a design strategy flexible enough to meet the different needs of each club and appropriate for each audience. Research: I began by conducting research on LaLiga clubs as well as demographics of current LaLiga app users and smartphone users in Spain. I considered club history, location/market, proximity to and relationship with other clubs, current club membership (season ticket holder) numbers, team performance over the last 5 years, media coverage, and current use of website/apps.


Fans Internacional

Strategy: We realized that clubs vary widely in terms of size, fan support, and national attention. They all have different needs and their apps are used by different audiences. To craft a successful product, we needed to find a way to tailor the apps to fit each fan base. Using the research I was able to group clubs into three archetypes and then created different design approaches to fit each club archetype. 3 Design Approaches: Each approach contains a similar set of features, but the design emphasizes different kinds of information, depending on who the key audience is. Approach 1: Fans Internacional For clubs with heavy international media coverage including video content and a large member base, reaching an international audience. Approach 2: Fans Nacionales For clubs with moderate media coverage and a medium to large member base, reaching a regional to national audience. Approach 3: Socios For clubs with lighter media coverage and a small but dedicated member base, reaching a mainly local or regional audience.

Fans Nacionales

Socios

• Heavy international media coverage including TV/ video content • Large member base • International audience

• Moderate media coverage • Medium to large member base • Regional to national audience

• Lighter media coverage • Small (but loyal) member base • Limited non-member audience, mainly local to regional support

Key Audiences: • International Fans • Club Members

Key Audiences: • Club Members • Casual fans, nationally

Key Audiences: • Club Members

App Should Have: • Focus on squad, stats, and match day information • Ability for users to customize some of the content they see. • Different content delivered to fans based on their location and member status.

App Should Have: • Focus on squad, stats, and match day information • Ability for members to store/update their information. • Special features for members

• • •

App Should Have: Focus on club news. Fans need way to easily access variety of articles, video, and other media about club. Features relevant to fans outside of Spain Different content delivered to fans based on their location and member status. Ability for users to customize the content they see.

Design Spectrum

Concept A The Media Hub

• Heavy media coverage • Large member base • International audience • Moderate media coverage • Medium to large member base • Regional to national audience

Our current offering Cards

LaLiga Opportunity Space

• Light media coverage • Limited non-member audience

Concept C My Feed

Concept B The Match Hub

Single Experience for all users

Some Customization based on time and user's location

Fan Customized Experience


Concept 1: Fans Internacionales

Concept 2: Fans Nacionales

Concept 3: Socios


Design Approach 1: Fans Internacionales

Homescreen scrolled

For clubs with heavy international media coverage including video content and a large member base, reaching an international audience. Fans can swipe left or right to access different content feeds without needing to leave the homescreen.

The most recent item is shown in the large card format.

Secondary items that are older or of lesser importance are displayed in a smaller card.

The headline area always displays the most recent result, and the next two matches. Tapping a match takes fans to the match centre for that event. The headline area scrolls horizontally and remains fixed to the top of the screen as other content scrolls beneath it.


Non-Match Day/Offseason

Match Day

Match Day at Stadium


Design Approach 2: Fans Nacionales

Homescreen scrolled

For clubs with moderate media coverage and a medium to large member base, reaching a regional to national audience.

The headline area always displays the most recent result, and the next two matches. Tapping a match takes fans to the match centre for that event. The most recent item is shown in the large card format.

Secondary items that are older or of lesser importance are displayed in a smaller card.


Design Approach 3: Socios For clubs with lighter media coverage and a small but dedicated member base, reaching a mainly local or regional audience.

Future development:

Fan Profile and Preferences


Match Centre: We decided to make the design of the match centre consistent through all apps regardless of approach. Because of the amount of information available, we designed the the match centre to be dynamic giving relevant information to fans based on whether the match is upcoming, in-progress, or completed. For example: ∙ News stories and video are most relevant to fans before and after a match, but not during. ∙ Match commentary is relevant during and after the match but not available before. ∙ Club lineups are relevant to fans before and during a match, but not as relevant after. ∙ Player Profiles include a player bio, related media, and stats. These screens can be accessed from anywhere in the match centre by tapping a player’s name or photo. They are also accessible through the “club” or “roster” screens located elsewhere in the app.








YinzCam Mobile Ordering Design a new feature for fans to easily locate food, beverage, and merchandise options in the stadium and complete at purchase—all through their team’s existing mobile app.



In addition to designing full apps, YinzCam creates products that can be integrated into existing apps. I worked with our software engineers to design a new feature for fans to easily locate food, beverage, and merchandise options in the stadium, place an order, and complete payment—all through their team’s mobile app. We built an SDK for both Android and iOS platforms that has been deployed in various YinzCam apps for teams in the NBA and NFL. Product Goals: Simplify the mobile ordering process for fans. Champion choice. Give fans the ability to search all offerings and locations in a venue and customize an order to their liking. Create a feature that can integrate with existing features, apps, and point of sale systems. Give teams flexibility to customize the feature to match the visual style of the rest of their app.

Design Approach: Mobile ordering is complicated. Finding the right location, finding and ordering an item, customizing that item, adding and choosing a payment method, reviewing an order and total cost are all decisions required of the user. We knew the product could only be successful if it appeared simple and short to fans. Through design iterations we were able to distill the ordering process into as few as four screens for users.


Placing an Order: An order bar stays fixed to the top of every screen allowing fans to see their running total at all times, checkout at any time, and add items from different locations to the same order. For items that can be customized or added to —think adding pickles to a cheeseburger, or selecting the size of a t-shirt— a list of options appears. If a fan orders more than one of the same item, they can swipe horizontally to select different add-ons for each item.





Testing and Results What we learned: Over 200 fans tried our new feature. 77% of fans simply perused menus to see what food was available without starting an order. However 60% of the fans that started an order completed it successfully. The good: Fans that start orders tend to complete them.

The bad: Putting an information barrier in front of the feature alienates users Order abandonment low. and causes drop-off. Many fans quit the feature when asked for their seat number.

Result: Since our initial pilot, other teams in the NBA and NFL have implemented the feature in their apps including the Seattle Seahawks, Carolina Panthers, and Toronto Raptors.


Carter Brand and Website Refresh Craft a brand evolution for a philanthropy consulting firm.


Originally founded as Bob Carter Companies, Carter is a philanthropy consulting firm that advises and assists arts, conservation, education, and humanitarian organizations. Under the leadership of it’s namesake, Bob Carter, the company developed a strong reputation and expanded its reach globally. In 2015 Carter decided to transition leadership of the company to the next generation of consultants. With the change in reach and leadership, the company wanted to revisit their brand strategy and refresh their name, visual identity, and messaging. I worked with a team of strategists, writers, and a front-end developer to craft the evolution of the company’s brand. We conducted research, developed a new name for the company (Carter), designed a new brand identity, and extended that new visual language through the design of print and digital materials. We helped the Carter team through the brand transition and helped launch the new name and logo with a new company website.



Website We revised the design of the website to coincide with the launch of Carter’s new visual identity. With Carter’s increasingly global business, we knew the website would likely be the most important and highly visible application of the brand. The design addresses the following priorities: Responsive Design We made sure to consider how the website would work on mobile and tablet screens, anticipating users accessing the site from a variety of devices. Introduce Carter’s experts Carter is a collection of philanthropy experts with decades of experience. We felt it was important to highlight the personalities and experience that Carter brings to each project. Show the impact of Carter’s work Many of Carter’s “philanthropy consulting” services are strategic, abstract, and hard to show visually. Therefore it was important for us to show the great things that happen as a result of Carter’s work. We accomplished this by creating written “project stories/testimonials” from a variety of Carter’s clients and selecting photos that show the impact of the types of organizations Carter works with.




Leadership Pittsburgh Unboxed Conference Develop a visual identity for a new thought leadership conference that captures the innovative, dynamic spirit of the event.


Leadership Pittsburgh is a non-profit organization in Southwestern Pennsylvania dedicated to developing civic leaders to serve the region. In 2014 the organization launched Unboxed, a new, semi-annual conference. The goal was to bring together a mix of influential thinkers, innovators, and leaders from the region to share ideas that push boundaries and expand perspective. The Pittsburgh Post Gazette called Unboxed “The ultimate intellectual buffet.� I worked as a part of the ThoughtForm team that developed an identity to capture the innovative, dynamic spirit of the conference and be a sustainable, flexible visual system that could be used in future conferences. I worked to establish the visual identity system and produce collateral material and brand applications for the first conference. Constructing a Dynamic Visual Identity I created a mark that could take on many different forms. The mark follows one rule; use five lines to trace a cube. While four lines make a square, the addition of a fifth line goes beyond the square, reveals something more, and suggests a new shape. It pushes our perception into a new dimension. There are multiple ways to build and show this mark, and multiple color variations are possible, but all representations follow the same governing principle which makes the identity dynamic and flexible.


Conference Wayfinding Plan Events were scattered across a large resort. I designed a set of simple, bold signs using the visual vocabulary I had already developed to help direct participants. Directional signs were designed to read the same no matter which way they are flipped so they can denote any direction by simply rotating the sign. Destination signs were color coded to denote their location. Staging and Motion Graphics Since this was the first time the conference was held we decided to feature the name and logo prominently on stage, with colored patterns used for speaker introductions. We animated the logo to create a short intro video that played between speakers and to quiet the hall before each session.



Minding Design Symposium Create a visual identity system for a symposium about the intersection of neuroscience and architecture.


In November 2012, the Frank Lloyd Wright Foundation collaborated with the Academy of Neuroscience for Architecture to develop a weekend symposium at Taliesin West discussing the intersections of the fields of architecture and neuroscience. I developed the visual identity for the symposium and the design for all collateral materials. In developing the visual identity, I drew inspiration from the work of keynote speakers, themes such as “connections,” “neuroscience,” and “design,” as well as art installations that would all be included as part of the symposium weekend. I developed a visualization of connecting brain synapses that was applied in various ways.




Frank Lloyd Wright Quarterly Magazine Manage the production of recurring publication for an arts non-profit. Explore restructuring the content and expanding the breadth and depth of the magazine to expand the reach beyond membership and increase readership.


The Frank Lloyd Wright Quarterly is a magazine sent to members of the Frank Lloyd Wright Foundation and sold at public Wright Sites. I worked as a member of the Foundation’s Communications team to restructure the magazine’s content and expand its breadth and depth with the eventual goal of expanding the magazine’s reach beyond membership and increasing readership. The Quarterly was previously structured primarily as a Foundation newsletter that was sent as a membership benefit. It showcased images from the Frank Lloyd Wright Archives and included one extended length feature article, Foundation news briefs, a calendar of events, and an index of Wright Sites open to the public.

Improving the Quarterly The expanded magazine is restructured to be more multi-dimensional, offering features on a variety of topics of interest to the broader architecture community as well as “Wright-o-philes.” The content is split into 3 sections; News, Features, and Reference.



Reference: Every issue includes an index of all Wright Sites open to the public. Although the index was alphabetical, the organizational structure and hierarchy of information was not appropriate for the content, making it hard for readers to engage with the information. I redesigned the section to give this large index better hierarchy, making the content more engaging and the detailed information easier to access. The sites are grouped by region, and then listed alphabetically by state, with appropriate contact information directing readers where they need to go to learn more. The large amount of text is broken up by images of highlighted Wright Sites that change with each issue.


Skylines

Visually tell the story of urban development in iconic cities over the past century and show how times of prosperity and depression contributed to today’s modern skylines.


Skylines are memorable, visual icons of cities. On a deeper level they are visual records of the city’s history, development, and identity. Process I designed a set of diagrams documenting the development of Chicago and Dubai. Although both are major modern cities, they have very distinct and different stories. The diagrams unfold into a timeline showing when each building in the city was built as well as prominent historic events of each time period. The end of the timeline shows the city skyline in its current state, noting prominent buildings and other landmarks. I used building outlines to show the development of architectural styles in skyscrapers over time. As a whole, the diagrams tell the story of the development of each city, visually magnifying times of prosperity and depression and how that history led to the notable city skylines we know today. The booklets also allow users to compare the height of iconic skyscrapers. I explored various methods of data visualization as a part of the process and used historical records and city maps to ensure accuracy in my mapping and diagramming.




Thank You

See more at www.nickabele.com Password: OxfordComma

Email: ndabele@gmail.com Phone: 513-267-3375


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.