Ecommerce Website Launch / Gramercy Books
Danielle Williams /
Chief Design Officer
Gramercy was in search of an ecommerce website that would allow them to not only showcase their inventory of books online, but more importantly highlight the great programming they have scheduled. Having chosen a proprietary platform, we needed to ensure that the brand was well represented to reflect the Gramercy in store experience online.
cheers extended the Drupal base template to create a fully customized website for a fluid brand experience. We integrated many captivating photos of the bookstore and crafted different mobile and desktop layouts to personalize the user experience based on screen real estate. A lot of attention to detail was placed in the display of events to ensure people could quickly peruse what was happening soon. To keep people updated on scheduled events, we created custom email templates and an automated "Welcome" email that rewarded members for signing up to the Gramercy Newsletter and enticed them to come into the store.
Gramercy, comes from the French words “grand merci,” which translates to “big thanks” or “many thanks.” The second we heard that this was the inspiration behind Gramercy Books Bexley, Central Ohio’s first new independent bookstore in 12 years, we knew working together would be a perfect match. cheers studios was named after the true cheers experience of "sharing close confidence with trustworthy friends." The work we create at cheers is a type of thanks to our clients. And we are thankful to work with passionate businesses like Gramercy.
When you walk into Gramercy Books (you can find them at the intersection of East Main Street and Cassady Avenue in Bexley, Ohio) the first thing you notice is the sense of calm and discovery that lies ahead.
A mixture of best sellers and independent titles line the contemporary dark wood shelving, all lit perfectly by the warm glow of chrome light fixtures. The combination of natural wood elements and industrial modern touches make the store a true sensory experience. But here's the kicker, they also host amazing events, and not just one or two a month. Gramercy Books has extensive programming and events that includes author visits (R.L Stine dropped by on opening weekend) and Salon@2424 (a partnership with other organizations like the Bexley Public Library, the Drexel Theatre, and area universities). They even perform bimonthly Sunday Storytimes for the little readers in the community.
Gramercy's branding and positioning was created by Mynte Design Co. Jenn developed brand positioning of: Find it here. Because Gramercy is a place where people can connect and discover, so it only made sense that their brand story would follow incorporate those same ideas. As is true with many poetic brand stories: it was long. So Blake coded a custom header on the homepage that displayed this sentiment in a completely appropriate way for a bookstore: by typing it out like you would on the vintage Underwood in the store. It is important when creating animated text on the web that it is relevant to the brand experience as well as functional for all browsers.
With Gramercy's robust offerings as more than just a neighborhood bookstore, cheers studios set out to build them a beautifully branded ecommerce website that put events in the forefront while also showing their unique bookshop/cafe space.
In order to show the beauty of Gramercy, we hired James Henthorn to photograph the movement and energy of the combined bookstore and Kittie's Cakes Cafe. On the Visit page we created a rolling slideshow as well as a highlight section that captured little details specific to the Gramercy brand experience.
With having a website speaking to multiple key topics (ecommerce, events, and visiting their physical space) it was important to create clean navigation and strategic placement of call to action banners to gently guide users through the website experience. To design subtle but clear CTAs, we utilized a combination of brand photography and colors that let the brand story of "finding" shine bright.
Because of my experience working on the design and marketing of events at malls and shopping centers across the country, I utilized this knowledge to design a way to show upcoming and featured events so they would be simple enough digest quickly, visually appealing, and also sustainable for Gramercy. Working with Mynte, I asked for the creation of six custom illustrations I could use for Gramercy's reoccurring events. By using these illustrations for all event thumbnails we were able to create a brand consistency while also providing a visual clue as to what the event was about. This helped Gramercy because instead of taking precious time to find the perfect image for each event, they are able to spend time planning and scheduling more amazing events!
Blake used Bootstrap framework to make the events lay out perfectly whether you are on your desktop, table, or mobile device.
He also created dog ear (another callout to the physical act of remembering something in books) that would appear automatically on events that were happening within two weeks. This visual cue to upcoming events let's viewers see when they should pay special attention to the date and also keeps the site updated without any additional work from Gramercy staff.
Although there really is nothing like walking to Gramercy and picking a book or gift out with your own hands, we definitely knew that this website needed a branded ecommerce experience.
When it comes to shopping, more and more people are picking the convenience of buying on their screens versus in person. In fact, back in 2015 one third of ecommerce sales were happening on mobile devices. And when it comes to buying books online, Amazon and Barnes and Noble are the biggest competition. So we knew we had to make the online shopping experience easy on mobile and speak to the Gramercy brand. The difficulty we encountered when creating the Gramercy website in general was that we had to work with a very specific legacy platform: an IndieCommerce Drupal 7 CMS developed by the American Bookbinding Association that was partially locked down and relied on technology release over a decade prior. With this came an extreme lack of responsive layouts for the entire ecommerce portion of the platform.
It was a tall order, but Blake met this challenge like the true pro that he is. Using his front-end development skills Blake styled the browsing section, product pages, third party Indie book list integration, a cart page, account profiles, and payment processes that looked and functioned beautifully.
With all the work and strategy that comes with creating an ecommerce website, the most important part of the whole process is remembering that even if you have every product available, every event listed, and the ability to browse on every screen, the defining factor of a website is if it is able to create a seamless brand experience that elevates the physical business as well as the digital. That was our goal with each decision of the Gramercy website, and we think it goes down in our book as a success.