The Jersey Cape: A Case Study of Rebranding the Jersey Shore
The Jersey Cape project rebrands the nine beaches of Cape May County, New Jersey stretching from Ocean City all the way down the coast to Cape May. For this project, the designer creates a map of the Jersey Cape that highlights the key attractions and attributes of the beaches along with unique beach tags that are representative of the spirit of each beach town. The foundation of the project is a comprehensive illustrated website that features a simple, interactive quiz that allows the user to design their perfect beach experience.
To see this full project, please you the following link: The Jersey Cape
Beach Tags
At most of the New Jersey Shore beaches, beach-goers are required to purchase beach tags in order to access a particular town’s beaches. A visitor can purchase daily, weekly, or seasonal badges. The beach tags generate revenue to fund lifeguard services and general beach maintenance. Despite their utilitarian nature, patrons often treat them as keepsakes that signify the memories of good times down the shore. Many families, like my own, return the Jersey shore each year and save their beach tags on chairs and beach bags as badges honoring days of summer fun. They create a timeline of all the years we, as a family, have spent together at the beach. The collected tags can often be seen displayed in the beach houses up and down the coastline of New Jersey. These beach tags have become a highly recognizable symbol of the Jersey Shore.
These tags are seen by the millions of people who visit the beach each summer. The existing designs are very industrial and sterile. I wanted to challenge myself to create beach tags that are beautiful and present designs that represent the unique characteristics of each of the individual beach towns.
Research
In order to determine the distinguishing attributes that would represent each individual beach in the project, I examined the beach’s histories. This research allowed me to capture the essence and personality of each beach. From this in-depth research, I made the small illustrations which I later adapted as a part of the design of the tags.
Process
Upon completion of the research, which informed my designs for each of the tags, I brought the initial sketches into Adobe Illustrator. Once the sketches were uploaded, I began to vectorize the illustrations and find fonts that were similar to those I had created in my sketches. The digital illustration style is one that comes naturally from how I vectorize my sketches. After those elements were completed, I determined the shape that would best suit the illustration and type combination created for each beach. When determining the shapes and sizes for my tags, I referenced my existing collection of actual tags, seen above, to ensure that I didn’t stray too far from tradition. It was important to retain the authenticity of the iconic New Jersey beach tag. Below is the completed nine designs, each tag representing a unique aspect of each beach town.
Throughout the process of creating these various illustrations in Adobe Illustrator, I continued to embellish and fine-tune the ideas captured by my original sketches. Through this exploration, I was able to take the essence of the other elements that were being created, simplify it, and from there I had created the logo that represents the Jersey Cape Brand.
During the process of creating these nine beach tags, I came up with the novel idea of a tag that would allow someone to visit any of these beaches. This would provide the purchaser the opportunity to test out each beach for themselves without having to commit to just one town or to buy multiple tags. This would be a way to encourage visitors to not only come back to the same beach each and every year, but rather patron these other wonderful beaches as well. Therefore, I designed and beach tag that allowed an individual to visit any of the nine beaches in the Jersey Cape.
Development
Once the designs were completed digital, I fabricated the beach tags. Having had a prior supply of pins, those that accompany each beach tag, it was simply a matter of determining how to make a physical representation of my tag designs. After much trial and error, I concluded the best materials for production was 160-pound paper stock and a combination of printed Epson paper. After I printed out the beach tag designs, I laser cut each piece to fit the precise dimensions needed to fit a pin through the tag. Once the laser cutting portion was completed, it was simply a matter of adhering the two parts together and slipping the pin through. Below you can explore how the designs come to life once they are in their intended forms.
The pins are created exclusively for all of the New Jersey beaches. They are made from brass and constructed to be able to last all summer long.
MAP
During this rebranding project, I created a map that could be used as an accompaniment to the beach tag purchases or as an active display in a hypothetical Jersey Cape Visitor Center. The audience for the map is those who have never been to the Jersey Shore. Viewers can learn more about each of the beaches. This map of the coastline of the Jersey Cape highlights the landmarks and attractions found all across Cape May County.
Research
To create this map, I began by using the information gathered from my initial research and determined the highlights of what the beaches currently advertised and those that are important to the people who routinely visit these places.
Process
First, I selected the landmarks to highlight. By using a map and photo references, I was able to create illustrations that represent each of the key locations. The illustration style used to create this map was a continuation of that used on the tags. This was done to create a cohesive feel throughout the brand.
Alongside the landmarks, I created and included various illustrations that represent either the Jersey Shore in general or an additional activity or item relevant to the area which it is near on the map.
The choice to play with the perspective of the various elements on the map, when compared to the scale of the items, in reality, was done to reinforce what landmarks are important but it also creates a fun and whimsical tone to the overall piece.
Website
My purpose in creating a website for the Jersey Cape was to provide potential visitors with a single unified site that would allow them to find the best beach in the Jersey Cape for their personal vacation needs. To do so I created a quiz that gathers the relevant personal information and needs of the potential vacationers, analyzes that information and offers Jersey Cape beach town options. Additionally, the site was intended to provide relevant information and resources about each of the areas beach all in one easy to find location. This website can provide you with all the information you would want or need to know in a simple and straightforward way.
Research
In my initial research process, I went through each of the individual beaches websites, as well as associated, unofficial websites about each of these beaches. What I was able to conclude was that there are varying degrees of UX design throughout each website, ranging from practically unusable to passable. Not a single website allowed me to find all the information I wanted to know if I was looking to visit one of these beaches. This made the process extremely difficult for anyone who had no prior knowledge of these beaches to find out what they need to know, and to be able to find the beach that is right for their needs.
I was determined to design a site and a function that would make the process of visiting the right beach for your needs easy and painless. Because planning a vacation shouldn’t be hard work.
Process
The UX of my website was very important to me when developing it. By initially creating paper wireframes to layout my website structure allowed me to trial many different structure variations with ease. It also allowed me to reorganize the various element until it was perfect. This process also allowed me to ask others to order the cards in a manner that they thought made the most logical sense. I would test the results of those who reordered the cards and compare them to my own. The structure that I ended up using was the one that I determined to be the most logical and most often had overlaps in how other testers ordered the cards.
From the initial rough wireframes, I went to paper sketches. These paper sketches allowed me to roughly visualize how illustrations would be incorporated into the design of the site. By using a box and rough shapes and outlines, allowed me to focus, not on designing and visualizing the exact illustration that would live in that space, but rather on how all the parts would work together as a unified designed website.
Finally, from these two phases of wireframes, I was able to bring the wireframes into XD and lay them out as they are seen on paper. In this process of transferring the wireframe sketches into the digital programs, I refine the placement, sizing, and overall layout. Once the wireframes were completed, I began to illustrate elements and vignettes that would be used throughout the entirety of the website.
Development
Once all of the elements were designed and assembled accordingly in Adobe XD, it was simply a matter of adding copy and tweaking a few things before it was time to prototype the site. In order to appear that this could be a functioning website, it was essential to use various prototyping functions within XD to give the illusion of seamless functionality.
The animation is present in practically every website that is being designed today. With this in mind, the nature of the subject matter at hand, and style in which the site was designed, all lent itself to animating specific elements throughout the entirety of the website. I focused on simple, effortless transitions and animations brought to life the illustrations as well as adding a level of visual interest to every aspect of the Jersey Cape website.
When animating the home page, I wanted to focus on animating certain aspects of the illustrations. By using a combination of animations, transitions, and pages, I was able to create the appearance of the biplane plane flying across the screen. I gave particular attention to animating other such elements such as the boat in the footer. View just the flow of the home screen of the Jersey Cape website below.
When prototyping and animating the quiz, I had a different approach. I wanted to focus on making the transitions and animations simple for ensuring focus and usability for all when taking the quiz. The transitions applied help users understand how the quiz functions, making the user experience streamlined and simple. View just the flow of the quiz featured of the Jersey Cape website below.
The images above depict the flow of the quiz and show a glimpse at the illustrations used to describe each aspect and feature of the “Find Your Perfect Beach” quiz. Below is the video showing the full prototyped version.
Once the prototyping was completed, it concluded work on the website, and in turn the project.
For the entire project and more work done by the artist please use the following link, holliscampbell.com, and enjoy!
