Developer’s Toolbox: 5 Keys To Wireframing a Magento Website

In the years that I’ve been with Groove, the practice and process that we’ve exercised for wireframing Magento eCommerce websites has evolved tremendously (and will continue to do so) into something now that is chock-full of innovation and creativity. And, as one would expect, our end result with web design projects has improved significantly as well. So, today I wanted to take some time out to share a general guide to the wireframe process for anyone who's relatively new to web design and development following five easy steps - enjoy!

Step 1: Review Existing Site Functionality

If a client has existing systems in place for a website or brick and mortar store, you will want a list of these right from the beginning. Make sure to include what POS system is being used and what (if any) special functionality their current eCommerce system has. Review what customer emails are sent out for both newsletter subscriptions and order notifications and whether or not they integrate with any third party systems that you could monitor or use to send automated follow up emails. Next, you’ll want to look at their order fulfillment systems and any automated processes that will need to be carried over to their new site.

Special Note: There can definitely be potential conflicts and custom work that will need to be completed in order to successfully integrate with Magento and it's better to know up front than find out later in the process – reviewing all existing client systems with a fine comb is paramount here.

Step 2: Prepare a List of Functional Specs

How you accomplish building your website’s functional specs document after you’ve completed your review of the existing site’s functionality will vary greatly depending upon everyone’s familiarity with Magento.

If you and your client are at a novice level with Magento, you will want to take a look at Magento’s website demo and become familiar with all of the primary features inherent with the platform. You'll also want to have the client look at their favorite websites and see if there is anything new and interesting that those sites are using that doesn't seem to exist as a default feature in Magento. Then, take a look at the Magento Extensions library and see if there is anything available that could provide that functionality; something like a product "Quick View" would be one example here.

If you and your client are more familiar with Magento, you may already have an idea of what features you want to include based on initial conversations. List out as much information and try to get as detailed as possible with what your client wants and how it should work.

Once you have a list of what the client is looking for, an easy next step could be to break their list down by "Must Have" and "Would Like To Have" columns. Then, have your client gather feedback from friends, co-workers, and/or potential customers about what they like or don't like about similar websites. After this, you should have what you need for a completed functional specs document.

Step 3: Grab a Pen and Paper

So, now that you have your functional specs document ready, it must be time to jump on your computer and start building out the website, right? Wrong! Good design processes start with brainstorming and generating rough ideas. While it's tempting to open up a software program and start building out a site right from the beginning, you might be missing out on valuable ideas and concepts that are more quickly visualized and explored through basic sketches and thumbnails; so, grab some letterhead paper or a sketchbook and get creative!

When starting out, try to come up with ideas for a Home Page, a Catalog Page, a Basic Product Page, and a Basic Content Page. Put your ideas up on a bulletin board or wall and review with comments – pull your coworkers in for their feedback as well. When you want to add some details to your favorite concepts, get some pens and markers and go bigger; start to flesh out some more detailed style choices and color palettes here. Also, consider checking out The Messy Art Of UX Sketching - it’s a great reference video for this part of the process that I particularly enjoy.

Special Note: You may notice that the sketcher in the video is using Prismacolor Markers – these come in a wide range of colors, including a set of Pantone Greys, that make a great base for any design. And on the subject of supplies, it’s worth noting that you can purchase sketchbooks with pre-made browser windows but I personally like using sheets of letterhead paper; this site has pre-made windows in a variety of formats that you can print out and use for sketches.

Step 4: Build your Digital Wireframes

Once you have your sketches and ideas finalized, you’ll need to pick a software program to build out the wireframes that will be used as the basis for the site design. One program that I personally enjoy using for this is Balsamiq – it contains many great pre-made UI elements and has a pretty easy-to-use interface. From here, you can begin to build a site grid that will provide more exact details about the number of columns, block and column widths, and block positions. You can also begin to fill in some content here, starting with common site elements such as the Site Navigation, Header and Footer links, and Sidebar menus and links – use this step to try and visualize how the basic elements of the site are going to react to real life usage.

Special Note: You should also think about how the site design will react to unanticipated layout changes as well as what kinds of issues could arise with whitespace, a lack of white space, or too much content added in the future. A good rule of thumb is to include documentation on these potential issues and how to properly address them should they ever occur.

Step 5: Simulate User Functionality

Once you have built all of your page template wireframes in an editor like Balsamiq, you will want to view how some interactive elements will play out in real time. You should try to simulate any important Javascript and Ajax Events on button clicks and make sure the underlying events have been wireframed out as well. An example of this would be the design for a "Quick Look" box, or a "Pop-Up or Lightboxed" element. Review the actions that occur when buttons are clicked and think about what could be done to enhance the experience; from here, build a wireframe for that instance if necessary. Refer to the Magento Demo site (linked above) and see what actions occur by default and make notes of what you'd like to do to improve on them. This is how you will build an outline that can be used to enhance your site during the development stages.

Final Thoughts

While comprehensive wireframing for Magento can be a tough sell to a client due to the fact that it often requires a great deal of trust and visualization, it’s an important part, at least in my personal opinion, of building a successful website. During thumbnails and wireframing, the result is not always going to look polished, which can be difficult to relay to the client. The trick here, and one that any good web agency should really follow, is to know how to guide a client throughout the entire design process and educate them from the beginning so that they can provide useful feedback when necessary. After all, we want to mold the clients’ ideas and interests into a truly great web experience, not work inside of a vacuum. Then, we can all feel infinitely more comfortable and confident that the end result will be something to be proud of!