Introducing the new YapStone: A look at the site design and development

In Part 1 of “Introducing the new YapStone”, we learned about the strategy and story that formed the foundation of our rebranding effort. Today, we take an in depth look at the transformed visual identity and development of our website, the first significant project representing YapStone. As the lead for this project, Troy Scarlott, SVP of Marketing, shared the process that went into giving YapStone a fresh new look.

before-after_main-02

How did you approach the visual rebranding of YapStone? 

Troy: In approaching this, I realized that we needed to leverage the story behind why Tom and Matt founded YapStone and also support our mission to change the way the world pays. We have all these great things going for us, but we’ve never really told the story before. I wanted to embrace our story and to tell it in a way to resonate with our teams and our partners. We knew early on that we wanted to update the brand identity – everything from logo to the font system. I was very fortunate that Tom and Matt trusted us with their company and gave our team a lot of freedom to explore.

Can you tell us more about the new logo and what it represents? 

 

before-after_logos

Troy: The original currency, the Yap stone, is not only core to our company, it is also very interesting visually. We decided to use it as our foundation and create a logo based on it. After a lot of sketches and conversations, we fell in love with an organic, gestural version of a real Yap stone. The multiple circles create the idea of movement and is also considered by many to be the perfect shape. By introducing this idea of movement and perfection in subtle ways, we believe it will support our mission and contribute to the building of the brand. For me, the YapStone logo echoes the idea that we’re always moving forward and aiming to be as good as we can possibly be. I am also excited to see the new logo come to life in all things YapStone, from our website to business cards to presentations to social media platforms.

Talk a little bit about the new website.

Troy: Because this was going to be YapStone’s first immersive corporate website, we came up with an internal nickname for the project, “Project Leapfrog.” We didn’t want to simply launch a website – we wanted the site to signify what we are doing in the payments industry. There are 100 million renters in the US and most of them are still using paper checks. We’re focused on getting renters to their mobile phones to pay their rent. To do that, our website has to make an impactf on potential partners and prospective employees. The new website also uses immersive video with parallax scrolling and layers of content to deliver a fluid experience. All in, the website, much like the new logo, is designed to say that we are a forward-thinking company that is changing the way the world pays.

before-after_payment-01

How does the use of immersive video tell our story?

Troy: When you jump into a brand identity project, there are a million different ways you can go. One of the things I found is that most technology and payment companies talk only about their product offering. It seemed very clear to me that what sets us apart is our people – the 190 incredibly talented individuals working here at YapStone. If I wanted a face for our product, who better to tell the story than the amazing people who built it? The video is an immersive way of bringing out the emotion and demonstrating the commitment of our team. It hints at the hours and effort that the YapStone teams put in to building our payment platform and providing 24/7 customer service to thousands of our partners. We really wanted to bring that to life.

before-after_career-04

The careers page is one of the most improved sections of the site. What are some of the key features?

Troy: Before, the careers page was much simpler. Yet today, YapStone is growing and expanding in all three of our offices. Our careers section needed to deliver more about working here and also integrate the job application process to make it easier for candidates. We integrated the Jobvite platform, which manages our current openings as well as the application process. You can also see people in action, and learn about our benefits and the daily perks we enjoy in the office. Hopefully, site visitors will get a sense of what it’s really like to work at YapStone from a day-to-day and culture perspective. When you look at our open positions, you get a true sense of the type of company we are and the kind of roles we have open.

Something that we noticed on the new site is the new type of navigation. The way that you can navigate on the new site – it seems that you’re using navigation to enhance the story telling elements. 

Troy: When you take a step back, the site is actually quite simple. There are only 3 sections and each one of them really supports the brand. We have a company section, a product section, and a people section. From a navigational perspective, the site allows you to choose the way you want to experience the story. Most websites today use long scrolling pages, which sometimes makes you feel like they go on forever. We changed that up on our site. Rather than scrolling down the page, we decided to build the site to bring the content to you. The overlay effect we built is pretty slick and makes the site feel lightweight.

before-after_company-02

Your history has shown that you’ve done all sorts of creative websites and projects. How was this project different than the others you’ve done before?

Troy: As I said before, it has taken the founders, Tom and Matt, over 15 years to build YapStone. I feel fortunate that they entrusted the brand to me and my team. I really felt like this rebranding effort would make a significant impact on our company, teams and future growth. I am very excited with the result of our efforts and look forward to keep it going.