This article is written by Brian Onorio with O3, the Raleigh Web Design and Development Company responsible for the execution of this website.
Like any delicious goodie, the website creation process always requires equal parts creativity and execution for success. No doubt you will find numerous examples of products from this website that executed perfectly along this concept and it’s this same concept that led us through from strategy to launch with Goodies for Gifts.
Our first meeting with Lynn was exciting. She had an intriguing idea and she was passionate from the start about where and how this idea could take shape. Some reading this may remember the old Goodies for Gifts. It was our first insight into Lynn and the Goodies concept. She had a bit of success creating a following but she knew that she had to do something inventive and new to create a sustainable and long-lasting business. For us, it was exciting to see initiative. We’re big fans of starting small and incubating an idea. After all, that’s exactly how we started. We have a lot of people come across our business with grand dreams and lofty ideas. That’s the easy part. Creating something out of that is an entirely different beast and Lynn was already well on her way to doing just that. The buy in from us was immediate. We knew she was serious and we were firm believers in the idea.
So we took care of some business and got to work on what would become the site you’re reading right now.
Mood Boards and Wireframing
There were a lot of creative directions we could go. We had all the ammo we needed to be successful but we had to hone the idea into Lynn’s mold. We started out with a very common tactic of mood boarding to appropriately gauge her overall interest in a certain creative style. Since we already had extensive communication with Lynn in drawing up a strategy, we were able to hit our first mood board concept out of the park. Take a peek:
You will immediately notice a lot of similarities between the website you’re looking at currently and the mood board we presented: the lattice work along the border, the striped blue and white background, the color palette, and you can see elements of the logo concepts we pulled from the web were all mashed up to create the Goodies Logo. Gauging Lynn’s interest in this creative direction was critically important to move the project along efficiently and on budget. Had we jumped right into creatives, we could’ve missed the mark all together and presented her with a product she was less than thrilled with. After getting her reaction to this, her likes and dislikes, we were pretty sure we had a direction set forth to start building a brand.
The Logo Process
This is where things got fun. We had a strategy, we had a direction, now it was time to execute. Our first Logo Sheet we provided actually had the eventual logo built right in.
Lynn quickly centered in on the pink and green logo concept fourth row, second column. We were hoping she’d like that one. It was secretly our favorite as well. She also voiced interest in the “cookie” concept third row, first column and wanted to see a little more of both resulting in our second logo sheet.
At this point, it was all but accepted that the square version would be the final version. But Lynn wanted to see a few more color variations:
And there we see the winner, second row, first column!
Now that we had a creative direction and a clear brand to work off, we set about laying the foundation for the website. This process in the industry is known as “wireframing” and we’re big fans of the concept. Just as you would never build a house without first knowing what’s going in it, you would also not want to build a website without knowing a set of general, high level details. Questions like which content blocks go where, where are the calls to action, how are the two levels of navigation related to each other, etc needed answers. Take a look at our first wireframe for the Home Page:
You can see how you could almost apply that wireframe directly on the homepage and see their relationship with each other. Using a high level view like this helps us and our clients visualize the website before kicking off the web creative. It’s much cheaper at this phase to move things around and swap content blocks in and out than it is to modify a finished design.
We had the concept for the Home Page but also provided wireframes for interior pages:
Now we had a map in place for exactly what we needed to design. And that’s what we did next!
And onto everyone’s favorite part… the design! We spent countless hours pouring over our wireframes mixed in with the mood boards and the logo to come up with what you’re looking at now. It would be pretty pointless to show you graphics as you’re looking at the real live version. Go ahead and click around and compare and contrast the foundation elements with the live page elements and you can see how the eventual design goes hand in hand with the strategy.
We’ve got all the pieces to begin the development process – and this was not your typical development job. The Goodies website is more of a web application than it is a website and there’s a big difference between the two. I’ll go into a few things that make this website “live” a little.
Head over to the Listings Page (this link will open in a new window). As you scroll down, you’ll notice a few things. First, the search bar will follow you as you scroll down. And as you keep scrolling down, additional listings are loaded automatically to produce an “infinite scroll”. The search bar stays with you so you can quickly make changes to your search request.
The search is rather intricate. Most searches will search an item at a time, but the Goodies search allows you to expand and contract your search dynamically. For instance, you can search by a state and then narrow that search down by keyword (such as cookies). You could further limit your search by providing a second keyword (such as chocolate chips). At the end of the day, you could build a search query that encapsulates a certain location and a set of keywords. You can do as many as you would like. Removing terms is equally as easy by clicking the X that appears by any term.
This search is loaded into memory so if you leave the Listings Page to see more details about a particular product and then venture back to the Listings later in your browsing session, you don’t have to redo your last search. We did a lot of work to make this feature as natural as possible to the end user while also being fun to use and play with.
What the typical user here will not see is the robust backend that we built on the Goodies website. We used WordPress as the content management system but expanded the base functionality of WordPress to provide all of the Goodies clients with their own portal to publish listings as they wish. In order to ensure quality control, we provided Lynn with a set of robust Administrative tools to ensure that every Goodie that is submitted is verified and processed by her before making their way onto the website. Want to see this in action? Head over to the Subscriptions Page and create an account (shameless plug for Lynn: you have to pay for it first!)
And that segues perfectly into the e-commerce portion. We built Goodies with Recurly as our e-commerce engine. Recurly automatically captures and processes credit card information that is used to purchase subscriptions and bills monthly according to the selected plan.
When we had a good beta system in place, the O3 Team and the Goodies Team spent a good 3 weeks bug testing across browsers and platforms to ensure that the public launch went as smooth as possible. Although this process was laborious, it was well worth it. We launched Goodies on November 29, right on schedule and with little to no glitches to speak of.
I hope you’ve enjoyed this insight into the process at O3 as well as learning a bit about the countless man hours on both our side and Lynn’s side to produce this truly amazing product. We couldn’t be any more proud of the Goodies website and we hope you enjoy it as much as we enjoyed building it for you!
O3 is a Web Design and Development Company based in Raleigh, North Carolina. Head over to our website to learn more about us and our team.