Web Design Case study

It is well known that the internet has changed the way many businesses compete and operate. While most media attention is directed at either new industries and the most popular eCommerce websites, the World Wide Web has also impacted many smaller and lesser known companies, many which do not make the news headlines. However, since the vast majority of business are classified as small businesses, there is much to be learned from the way they go about the website design process.

The Picture Frame Guys is a typical example of a small business in an industry made up of many smaller players. This case study reviews this company’s efforts to become a leading eCommerce player through the development of a best-in-class website. The case study details the company’s search for a website design partner that could meet their current and future business requirements without breaking the marketing budget. This information may be helpful to other small businesses who have the ambition to grow their internet presence without spending vast sums of money.

Background
Prior to the internet, the custom framing industry was one that was extremely localized. This was due to the fact that any given framing store’s potential market was limited to a few square blocks from the retail store’s location. The only way such a business could grow was either by attracting more customers to the same store or by opening new stores in other geographical markets. Both of these options presented significant challenges.

In the case of attracting new customers, a successful marketing campaign could only increase sales by 10% or 15% and only for a limited time. While this increase in sales would certainly be beneficial to the bottom line, it would have a limited benefit on long-term financial results as at some point all marketing campaigns come to an end.

Regarding the second option, opening new stores could attract entirely new customers. However, finding new locations required months of research to find the right location, significant upfront capital outlay for furniture and fixtures, and necessitated the need to manage multiple locations, including the hiring of employees. Furthermore, it is quite likely that competitors already existed in any new geography so it would take time to attract new customers away from these established retailers.

In contrast, selling picture frames via the internet had the benefit of expanding the company’s potential market from a single neighborhood to anybody with an internet connection. Furthermore, an internet site would be open 24/7 and would not require employees to staff.

While this sounds straightforward enough, the solution was full of its own challenges. First, selling picture frames online required specific coding challenges associated with selling custom-made goods. Second, being a small business with limited funds, it was imperative to find a website design partner that did not break the bank. The next section breaks these challenges down in more detail.

Industry Challenges
Selling frames online is tricky because every single item sold has a different price. Depending on what type of molding a customer purchases, what size of product is purchased, and which accessories such as glass, matting and glazing are selected, the price varies accordingly. Calculating a frame’s price is difficult enough in a traditional frame shop. Doing it online in a way that the information is presented to the customer in an easy-to-understand and straightforward way is not trivial. Therefore, the Picture Frame Guys needed to find not just an internet company that could produce attractive websites, but one that could handle the complex coding requirements associated with pricing.

The Search For a Website Design Partner
Given these challenges, the Picture Frame Guys broke down the search for a website design partner into two major activities. First, an extensive internet search was completed to identify the top 5 potential partners. These were found by completing a Google search, followed by thoroughly reviewing each company’s website. This included learning about each company’s design philosophy, checking their portfolio and reviewing at least 3 sites listed in the portfolio.

Second, a detailed and well thought out requirements document was put together. The goal of this document was to list all design and functionality requirements in detail. The idea was that the more detailed the requirements document, the better quality quotes would be received.

One the quotes were received, instead of simply selecting the lowest price, the Picture Frame Guys team went through each quote in detail. They scored each company on a variety of points and recorded this information in an Excel matrix. Based on the matrix, the top 3 companies were contacted for references. Following these calls, the top 2 providers were asked to have a face-to-face meeting with the Picture Frame Guys. The goal of the face-to-face was less to evaluate technical expertise and more to see which of the two company’s would best fit the Picture Frame Guys’ culture.

Website Design Firm Selected
After going through this rigorous process, Visualscope Studios was selected as the design partner. There were three reasons that this company was chosen. First, Visualscope’s portfolio had both depth and breadth in terms of design and technical capabilities. Every site in their portfolio was well laid out, attractive and informative without being overpowering or busy. The company did not develop sites with a one-size-fits-all approach. They had also created several eCommerce sites.

Second, the company had demonstrated expertise in search engine marketing and SEO. In fact, it turned out that Visualscope was one of the leading SEO firms in the country and this was a capability that the Picture Frame Guys would be requiring at some point in their online growth efforts.

Finally, the website design team at Visualscope was a great fit for the Picture Frame Guys culture. The designers were relaxed and easy-going. They could answer questions clearly and concisely without using industry jargon. It is also interesting that Visualscope was the lowest cost of the proposals received.

Conclusion
Once the business was awarded to Visualscope studios, the project took 8 weeks to complete. This included a technical validation, user acceptance testing, integration testing, and site launch. The overall process was smooth and completed on schedule. The result was a website that was far superior than any competitor’s.

The key take-aways for small businesses wishing to improve their online presence is to put time into the process upfront. By doing their homework and clearly understanding what they wish to get from a website upgrade, they will be in a better position to drive the quoting process and thereby find the design partner that best meets their needs.

Mock Up article on Design Modo

The What, Why, and How of Mockups

Jerry Cao  •  Design, UX Design  •  March 4, 2015  •  0 Comments

Before we get into how to make the most of your mockups, it helps to know what exactly they are — and what they’re not.

As discussed in The Guide to Wireframing, mockups, wireframes, and prototypes can be confused with each other, making it difficult to find accurate information on each. However, all are integral parts of the UX design process, and so each should be given due attention.

Design Funnel

Source: UX Booth

We’ll start our exploration of mockups by giving a broad overview, discussing the terminology, and showing how they fit into the design process as a whole.

A Word about Wording

Getting back to basics, before a website or app is released, most of them go through three preliminary stages. These stages allow the team, and sometimes a few select users, to test its appearance, structure, and functionality before its release. Ideally, these preliminary stages allow you to fix any problems while they’re still small, and fine-tune your design to communicate your message most clearly.

But because these phases are similar, they’re often confused with each other. That’s why we’ll take a moment here to clarify the proper terminology for each. Marcin Treder lists the three formative stages of the UX design process as wireframes, mockups, and prototypes. Let’s take a deeper look at each stage.

1. Wireframes

Wireframes are typically a low-fidelity, bare-bones blueprint, usually represented with gray boxes and placeholders for detailed content. Their goal is to help establish what goes where, without consuming too much time on aesthetics just yet. A good wireframe should explain:

  • how the content is grouped
  • how the information is structured
  • the most basic visuals involved in the UI interaction

Wireframes

Source: User Testing & Design

The purpose of a wireframe is to map out concretely for the entire team how the website should be designed. As described in the free Guide to Wireframing, the main goals of wireframing are documentation and design structure, but can also be shown to clients and stakeholders to get feedback while changes aren’t painstakingly difficult.

To see how high-fidelity designs can start as wireframes, check out UXPorn and hover over each design to see the transformations.

2. Mockups

The main character of our Guide to Mockups, the mockup is typically a mid- to high-fidelity representation of the product’s appearance, and shows the basics of its functionality. Mockups fill in the visual details (such as colors, typography, etc.) and are usually static. By looking at a mockup, you should get a good idea of how the final product will look and a rough idea of how it might function (even if the functions aren’t yet working). A mockup can be considered a high-profile visual design draft.

Mockups

Source: Mockup via UXPin

The wireframe lays the foundation and the mockup adds visual richness. While the mockup furthers the wireframe’s purpose of documentation and organizing the team’s vision, it does have an extra advantage the wireframe does not: with its superior visuals, the mockup is more impressive to stakeholders and investors, and so better at generating interest.

While the wireframe is visually stunted, the mockup is close to the final version in appearance, though it lacks the functionality of a prototype. In this way the mockup acts as the bridge between the wireframe and the prototype.

3. Prototypes

The end of the beginning stages, the prototype can be a low- or high-fidelity representation of the product that includes functionality and the finer point of the UI design. In addition to the information structure and visualizations of the previous two phases, the prototype introduces more depth to the early UI, allowing users to:

  • experience actual content
  • interact with the UI in a way similar to the final product
  • predict and solve usability problems before further development

When it comes to finding the right fidelity for prototypes, remember that going low-fi will let you test and tweak faster, while going hi-fi will get you as close to the final product as possible without sinking resources into development.

A common design process is starting with a low-fi prototype (similar to what Apple does by creating hundreds of early prototypes), and then iterating into high-fidelity prototypes. That way, you reap the benefits of customer-driven design due to early testing (as advised by notable entrepreneur Andrew Chen) as well as the clear specifications demonstrated by high fidelity (as explained by SVPG Partner Marty Cagan).

Prototypes

Source: UXPin

A high-fidelity prototype should be one step below the final product; it should look and function as closely to the final version as possible.

The Differences Between Wireframes and Mockups

While the distinctions of each phase are clearly defined, the truth is that even seasoned designers sometimes confuse the names of the different phases. Like we discuss in The Guide to Mockups, perhaps the most common mix-up happens with wireframes and mockups.

There’s no doubt that wireframes and mockups are similar: they both are static phases of UI design, they both deal primarily with how the site looks, and they both don’t require functionality. The main difference is in their quality. Libby Fisher, freelance web developer and design blogger, describes the mockup as the “decorated” version of a wireframe.

While wireframes are merely shapes and placeholders, mockups are designed to give the viewer an accurate impression of what the final product will look like. To help illustrate the differences, we’ll examine a sample of each, taken from our User Testing & Design e-book, which chronicles our exercise of improving Yelp based on usability testing.

Yelp

Source: UXPin Low-Fidelity Yelp Design

We created the above wireframe as a roadmap for the improvements we wanted to make on Yelp’s website. Compared with the current Yelp site, you can see how the wireframe is the skeleton of the new site with a larger Search bar and simplified categories.

Notice the low fidelity and lack of detail — flourishes aren’t necessary at this stage. Think of wireframing as doing the heavy lifting, and save the finesse for mockups. Our goal was to first revise the structure of the site indicated by the qualitative insights and quantitative insights of the usability testing. The numbered red dots are our comments, explaining the changes so everyone is on the same page. This wireframe was later turned into a lo-fi prototype by adding interactions from our animations libraries.

Yelp

Source: UXPin

Here is our mockup. The key difference, obviously, is the graphic detail — colors, icons, photos, etc. These visuals aren’t just cosmetic, they also give an idea of how the functionality works. For example, even though it’s not a prototype, you can alter a few elements to give stakeholders a taste of the interactive states (look at what we did to the “food” category to show what it looks like when clicked). Compare this mockup to the wireframe: the pieces are all the same and all in the same places, but the look and feel of the mockup is a lot more like the final product — and that is the fundamental difference between wireframes and mockups.

Don’t Mock Mockups

While some designers hold the opinion that mockups aren’t necessary (especially for the rapid prototyping of Lean UX), mockups are extremely helpful for exploring visual design decisions before you need to live with the consequences of code. Because mockups are a transitional phase between wireframes and prototypes, they are a sandbox for visual experimentation. There’s a lot of details to keep track of in the UX design and development process, and overlooking the mockup phase can lead to subpar visuals.

Mockups

Source: UXPorn

Anthony Tseng, editor-in-chief for UX Movement, believes in the power of both mockups and wireframes. In his opinion, design is “the synthesis of form and content.” The wireframe outlines the basic structure of the content, while mockups present a vision of the form. Thus, a skilled designer will spend the appropriate amount of time perfecting both, and that means using wireframes and mockups.

The importance of mockups is worth elaborating upon. Bima Arafah, freelance web designer and design author, explains why mockups are an essential part of the process. According to him, mockups are worthwhile for several reasons:

  • Organization of details — Mockups can help reveal any clashing visual elements in a way that mirrors the final design. As discussed in Web UI Best Design Practices, fine details such as color, contrast, and visual hierarchies should be determined in the mockup stage (where they can be easily changed) and solidified in the development stage.
  • Design implementation — How does your initial design perform? From a usability perspective, a mockup lets you test the visual details and change them before it’s committed to code.
  • Immersion in the user’s perspective — As you add detail to the wireframe (or maybe you jump right into a mockup), you are constantly looking at and altering a design that is closer to the final state. It’s a subtle difference, but an important one, since a high-fidelity mindset helps you make design decisions from the user’s point of view.
  • Flexibility — Revisions that carry over from wireframing can stack up pretty quickly, but making them in a mockup is (comparatively) easy compared to CSS or HTML.

A lot of the criticism against mockups comes from the time and energy it takes to create something that eventually needs to be rebuilt in HTML or CSS. But with the availability of mockup tools, like Moqups for lower fidelity or UXPin for all types of fidelity, designers can create mockups faster with premade element libraries.

Context for Mockups

With this discussion of the benefits of mockups, it’s necessary to mention that there are some pitfalls to watch out for, namely in how it opens the product up to unjust criticism.

Luke Wroblewski, product designer for Google, explains how the presentation of a mockup will affect the feedback it receives. A mockup is static, but final products are rich and interactive. When showing a mockup to stakeholders, you’re inherently at a disadvantage since the mockup currently exists in a vacuum. That’s why you should frame the presentation in the context of what problem the product design is solving — otherwise stakeholders may request features simply because they’re focusing on a tree and can’t see the forest yet.

Context for Mockups

Source: Collaboration via UXPin

Remember that mockups are still a design deliverable and just a means to the final design. This will guide the feedback more towards how it accomplishes its goal, and less towards criticism on the mockup itself.

You also don’t want to let stakeholders have the final say in the mockup decisions, as this can lead to a dreaded design by committee, or at least diminishes the value of the designer in the eyes of the stakeholders. Find the right mockup tool for the right fidelity (mid or high), conduct usability testing to back up your decisions, and always provide context when presenting the mockup.

Takeaway

As the middle phase between the wireframe and the prototype, the mockup is a key component not just for the design team, but also for the stakeholders. It helps find and fix visual inconsistencies earlier in the process before they become too costly.

By now you understand what a mockup is (and is not), how it fits in to the development process, and why you shouldn’t ignore it. Equally important, you also want to create context when presenting mockups since the design isn’t final and the functionality can’t be experienced.

For more practical advice on different types of mockups, download the free The Guide to Mockups. Tips are included from UI experts along with best practices for Photoshop & Sketch.

Design Modo article

Why Good Design Gets Better Marketing Results

Carrie Cousins  •  Design  •  March 27, 2015  •  1 Comment

As designers we all know the importance of visually pleasing websites. But it goes much deeper than that. Good design does more than just look good; it’s a branding and marketing tool that really can help deliver results.

Here, we’ll look at 10 reasons why good design matters in terms of marketing and a few websites and brands that communicate those messages and ideas beautifully.

First Impression

Marketing Design

Teye

Chicken bot

It starts with the first things a user sees about your website – color, typography and images. What message do these element send? Is the communication clear and organized or more chaotic and irrational? Whatever message a user gleans from this first glance will shape all communication from that point forward.

Your site needs to be designed well so that users find a site they will return to in the future. It needs to have a design that matches the content and information that’s easy to see and digest.

Lasting Impression

Web Design Marketing

After that initial glance, users need to have a reason to stick around or think about your website, company or brand in more depth. So give them more. Show users something that is unique to you with the design. (Great visuals are an easy way to do this.)

A great-looking homepage is awesome, but every other page, element and tool on your site must be designed equally well. Think of it this way: It is likely that more than half of your users will land on your site starting with a page other than the homepage.

Create Loyalty

Dsquared

After you’ve hooked a user for a single visit, you want the design to encourage them to come back and become a loyal user. A great logo, impactful color palette and easy to read type choices are a quick way to get there.

Establish a connection that users don’t want to lose with the design. You can further establish loyalty with words or images that users want to be associated with. They should look at your website and see themselves (or the self they desire to be).

Establish Recognition

Aquest

Designing with consistency will help users find you. Almost anyone, anywhere around the world can identify the golden arches that signify the McDonald’s brand. You need a design scheme that does this very thing.

Stick to a distinct style, color palette, type palette, voice and message. Your logo or branding should always be clear and integrated into the design. A great visual presence means nothing if users don’t know who made it or what it represents.

Style and Decision-Making

Giacomorelli

When it comes to style and decision-making the number one goal should be consistency. Who are you? What do you want to be? Why do users want to establish a connection? If you are thinking about these questions in the design process, you will likely make better choices about the project in general.

Answer those questions with design. And create a unified look and presence across the web. Use the same visuals on your website, mobile app, social media, printed materials and any other marketing products you create. (It would likely benefit you to create a style guide detailing all these rules as well.)

Easy to Use and Connect

BH

Let’s not forget that connections with users need to be easy. This includes a handful of design and development concept – your site should load fast, use modern web and HTML technology and have user controls and function in a common way.

A site that is easy to use will make users relate to you more. Pleasurable experiences help bring people back and encourage them to become more loyal visitors.

Create a Common Story

Aether

Part of your design and marketing plan should include a story. The visuals should communicate something to users that they can remember and retell, which can be an effective method for generating more users.

Sometimes finding that story can be tough. Consider things like how you got your start in business, why you create a certain product or thing or ways you work within your community. Try to connect on a human and individual level with each user.

Encourage Sharing

Lestourelles

Include plenty of opportunities for users to share. And encourage that behavior. This form of social marketing can take some of the weight off you and help your brand establish a community feel because new users are introduced to your website or business by someone else they know.

Design social share buttons that are easy to use and find. Preload your messaging, text and images into the prompts to manage the message that goes out. (A large percentage of users will share using your text if it exists.)

Establish Trust Before Business

Basic

Your design should help establish trust, and then encourage visitors to do business. This can be pretty tricky.

Elements such as color and typography can impact trust. (When in doubt, opt for more traditional choices, especially if you have an ecommerce site.) Add other design elements that encourage trust as well such as links to media coverage, testimonials from clients, showing numbers of social media connections, using your own images and photos and creating a website that is yours and not just a template.

Convert User Actions

Impossible bureau

Finally, for the best marketing results you need a design that encourages action. All buttons should be designed in such a way that they are easy to find, click (or tap) and get to the next step.

Navigational elements and instructions should be clear and concise. Your design will fail you if users don’t know who to complete the action the site is designed for them to do. Make it easy. Calls to action should be some of the most prominent and easy to find elements across your website.

Conclusion

Many of the concepts you likely already consider going into the design process will impact your design as a marketing tool as well. Techniques from color to type to images create an overall brand message and connection to users.

Remember that everything you do, or say or design is part of the story of your brand or company. Good design visually equates to good company.

This post is also available in: Spanish

Why branding Matters an article from forbes

In one sense, perhaps the most important sense, a brand is a promise. Think of some top brands and you immediately know what they promise: McDonald’s, Coca Cola, Budweiser, Ford, Apple, MetLife.

You know what you’re going to get with a well-branded product or service.

In another sense, a brand is a specific combination of logo, words, type font, design, colors, personality, price, service, etc.

It’s also a bundle of attributes. Think of Volvo, for instance, and your first thoughts are probably going to be something like “well built, comfortable, Swedish” and, most of all, “safety.”

The promise, look, personality and attributes can eventually acquire a special patina of what I call “me” appeal. Buying a certain brand says something about the person who buys it. Apple has that patina. So does Prius. The booze and clothing businesses are filled with patina products: Cristal, Guinness, Ralph Lauren, Manolo Blahnik.

All of this can lead to sub-brands, like iPhone and iPad which acquire the aura of the parent brand.

It takes a lot of time, money and very hard work to build and maintain great brands like that, brands that can speak volumes in just a few syllables.

That’s why I’m usually rendered speechless when a prospective client asks us for a quick “Brand”.

 It happens a lot more often than you’d think. I love developing brands from scratch but when the client needs something quick, there’d better be a strong existing brand already in place.

If you’re going to develop your brand, the last thing you want to do is follow the beaten path. You want to head down your own road. Your brand has to plant itself in the hearts and minds (especially hearts) of prospects and customers.

It also has to be memorable. Your brand is the focus of all your marketing efforts (yes, it needs to say something about your company, connect with your target market, be motivating in some way and always create loyalty).

Sometimes a brand is memorable because of the little things.
TD Bank has a special place in their branches for you to deposit all those coins you collect in jars. It’s called the Penny Arcade and makes it a fun game and you can even win prizes. If your kids collect coins, you might want to open a TD account so they can enjoy the process of saving their money there. Years ago Dime Savings Bank in New York had a small dime carrier it gave to kids and then they’d fill up the 50 slots with a dime in each one (Dime Bank, get it?) and bring it to exchange for a $5.00 bill. Little things can mean a lot (and little things are all do-able on the smallest budget.)

When you think about your brand, think about all the elements: promise, personality, look, voice, service, attributes, memorability, even patina. There’s a good chance that if you ask customers, prospects and competitors about it, you’ll be surprised at how strong your brand actually is.

It’s shorthand for what you are.

Does your brand make you feel great about your own company? This is our logo on the wall when you walk into our agency office. It always makes us smile!