Everything Tea Home Page Redesign Everything Tea is a small business that has been supplying the Pacific Northwest with loose-leaf teas for over fourteen years. After visiting the retail store one weekend, I decided to look up the website and see if I could order their teas on-line. Upon visiting the site, I was surprised to find out that I could only order a few of the teas that they had available, and that the site and the browsing experience as a whole was confusing and appeared to be doing the business a disservice. As a result of this visit I decided to undertake a redesign exercise aimed at improving the layout and navigation of the site as well as improving its overall visual aesthetic. I started by conducting a few informal interviews with some of the patrons and one of the employees to gain a better understanding of what should be included in the businesses website. Everyone agreed that the site should provide information on the various types of teas available from the business and that it also should give the customers the ability to easily order the teas that they want in whatever quantity they desire without requiring them to call the retail store. It was also determined that there should be places on the home page for promoting products that the store would like to feature and that customers may be interested in, and that links to the businesses social media sites and Newsletter sign up should be clearly visible. I took this information and made a series of sketches that were later refined in Balsamiq into the wireframe you see here.
To keep the design clean and simple, I decided to limit the top bar to just the business logo, the sites main navigation links and the customers account sign in and creation link. Below that I decided to place a large carousel that could highlight particular types of teas as well as any seasonal promotions, and I added an additional place for "Featured" or "Top Selling" products so that customers could access them quickly and easily. I intentionally kept the design simple and centered most of the elements with enough room to make the site easier to scale to a mobile version. After showing the wireframe to a few people and making final adjustments, I used Photoshop and made the high-fidelity mockup that you see here.