Brand Evolution: Menlo Hardwoods

Brand Evolution: Menlo Hardwoods

Menlo Hardwoods Case Study

The Kickoff

The engagement always starts with a series of interviews. Usually, I will have a one to two preliminary meetings with a perspective client. Once I fully understand the client’s needs, I will draft a scope of work and said deliverables. This is very important in that it keeps the lines of communication very open and ensures that both parties are on the same page. This is the client’s chance to look over the scope of work, without any type of commitment, and determine all the specifics of their wish list. Once they agree upon the scope, I can create an official estimate and contract. Then the real work begins.

Creative Strategy

Art Direction

j

Brand Development

Brand Guidelines

The Process

My next step here is to create an official questionnaire, a document with a series of questions which will help further define the needs and goal of the project. This is really helpful for the client because it engages them into the thought process. It’s one thing to tell me what you want to see, but it’s another thing to think intelligently about your project and articulate with words what it is exactly that you want.

From there, I will review the answers and we will have one more conversation to make sure we both understand what is needed to complete this project to the client’s satisfaction. I usually follow this up with a Goal and Strategy Document which outlines the project Goal and a Brand Definition. I want to define the brand and it’s significance is. This way the client can agree or disagree with the direction I want to move in. Once approved I can move on to research and the creation of my mood board.

The Mood Board

When I perform research, I tend to look at all different types of resources. I will reference books, other designers, competitors in the space, influences, etc. All the research is a process which helps nurture and foster the incubation of ideas and thoughts. These are all components which will eventually create the blueprint and foundation for the creative direction and theme for the project. I then translate my research and findings into a Mood Board. It is with the Mood Board that I incorporate preliminary colors, key words and phrases and design elements which pertain to the direction of the solution I want to move in. I am providing an example of Quest Groups’ Mood Board here.

The Design

Once the client approves the Mood Board and is happy with the direction of the project, I then start my sketching and visual development for the logo. The goal of any successful mark is that it MUST work in black and white first. Colors, visual treatments, shading, etc., these are all secondary. This is the reason why I always work in black and white in the beginning stages of design. I also like to work “rough” which means no ideas are ever labored or perfected, particularly in the early stages of development. I want the client see the work and idea, but also feel like they have the input in the design. This way, the design is more collaborative and the client feels their needs and ideas are being incorporated.

Design Presentation: Round 1

Given the subject material, we were presented with a really great opportunity to explore the marriage of natural and modern design elements. My goal was to present a marriage of these elements in a very graphic nature. My philosophy is that simple is better. So, in this first round, I wanted to present a simple black and white graphic element in conjunction with sophisticated typography. All of the organic shapes were directly associated with the products raw materials.

Design Presentation: Round 2

Because of the research and planning I do in addition to the series of client interviews, I am typically able to nail down a client’s vision for their project within the first to second round of design. I attribute this entirely to the process of asking the right questions and listening very closely to what the client wants.

In the case of Menlo Hardwoods, they were very happy with the first round of designs I presented to them. It wasn’t long before they decided on a specific direction for their new logo mark. Here you can see they wanted to move in the direction of using a logo in the shape of one of their gorgeous live edge wood tables. This allowed me to design several variations of the logo shape while incorporating the same typographic lock up. I also felt we were ready to present color at this point, which also directly referred back to the original mood board presentation.

Design Presentation: Round 3

At this stage, the client has chosen a definitive direction for the logo. After presenting the different options and variations, they chose a logo shape and color direction. So in this round, I was able to not only produce a final mark, but I made some final tweaks to streamline the typography as well as present variations of the mark itself for different applications.

The Final Product

Menlo Hardwoods Logo, Case Study

“We wanted our brand and logo to be able to translate our product into a persons mind without a word being said. Marwan was instrumental in providing us with a professional image that was more than we could of imagined. Marwan’s creativity and vision helped us create a brand identity with our business values together in a very authentic and bold LOGO that truly represents what we are. This is a partnership we have, and I would have no other than Marwan in my corner.”

George Bazlamit

Proprietor, Menlo Hardwoods

  • Marwan Salfiti, Art Director
    Design Philosophy: Experience
  • Marwan Salfiti, Art Director
    Facebook: Pages vs Groups
  • Marwan Salfiti, Art Director
    Design Philosophy: Success

UI Evolution: Andiamo! Group

UI Evolution: Andiamo! Group

Andiamo Group Case Study

Websites have become very sophisticated platforms in the last several years. We’ve gone from simple html pages, to blogs, to database driven sites with mobile companions, to web applications, to all-in-one responsive sites. I like to explain to my clients that a website really doesn’t do anything for your business unless you plan on putting the time and effort into marketing it properly. I generally explain to my clients that a website is simply just another tool in your marketing tool box. If you neglect your tool, it becomes ineffective and forgotten.

When I first met with Andiamo! Group, they were looking to completely redesign their entire website. What they hadn’t realized is that what they were looking for was a whole different animal; an online web application, known as Software as a Service (SaaS). This undertaking was quite a large step to move from a simple HTML site to a complex database driven site with multiple input/output components. Andiamo! Group was essentially looking to build an online application which would also serve as their website.

User Experience

User Interface

Information Architecutre

Art Direction

Step One: Setting Goals

In any project, you will always need to start with goals. Setting proper goals will always be your gauge for knowing if you are headed in the correct direction, if your actions and efforts are on track, if you are working on the correct solution, etc. So, I will always take the time to interview the client and follow that up with a questionnaire just to follow up with a written statement which gets signed off on. This will be the project’s goal, and ultimately, the gauge for which the success of the project will be measured against.

Step Two: Define The Users Roles

After going through the interview process, I understood what the client wanted the system to do and how they wanted it to perform. Before I started mapping out a userflow, I needed to understood how many types of users there would actually be and HOW they would interact with the system. So, in order to do this, I simply defined how the site would acquire it’s users and categorized them all. In this case, there were front end users and back end users. The simple categorization ended there. Once I dug down from there, we started to define the roles and nuances of each user.

Step Three: User Flow

Once I had all the user’s roles defined and the general idea of what was needed out of the system, I then needed to map out how both the front end and backend of the system needed to work. At this point, we are starting from scratch, so there is no system in place for us to base our ideas off of. We are defining roles and interactions from a blank slate.

Step Four: Process Map

Now that I got the user flow signed off on, we were getting that much closer to defining how the system was supposed to operate and what user actions would be taking place. But this definition would only be good enough to tell me which screens I needed to design, on the surface. This would include sign in screens, error pages, admin screens, content pages, etc. I still haven’t defined how the nuts and bolts of the application portion of this site was going to work and what it was going to achieve. So, I needed to map that out, and define any further interaction and screens needed. This is what the process map was for. This was a document which was the blueprint for the operation of this application and how it was going to tie in all the components for the interaction of the user roles. I believe this was the longest part of the process in that we went through several iterations before finalizing all details and interactions.

Step Five: Wireframes

Behind all successful websites are really well-planned wireframes. This means meticulous planning of the general areas of content distribution, page structure, organization and page layout. This process gives the client a really good understanding of how the pages content will be planned and designed before you spend countless hours on “designing” the look and feel of the site. With wireframes, I can quickly determine which pages will need templates, what are consistent elements needed throughout the site, which pages may been missed throughout the previous steps, and general content flow. The plus is that the client starts prepping content for the launch of the site. The plus for me, as a designer, I can start to forecast what I want the design to look like. The end result is a rough website designed in black and white with boxes and text.

Step Six: Screen Design

For a project of this size and this complex, the “design” seems to be the funnest and easiest part. This is also the part of the project which seems to move the quickest. Again, because I have worked so intimately with the client on what they want and expect out of the project, I usually don’t work past the first round or two for design before getting the look and feel approved. Once it is approved, I apply the same look and feel to all of the wireframes built out and designed for the project. Again, I am now going back to the wireframes and using those as my blueprint, or guide, for laying out and designing all of the graphics. Once I produce the templates, I get them signed off by my client and prepare my files for coding and development.

Step Seven: Beta Testing and Launch

Once my developers can provide me with a testing link, I usually scrub through the site thoroughly and make sure everything is working as planned. I use the site as all the different users and make sure that all the specified features and links are working for me and that there are no dead links or bugs. Once my quality control is complete, I can verify everything looks good and send it off to the client for their approval. I always encourage the client to test the same way and encourage bringing up all issues and errors. Once they give their blessing, I can then launch the site successfully.

Conclusion

The process to create a site, or in this case online application, is long and tedious. Yet, the majority of time is not spent on design, but rather strategy, definition and planning. These are the key elements to design and develop a solid user experience. With Andiamo! Group, we saw an immediate adoption of the system since we had gone from a very outdated system to a nice feature-rich design with many more offerings. Needless to say, the client was very happy and we achieved the project’s goal which we had defined from the onset.

“We hired Marwan to rebuild our entire website from scratch. 100+ web pages later, he delivered an outstanding product with great professional attention, quick turnaround and differentiating creativity. He translated our jumbled ideas into an artful, streamlined web marketing brand that is serving us phenomenally. His ability to create a SaaS product to help us capture our candidate and client details was technology turning-point for our firm. He was always available to help when we needed anything and he explained everything in detail so that we could manipulate our website and continue to grow it as the business grew. We also asked him to create a logo and business cards that could speak to the important values of our company which he did, exceeding our expectations. His skills as a designer are exemplary, and his work ethic is beyond reproach.”

Mark Gambirasi

CEO/Founder, Andiamo! Group

  • Marwan Salfiti, Art Director
    Design Philosophy: Designers
  • MenloHardwoods.com
    Project Launch: Menlo Hardwoods
  • Marwan Salfiti, Art Director
    Endorsement: Menlo Hardwoods
  • St Ignatius College Prep, BrandWell Creative
    New Look for SIPrep.org

Case Study: Armadillo Willy’s

Case Study: Armadillo Willy’s

Case Study, Armadillo Willy's

Challenge

Armadillo Willy’s is one of the best barbecues this side of Texas! They have the charm, the attitude, the taste and the popularity to prove it. Their old site did not communicate any of this. It did not reflect their personality, their family style setting and, more importantly, the quality and taste of their food.

Approach

Armadillo Willy’s is really big into family and tradition. Their restaurants have a certain presence to them which was open and friendly. We wanted to infuse that same style into the look and feel of their website. Since this was a family operation, we wanted the customers to get to know the faces behind the magic. Also, we needed to showcase their award winning barbecue in a way that wasn’t being shown on their old site. ArmadilloWillys.com needed to be the friendly family place on the internet as it was in real person.

Results

The new space we created for Armadillo Willy’s instantly let us know that we were on the right track. With an increase in the amount of traffic and a significant drop in the bounce rate, we determined that the Armadillo fans loved their new site. Armadillo Willy’s is now able to creatively market their online presence with a more impactful and lasting impression.

Keypoints

  • 40% Increase of New Users
  • Bounce Rate decreased 50%
  • 2X increase in pages/visit
  • Increase in Brand Recognition

Testimony

“You exceeded our expectations creatively!… Very professional, very accommodating, very enjoyable experience. Thank you all, it was a genuine pleasure to work with you.”

John Berwald – Founder, Armadillo Willy’s

  • What's The Big Idea, Marwan Salfiti
    What's The Big Idea
  • Marwan Salfiti, Art Director
    Facebook: Pages vs Groups
  • Marwan Salfiti, Art Director
    Endorsement: Raffi Aghapekian

Case Study: Andiamo! Group

Case Study: Andiamo! Group

Adiamo! Group, Case Study

Challenge

Andiamo! Group, the Bay Area’s premier sales force staffing agency, was planning to refresh their online presence. They understood with the rise of recent competitors, they really needed to step up their game and not only reinvent their online presence, but also enhance their user’s experience and interaction.

Approach

With a large volume of applicants coming to access the information from the main company site, we ventured out to completely overhaul the user’s experience. We needed to streamline Andiamo!’s candidate application and interview process, as well as improve the company’s workflow process. The goal was to develop a powerful online application which would manage several databases as well as nurture the applicant/interviewer relationship.

Results

This new look presented Andiamo! in a more professional manner. We produced a powerful networking/marketing tool which now helps Andiamo! Group stay in close communication with their past and current applicants. In addition, Andiamo! is able to minimize the time spent coaching an applicant through the “system”. This allows the team to concentrate more on lead generation and, ultimately, more revenue.

Keypoints

  • Business Networking Flexibility
  • Increased Return on Investment
  • Dynamic Content Integration
  • Application tracking system
  • User trend analysis

Testimony

“Marwan really took our expectations to a whole new level with this project. We wanted a web site and he delivered a new way for us to work!”

Jessica Gambirasi – Partner

  • Marwan Salfiti, Art Director
    Design Philosophy: Ideas
  • Grumpy Bert, brooklyn, BrandWell Creative
    We Love to See Our Clients Succeed
  • Elliott & Elliott, Marwan Salfiti
    Project Launch: Elliott & Elliott