Rebuild I | Rebuild II | Rebuild III
Users expressed difficulty in navigating the site. The interface was very text heavy and used words in places where good design could have communicated the same ideas. This gave the user too many paths to follow and created a scenario where our users were abandoning the site before adding products to the cart.
I worked with Marketing to come up with ideas about how we could simplify the user experience and provide a clearer path to the product. When the design was finalized and composite images created, I translated the layout into live pages.
On the home page, the color block used for the menu bar makes the pages visually top heavy. This draws the eye upward to the navigation but also makes the user pass by a lot of the other content on the page. This line of thinking was held up by the analytic hooks embedded in the page. The click target for the main hero image is small compared to the available page real estate. On the rest of the page, there is a total of 14 other links. Having options is often seen as a good thing; too many options makes an interface overwhelming. The category page uses large amounts of text embedded in images preventing any crawling or parsing of this information. In an ideal world, I wanted to completely revamp these pages to use live text, but GSI’s proprietary CMS would not allow it. Moving on to the product grid, there are none of the ways users are fast becoming used to shopping. I wear a size 13 and like the color Green. How do I access those shoes from this page?
Holga is a 42 year old mother of two who discovered swimming for fitness. She has access to a pool through her job in downtown Los Angeles. Her job requires a lot of time, but she finds time to swim when she can and is starting to really see results in her endurance. Holga likes to look good on the pool deck. Her favorite suit is conservative and she might purchase a new one every season.
Kevin is 26 years old, and his life revolves around the water. He swam in college, played water polo and surfs regularly. He is very active and enjoys being outside more than in. He wears a brief or dragsuit in the pool and wears rash guards at the beach. With the amount of salt and chlorine his suits get exposed to, Kevin will replace his suits on a monthly basis.
The site navigation is available but not overbearing on the page. The homepage now has space for infinite content spots but now they are prioritized in a slider built into the hero page spot. As time passes, campaign images can be replaced with newer content while still retaining access to previous campaigns. We reduced the linked spots down to 5 at a time. This really focused the users towards the most browsed areas which allowed them to find product faster. Text was reduced on the category pages and the decision was made to reduce the amount of links as well. “Shop by Sport” was replaced with “Shop by Activity.” From user testing we found that people who are weekend or occasional swimmers may not click on those links because they don’t identify as people who do sports. We also made the decision to bundle product into outfits that showed users what worked well together, which helped to sell groups of products instead of individual items.
Both of our users felt that there was a marked improvement over the original site. It was a lot easier to tell where to go and how to find the products they were looking for. Both users appreciated the changes made to the homepage to simplify how many choices they were faced with on opening the site in their browsers.
After conversing with GSI to find the possibilities of adding additional search, page, and content functionality to the site, we found their platform was severely lacking. All site changes had to be created locally, and then sent to their team to implement. For large scale template or site changes, the surcharge for their assistance was cost prohibitive. We were also dependent on their timeline. For revenue driving or analytics tracking changes, where every day lost meant lost revenue, this was unacceptable. Our team needed more control over the site. We made the decision to migrate from GSI to IBM WebSphere. Because of the construction of the contract, we were unable to exit immediately. A timeline was set for site development based on the contract end date.
I was tasked with coming up with the comfortable middle between the future fully functional designs and our existing site. Working with the designers in Marketing, we decided to use the new fonts, color palette and call out some of the new dynamic functionality that was coming in order to get the users accustomed to the idea.
We did not do user testing for these changes based on the proximity of the coming re-platform. The new site would go through full UAT. The resulting look of the site was more modern, felt cleaner and saw a slight rise in revenue compared to the same time in previous years. We eliminated any other factors that might influence the bump in sales and after talking to Customer Service found that users were visiting the site, seeing the new look and were becoming re-invigorated to check the new product.
Moving to a new platform provided a really good opportunity to drill down through our site in a granular fashion to re-examine every feature and design decision we made in the past. With the ability to build anything we needed to, it was time to think about what it was that we needed. The nature of e-commerce put us in constant communication with our customers. This gave us a near endless supply of user suggestions and site feedback that we could use to augment our experience on the technical side.
I workshopped possible site features and helped to get to the final site functionality. Out of the two front end developers, I was responsible for building all mobile templates, implementing all ‘Key Features’ on Desktop, building all content product pages for desktop, implementing desktop navigation, creating and implementing the store locator, and assisted in completing the Quick Shop functionality, email list interstitial, and global desktop styles.
Lila is a 29 year old who works in Sports Marketing. She was born in France but has lived in the United States for almost 7 years. She enjoys walking her dog and working out. Lila swims regularly to stay in shape. She swam competitively all through school and even made it to the Olympics in 2008 as part of the French Synchronized Swimming Team. She hates shopping online but likes the fact that she can get products to come straight to her house.
Donna is a 45 year old stay-at-home mom. Her main priorities are reading, going over to friends’ houses to chat and going to as many barbecues as possible within the year. She doesn’t swim but does buy suits for her children every summer. She’s not very technically savvy and needs shopping online to be as straight-forward as possible. She finds it hard to tell how apparel purchased online will fit and thinks an easy returns process is key.
We used two user scenarios for product purchase. In the first, each user was instructed to find and add a pair of Short Blade Training Fins to their cart. They were also given test credit cards and instructed to follow the purchase stream all the way to order confirmation. In the second, each user was asked to browse the site for a single item that they would add to the cart and follow through the entire purchase stream once again, to order confirmation.
In the first scenario, Lila went straight to the search bar and typed in Training Fins. This took her to a search page which showed Short Blade Training Fins as one of the options. She was able to click on them, add them to cart and purchase successfully. In checkout, Lila mistyped the credit card info and had to go back when the number was rejected. There were 2 pages between where she was and where she needed to go to change the info. She commented that this made mistakes a lot of work. Donna clicked on the Women category first. She clicked on Footwear, hoping to find them there but was unsuccessful. Only then did she try typing Short Blade Training Fins into the search bar. This took her to the search page showing the required fins, and she was able to check out successfully. She commented that there were a lot of clicks between start and finish.
In the second scenario, both users visited the Women Category first. This makes sense. If you are shopping for yourself, you don’t want to see product that you cannot wear. On getting to the Women category, though, you see a page advertising Elite Competition, Women’s Performance, Women’s Apparel and Women’s Fitness. To Lila, these titles were not relevant. She no longer competes and just wanted to find a two piece suit but was not shown where they were after the first click. She wished there was a way to just look for a blue two-piece. She was interested in the new Arrivals advertised at the bottom of the page but all of the suits were one-pieces. Lila ended up going to the search and typing in “two-piece swimsuits.” This returned no results. She then typed in “two-piece” and this returned a relevant search page. This allowed her to find a suit she was satisfied with. Donna was interested in Women’s Apparel and followed that link. She clicked on the Unisex baseball tee. There was only a medium available in the select a size dropdown. She wondered whether Speedo only made that size or if they were just out of the other sizes. There was no indication on the page which was the case. After returning to the previous page Donna selected a tee and successfully checked out. Asked why neither used the left navigation once on the Women category page, each user said they did read the left navigation but none of the titles seemed to apply to what they were looking for.
The content only side of SpeedoUSA.com was re-branded from Pace Club to Speedo Fit. By simplifying and unifying the navigation between those the main shopping site and the content-only site, we wanted to create a global system to integrate ecommerce.
A drop down menu would make it easier and faster for users to find what they are looking for, getting them to product more quickly. The drop down navigation could be visual or textual. For instance, when users shopped by activity, it would be helpful to see an image for Active Recreation.
The addition of a minicart would allow the users to see the cart contents and pricing without clicking into the cart page.
Product grid Quick View would offer the option to view info usually reserved for the product page without leaving the product grid. This would let users browse multiple products quickly and easily.
Making the grid fluid will allow the site layout and image sizes to adjust based on the user’s display size so content is displayed optimally.
For tablet, the new desktop site design should be leveraged with the addition of touch-based adjustments such as replacing rollover states with press states and allowing swipe gestures for carousels and galleries.
Size availability indicators should be added to product pages.
Remove all Flash. All site content should be visible to non-Flash users e.g. iOS devices.
Remove all graphical fonts and implement web fonts.
Users should be able to only see product that fits their criteria. Show these product filtering options as soon as the user leaves top level pages. The filter should dynamically update based on the items shown. For example, if a certain color or size is not available, then it shouldn’t be available as a filter option.While the existing site has options to sort product by price, we should add other options such as New, Best Sellers and Top Rated.
Add inline zoom to product pages so the users aren’t limited to a small popup window.
Show how products look on models. Users don’t have the ability to try on or feel the product. Seeing the product worn could make the user more comfortable with their choice and therefore more likely to purchase.
Allow users to view product not only digitally but in-store.
Site search should not only be prominent on the page, but also be smart enough to dynamically suggest results users may be looking for. Implementing semantic search would allow users to enter specific data and still get relevant results by understanding the intent and context of the search.
The Pace Club section of the site contains a lot of information users do not see because most solely view product. To teach users about Speedo technology and product, we should create content directly on the relevant product page. Whether it’s calling out how long a suit will last, or how to properly use a piece of equipment, it could help consumers with their purchasing decisions as well as guide them to Pace Club for more relevant content.
During the site build and up until site launch, we asked individuals outside of our team for input on how the experience was compared to where we started. The final month before launch was for official UAT. We were developing the final release in parallel so any bugs that arose during UAT could be immediately addressed. Feedback on the new site from the users we used for initial testing was positive. Both liked the full bleed brand images and thought the feel of the site provided a more immersive experience because it filled more of the browser window. We once again did the testing scenarios and found that on average, it took fewer clicks to get to product and checked out. The new product filters were a certified hit. Both took a lot of time putting in different colors and looking at what products displayed.
