Created by Susan Parker (Unlicensed) on Mar 13, 2012
(2/2712, via email and Basecamp)
Hi All,
Thanks again for your insights during our call this morning. Below please find notes on the design, structure, and functionality changes we reviewed during this morning's presentation.
Overview:
  • We made revisions to the four templates presented in the previous round of design (Default state, Refine Search state, Search Results state, Cart state) as well as a newly designed 5th template (the User Profile Page).
  • Our main objectives in the design revisions were to create a simple, intuitive, and seamless experience for users, as well as communicate that Laddawn is here to brighten customers' days.
Global Changes:
  • We have revised the header area of the site to be devoted to information either about Laddawn or pertaining to the user. On the left-hand side, we prominently feature the Laddawn logo along with contact information and hours. We feel that including the contact info in this location will be familiar to many users, as it is commonly used across many websites, and users will be able to quickly and easily access Laddawn's information when they need it. On the right-hand side we pulled the user's personal account information out of the Message Thread, in order to give it a distinct and easily accessible placement on the site.
  • We have also made the user's avatar a more prominent design element on the page. This is meant to communicate the fact that everything that Chris sees on the page is unique to him, and catered to create the best experience to meet his needs as a customer.
  • For the main column on the left side of the page, we have kept the tab navigation system used in the previous round of design. We feel that this system works very well and is extremely clear, but we did incorporate a few additional recommendations for the design listed below:- We recommend using color to differentiate the navigation tabs among two groups: one that is for searching (which includes the search tab, where you can shop for new products) and one that is for purchasing (which includes the cart tab, the past orders tab, the tagged items tab, and the saved carts tab). We feel that this grouping makes the purpose of each tab immediately clear to users, and allows them to easily choose between shopping or managing what they order.- We also recommend using value to indicate active and inactive states site-wide. We have incorporated this into the main nav tabs: when a tab is selected, it is darker and more saturated in color, but when it is unselected, it is lighter and less saturated. We feel that this value treatment will not only make the site's functionality clearer to users, but it will also allow for the unselected items to visually sit back and become less prominent, so we have less elements competing for our attention throughout the site.
  • We included the recommendations module within the default state, and also when any of the main navigation tabs are selected. We feel that the placement, content, and structure of this module work very well, and will be useful to users. We did, however, change the color of this module to the orange that was already being used in the site design. Using this orange will a) lighten up the appearance of this module and make it visually less competitive with design elements in the main navigation; b) simplify the color palate on the site overall by repeating a color that already exists on the site, and; c) will visually tie-in to the stroke treatment on the user's avatar. Our plan is to use this orange semantically in order to call out any info that is directly pertinent to the user.
  • We made changes to the Message Thread to make the relationship between posts clearer, and also to make the module sit-back in relationship to other design elements on the page. The changes we made include:- We adopted a unified treatment for system updates, consolidating the visual options for posts into three types: a) posts with orange type for posts within the user's organization b) posts with red type for users from Laddawn, and c) posts with reversed, darker backgrounds to indicate automatic updates (such as the shipping notification and the charity update shown in the designs). We feel that this change will make posts easier to identify right away, and will not compete visually with the left-hand main column.- We also revised the user avatar treatments within the Message Thread. We made the photos bigger to let more of the users' personalities show through, we changed the photos to color instead of b+w to give an overall warmer and friendlier appearance, and we simplified the stroke detail treatment around the perimeter of each photo, to avoid calling unnecessary attention to these elements.
  • We kept the Live Chat tab as an element that will be anchored to the users' browser, and plan to have a chat window pop-up once the tab is clicked. As we mentioned in our last email, examples of similar live-chat tabs can be found at http://www.rackspace.com/ or http://www.vee24.com/.
  • We also added a design detail to help reinforce the Laddawn brand – we eliminated one rounded corner from the lower-right of each rounded rectangle, to mimic the design of the Laddawn logo. Since this is a design element unique to the Laddawn logo, and feel that these module shapes are a good opportunity to give the design its own distinct look and feel.
Dashboard Default state (slide A):
  • This state shows what Chris, the user, would see when he first logs in, before he has searched for a new product, or opened his cart.
Refine Search state (slide B):
  • The refine search state appears after an item has been selected from the Description drop-down menu in the primary search module. We did not make changes to the layout and content of this module as we felt it worked very well, but we did incorporate the corner detailing and other elements from the revised design into this page.
Search Results state (slide C):
  • This state shows the results for a search input listed in a table below the main search tab.
  • We increased the width of the main page elements by 10px in order to utilize the full 960px grid width. This change allowed for more room to incorporate the tag and share icons in the right-hand column in both the Search Results and Cart listings.
  • We removed the "teardrop" details from the column headers on this page to simplify the designs, making the shapes rounded rectangles.
  • We used the same value treatment as in the main nav tabs to indicate active/inactive states among the column headers. In this example, the "Description" column is selected, indicating that the results are sorted in alpha order by description. We feel that this change will allow the unselected tabs to be a less prominent part of the design, and will give a clearer visual hierarchy to the site as a whole.
  • We also use color to indicate rollover or selected states among the "share" and "tag" icons in the right-hand column. We recommend treating these icons in gray by default, and changing them to display in color for their rollover or selected states. We have examples of selected "tag" icons in the design – in other words, any tag that displays in color has been marked and will appear in the user's list of tagged items.
Cart (slide D):
  • The selected treatment for a "purchasing" group tab can be seen on this page, as the Cart tab has changed to a darker color to indicate that it's been selected. The now unselected Search tab has been changed to a lighter color to show that it is inactive.
  • We have applied the same value system used in the column headers and "tag"/"share" icons on the Search Results page, and, also as before, made the same change to remove the detail from the column header shapes.
  • We refined the Quick Add placement to keep it as a part of the checkout unit, but used color to visually separate it from the "totals" column. We kept it on the left side of the checkout module, indicating that any activity in the Quick Add column will affect your totals in the right-hand column, and therefore will affect your ultimate checkout results.
User Profile Page (slide E):
  • This page loads when the user clicks the "My Account" button in the upper-right hand corner of the site.
  • The main tab navigation still appears on this page, but has reverted to the default state, where the search tab is open but no search refinements have been made.
  • Again, we are using the orange color treatment to emphasize that this is content directly pertinent to the user.
  • We are also using value to indicate the active/inactive buttons along the top of the user information fields (profile, password, my organization, etc).
Please let us know if you have any questions about the revised designs or functionality on the site, or if there is any information we've missed within the notes above.
Best,
Liz