When it comes to an eCommerce site, everyone involved is going to have ideas about how they want their dream site to look and function. But while everyone will know what they want, not everyone understands how the overall eCommerce site design process works. I wanted to share some behind-the-scenes knowledge so that you have a better idea of what designing a site entails and how to get the eCommerce site of your dreams.
First, let’s make sure we’re all on the same page. As the role of the designer changes within business, the clarity of design terms is becoming more and more important. During a site redesign project, for example, it is not uncommon to have someone request an example of the completed site from the designer. Perhaps the project manager or client asks for “a wireframe, but with images and navigation examples,” or “a prototype, sort of like a mockup.” This leaves the designer wondering if they have been tasked with creating a wireframe, mockup, or prototype. For many people, those three words are interchangeable. In reality, however, each of those terms represents a specific tier of web design.
Wireframes are used at the beginning of the design process to help map out the basic site layout and hierarchy without spending too much time finessing the details. Wireframing is a good tool for making sure all of the important components are included in the design.
Mockups come after the wireframe is approved and add another level of detail and visual accuracy to the design. Colors, hierarchy and navigation are fleshed out at this stage, and clients tend to prefer these as a deliverable because they have a closer tie to the final product.
Prototypes offer the highest fidelity (meaning they are the closest to a final, live site) and help clients understand the interactions that will occur on the site. Hovers, animations, drop downs, and other user interactions can be included in the prototype to help clients understand small details that will be incorporated into the final product.
Out of the three stages, mockups are often the most effective at communicating the visual design goals of a project. They provide an accurate look at the aesthetics of the final product and a general idea of how it might function. The eBook “The Guide to Mockups” from UXPin deals with the method, uses and importance of (shocker!) mockups.
Aside from the basics surrounding the implementation of mockups, the PDF focuses on the importance of determining the level of fidelity required for each stage of the design process. In order to determine the necessary level of fidelity, and thus whether you need to create a wireframe, mockup or prototype, it is important to weigh the value of the deliverable against the amount of time it will take to make. Some fidelity suggestions include:
“The Guide to Mockups” also includes suggestions for choosing the right tool to create mockups: mockup-specific software, graphic design tools or lightly coded html mockups. Again, this decision stems from the level of fidelity required to help clients and test users understand the plan for the site. Suggestions for how to use mockups in the design process include:
Follow this link to download the PDF and learn how to get the most out of your mockup.
Now that we have the terminology straight, let’s talk about how to best provide design feedback to your UI/UX designer. I have received my fair share of design feedback, some of it more beneficial than others. In order to accurately articulate your ideas to your designer, follow this list of dos and don’ts.
A note to Briteskies clients: Each of these “don’ts” have been committed by multiple clients and this list is not meant to single anyone out. However, if in the future you provide feedback that falls on the “don’t” list, expect a link to this blog as my response to your requests.
All of the design work on your site should relate back to your business goals for the project. You have more knowledge of your business and its challenges than your designer, so make sure to communicate these problems and reference them throughout the project. It can also be helpful to rank your goals in order of importance and make sure the team is aligned to the number one priority. While many designers can create beautiful work, the most successful designs directly address your business needs and goals.
It’s great that you know what you like, but do your personal tastes align with your business goals? Maybe not. Every design decision should be directly related to solving problems for your business and helping to address your business goals. Try to phrase your feedback in a way that places the focus on your business problems and not your likes and dislikes, because honestly, what you like doesn’t matter; what your target audience likes matters.
Say This: “Our customers are looking for a welcoming and peaceful shopping experience, and the red seems too aggressive for our brand.”
Not That: “I don’t like red. Use blue, that’s my favorite color.”
Designers are problem solvers, and you hired them to solve your problems. Your job during the process is to provide clear problems for your designer to solve. Most likely, your project will include large- and small-scale problems that need to be addressed. By providing your designer with problem-focused feedback instead of solution-focused feedback you allow them to approach each problem as a piece of the whole.
You may feel like you are speeding up the process by sending specific feedback to your designer like, “make the buttons larger and change the color to green and move them up on the page,” but providing your designer with purely executional tasks like this is not the best use of their skillset. In this situation, a better method is to share your concern that the buttons may be overlooked on the page. Your designer will be able to address that underlying problem and may have a solution you wouldn’t have considered. Focusing on small details instead of larger problems can make the site feel disjointed and is not the best way to reach your goals.
You hired a designer to work through the project challenges and develop a well-considered solution. By creating your own mockups, you limit the options for the designer and may create roadblocks down the line. Focus on the problems your customers might experience with the design and let your designer find a solution. If you desperately want to provide examples for the design, find websites that you think are successful and be sure to explain why you think their approach would address your business goals.
Say This: “This company’s website is clean and easy to use, which will resonate with our users since they are tech-savvy and like to stay current.”
Not That: “I made this PowerPoint mockup for the site. I like the popup on X’s website and the button style of Y’s website, and like how there are four pictures on Z’s site, so I combined them here.”
I’m sure your Great Aunt Ethel has a wonderful eye for design, but is her opinion really that important?
Before you begin the project, make sure you know who will be making the final decision and remember that there is no need to gather opinions from 50 people when five will do. You cannot please everyone, and knowing up front whose opinions matter and why will save everyone involved a lot of aggravation.
Think the feedback you are about to send your designer might fall on the "don’t" list? Run it by us first.
No Comments Yet
Let us know what you think