Redesign 4: Alexandra & Company Website

Background
I redesigned the website for Alexandra and Company (http://www.alexandraandco.com/), a company that manufactures and sells college sorority items. The primary reason I wanted to redesign this site was because the original looks more like it sells products to young girls rather than to college-age woman. It needed a redesign for an older audience.

So, my task was to lighten the colors without being partial to any particular sorority, bring the products front-and-center (since that’s the whole point of the website anyway), and present products and information in logical ways.


Design Principles
Contrast

The existing website had some issues with contrast­­ regarding colors and text. First, the dark brown background didn’t seem to suit the website at all. Plus, the two shades of brown (lighter brown on top with the logo versus the darker brown beneath the banner) were too similar. I wondered why they chose to do that since the blue striped divider separated the two sections well enough.

Additionally, the existing site had way too many fonts in way too many colors. Most of the colors had trouble standing out from the dark background, too. Because the company’s products are available in a variety of colors, I think they tried to bring that through into the design of the site itself. By doing so, however, all the different colors make the site seem disorganized––even though most of the designs are carried over from page to page.

To address these issues, I scaled down the color scheme for the redesigned site. My banner is gray with black and white text with a shopping cart and telephone contact information in the right-hand corner. It was important to me to use colors that would not show favoritism toward any particular sorority since sororities are territorial that way. I didn’t want to shun potential business with bad color choices. Plus, by using those three colors in my banner and by leaving the main body area white, I was able to draw attention to the colors in the products themselves instead of distracting from them. The white provided a clean slate upon which the products could stand out.

A good example of contrast, too, is the larger picture on the home page of the featured item and the smaller pictures below of the new arrivals. I wanted people to know that the featured item was being highlighted, but the new items were also important enough to be featured on the home page.

Repetition

Although the original site had repetition in most of its design, I wanted more. So, again, I used the same colors on all the pages to enhance the unity of the site. I also used the same two fonts on all pages: Corbel for the majority of the text and Edwardian Script for the word “company” in the banner. The section headings are larger and bolded, and the product categories and text are smaller and unbolded. Yes, the font sizes and characteristics are similar, so that’s why I’m considering this design choice as repetition instead of contrast.

It was also important to me to keep most of the product pictures the same size to maintain continuity and order.

Alignment

As always, alignment is the most important design element to me. I think alignment is what makes or breaks a professional design. The original website has a couple of alignment issues I think could be improved. First, the site utilizes various alignments that could be streamlined. Then, the main menu for the site is located in the top right-hand corner of some of the pages. I thought this was a bad choice because, as we’ve discussed, American culture is accustomed to reading or viewing things from left to right. The menu seems out of place in its current location.

To address these issues, I went with mostly a left-aligned website. The title in the banner is located in the upper left-hand corner, but the words are aligned together on the right side. This offered a little contrast to the rest of the site. Next, I arranged the site’s main menu across the top of the site underneath the banner. No matter what page a user is on, she can navigate through the site easily using the main menu. I guess you could say that I went with a center-alignment on the main menu, but it was the best place for the menu in order to make it accessible all the time.

The left-hand side of each page also includes an upcoming events section. Because this company manufactures products and sells to distributors, representatives attend various shows throughout the year. This area is a good place to advertise these events to make sure people catch the company when at shows.

Proximity

To me, proximity and alignment go hand-in-hand. Obviously, the name of the company (and site) is important for people to know who they are doing business with. Something I noticed about the existing site was that it really didn’t say what the company did. What do they do? Who do they sell to? You really didn’t know the answers to these questions unless you specifically went to the website. However, if you just stumbled across it, you might be uncertain that the company offered what you needed. I wanted to make sure people knew they were on the right site from the beginning, so that’s why I incorporated a slogan into the banner. The slogan lends well to the company name and serves to brand what the company does.

I boxed the main menu into a black, decorative divider to offset it from the rest of the site. The links for the pages on the main menu were equally spaced to individualize them. I did the same thing with the bottom banner with the basic company contact information: address, phone number, and link for terms and conditions.

Likewise, the submenu and upcoming events sections are set off to the left side to show that they are completely different from the products being offered. I used vertical and horizontal eyelines to separate all the sections as well as actual divider lines between sections. However, I kept the descriptive text for each product top-aligned and close to its corresponding picture to show a connection between the text and the picture. In this sense, the images serve as information graphics in that they provide a visual representation of products available. (These products are typically personalized with a sorority’s letters, so they could also be considered promotional. For the purposes of this website redesign, the images are more informational than promotional.)



Perception



As I mentioned in opening this blog posting, the existing site seemed like it catered to young girls rather than college-age women. My intention for the redesign was to grow-up the site so that it fit the demographic that the company sells to. The site I designed became sophisticated yet remained subtle so that the products sell themselves.



Culture



The intent of the site is to sell promotional items to college sororities. College women comprise the culture of the company and the site, so it’s important that the site represents them well. The existing site fell short on that with its mismatched colors and juvenile appearance.



Rhetoric



Again, the purpose of the site is to sell products. It’s like a store where you select your items and put them in your shopping cart. Therefore, since the site is asking for money, professionalism is expected on the part of the user, which would appeal to the user’s ethos. The user expects and deserves to feel safe when making financial transactions, so including a privacy and security policy on the site (which both the existing and redesigned do) helps lend to the site’s credibility.

The existing site sometimes didn’t make sense in its product order. For example, on the retail web store page, the product categories on the left-hand side are listed in alphabetical order, which puts miscellaneous items in the middle of the list. In my mind, the word “miscellaneous” means everything left over. It didn’t make sense to me to put this category in the middle of a list, so I reordered the categories on my redesign, hoping to appeal to users’ logos with a more practical product order.

Obviously, properly displaying the products could appeal to viewers’ pathos and make them want to buy the products. By decreasing the number of colors used to design the entire site, I allowed the viewers to focus on the products themselves. Potential buyers may find the better layout and overall cohesion more appealing.


Conclusion
Obviously, I didn’t design every page of the site. The idea is that the top and bottom banners would remain the same throughout the site, and the rest of the information would change only slightly. Therefore, there really wasn’t a need to redesign the entire site just to reiterate the same points.

I think this is a good stepping stone design for the site in that it matures the company’s image for its intended audience. However, I could see the company’s web designer and developer creating a site that is even more robust with features but that still maintains a unified identity and good design principles.