A website redesign for an online marketplace for used and pre-owned industrial machinery and equipment. Surplus Record was established in 1924 as one of the first machine and equipment monthly print directories. 

Timeline

3 x 1 week sprints 

Role

Product Designer 


The Challenge  

Surplus Record is the leading marketplace for used and pre-owned industrial machinery and equipment, with over 70,000 dealer listings. Based here in Chicago, this century old company worked with a previous DESIGNATION UX team to successfully build out and update their 10 year old website. Our team of three designers, were challenged with redesigning the company's website. The client came to us envisioning a website that would feel professional for new and veteran users. Our job was to make sure that the website redesign was crafted for users to visibly see and feel when entering the site.

  The current    Surplus Record    website the website that hasn't received a major front-end update in a decade.

The current Surplus Record website the website that hasn't received a major front-end update in a decade.

Initial conversations with the client led us to their ideal redesign goals:

  • Make the homepage responsive and simple

  • Organize the category page with clean sorting fields and capabilities

  • Make sure to keep paid ads visible on main page, as they are the only changing elements on the homepage day to day  

This project was multifaceted and required a lot of education of the Surplus Record website itself to fully unravel the design that was necessary for all users. With a tight timeframe to work off of, our team spent the next three weeks delving into the redesign. Over three weeks, I produce a website redesign utilizing the with two rounds of user testing. Tools utilized for this project were Sketch, InVision, and Zeplin.


Design Approach

The UX Wireframes

Previous to our collaboration, Surplus Record worked with a DESIGNATION team to learn more about the large machine industry and their online presence. After several rounds of usability testing, the UX team provided the following wireframes:

After meeting with the client to understand what the vision for the website design was, we jumped on a video chat with the UX research team to discuss their key learnings more in depth.

Our conversations led us to an important fact that helped to understand the industry at large. The machinery industry has a trend when it comes to website upkeep, and it was that there was no upkeep at all. Most companies in this space either heavily rely on a catalog or phone orders from legacy customers who have been returning for years. Surplus Record was one of the first on the scene in their industry to have an online presence, yet their website hadn’t been updated since inception. Experienced users learned and memorized all of the backend tricks to get past the confusing and limited functionality of the site.

We took a closer look at the monthly printed directory Surplus religiously mailed out. This booklet is compiled with over a couple hundred pages filled with updated listings of used and new machinery.

 

The website is currently organized similarly to the published book, and houses the same information as the printed publication.

The website content is updated on a daily basis, however, the main homepage appears as it has been untouched for the past decade. I saw an opportunity to incorporate nuances of the monthly directory because of the significance it has to existing users.

 

What's out there? 

With background knowledge of the project in my pocket, the team explored a variety of different machinery companies in the space. A few being: Machine Tools, Liberty Machinery Company, and HGR for context.

Most of the websites fell along the lines of looking cluttered or rushed, which spoke to the trend across the industry. The large machinery companies have neglected to evolve when it comes to website content and modernizing their business model. Trust is the foundation of a brand evolution, especially as a modernized version of the brand users are familiar with.

Inspiration came from companies that are currently arranging and organizing searchable information in a successful way. Looking at companies such as Home Depot, Trade Me, and AirBNB helped to understand how dense amount of information is constructed to view as simplistic. We learned that space and color are pivotal to crafting a solution for a challenging information architecture revamp.

 

Guiding Design Principles

After our visual exploration and initial conversations with Surplus record, we crafted three design principles to guide us through the process.

 Get the Job Done

Provide efficient scalable data to all customers, while making sure that utility is first. We will communicate with users through design that is easily scannable.

Honor and Evolve

Surplus Record is a heritage brand that has been around for a century. We need to preserve the credibility by maintaining transparencies and a brand voice. Keeping elements of the brand while constantly evolving towards the future.

Balance Quality and Quantity

Find opportunity to simplify existing content without compromising any of the valuable information. Build trustworthiness with users through simplicity while modernizing the site.

Team whiteboarding session working towards refining our guiding design principles. 


Style Exploration

With the design principles on hand, I set out to craft a few style tiles to determine a style direction that fit the brand. Each direction have hints of Surplus Record that I knew were relevant, yet divergent.

MOODBOARD & STYLE TILES  

S+M Forest GReen.jpg

The client immediately gravitated toward the first forest green style tile, as it aligned with their hope to modernized the brand while still feeling familiar. I explored incorporating a variation of green into this style tile to show that we can keep the heritage of the brand while still modernizing the current brand. This style was the best received among the design team, as the client felt this was the most aligned with his current brand. 

As for the second teal, the client enjoyed the colors but felt the color palette was too cool and trendy for a brand that is selling large machinery. Aside from the teal, we focused on the search bar in this style tile being too secondary and small. It was mentioned that the search bar from style tile 1 and 3 were closest to what the homepage needs. 

S+M Navy.jpg

The client mentioned that the directory laid out in the navy style tile was interesting and worth exploring further. The snippet from the search results page here was a nice indication of digestible content layout, and this was an area to incorporate more white space. The gold search bar color was eligible, however the bar itself was well received. 

 

Moving into the next iteration, I incorporated the color palette of the forest green, while incorporating elements from the navy style tile. Images from the directory seemed to spark an interest with the client, however this would need to be executed mildly. Focusing on the search bar as my focal point, I moved on the narrowing down the scope to figure out screens I should bring to life. 


Narrowing Down the Scope

  Narrowing down what screens I would focus on for high fidelity screens.

Narrowing down what screens I would focus on for high fidelity screens.

We brainstormed around what screens to bring to life from the wireframes the UX research team built out, and what design decisions were necessary to cohesively string together these screens. The main focus of the redesign was to focus on the website flow that most closely surrounded the search feature. This meant being able to build the four main screens to successfully achieve this process: the homepage, search result page, narrow category page, and product page

 

What do the users say? 

We conducted two rounds of user testing during our three-week design process. I wanted to test how efficiently we are implementing our design principles to meet the needs of the user, and also to understand what actions the design evokes the user to take. This feedback guided a variety of improvements to the wireframes and my initial designs.

 

Multiple iterations based on feedback 

This process of user testing lead me to multiple high fidelity iterations.  The first round of user testing was based on the emotional response from current users and how they responded to the initial rebrand. With a website that has been designed the same way for almost a decade, it was a shocking surprised to avid customers. Round two we allowed testers to fully navigate through a successful user flow in order to immerse them in the entire experience of the redesign. Below are the three iterations of the homepage, to give an idea of the iterative process. 

1-3 homepage.jpg
 

Page by page breakdown

 

Homepage

Final Homepage

UX Wireframe

Comp_SR1 Copy 8.jpg

I designed a more balanced landing page and compartmentalized each section of the page to be easily glanceable. Users remembered the search bar after doing a memory test of the three main screens for one minute. The search bar was consecutively mentioned, and a users said it reminded them of a search engine. This homepage iteration incorporated the “since 1924” watermark, which  instantly inclined users to feel the site had heritage and was therefore trustworthy. The find and sell equipment buttons viewed as secondary to the search bar, and were later iterated on for the final product

 

Search Results Page

UX Wireframe

Final Search Results Page

The trickiest page to redesign was the search result page, due to a dense amount of listings that needed to be organized and digestible for users coming to the site to search. I redesigned the page, however there was still a lot of content on the page and wanted the most important information front and center. I divided the search results into more concise drop down tabs to help guess the next step the user was going to take. This page was a matter of balancing the quantity while still providing an uncluttered quality view of listings users are potentially searching for. Icons stood out during user testing, but users continuously asked if the whole row was clickable a feature that was later iterated on.

 

Product Page

Final Product Page

UX Wireframe

Users pointed out almost immediately that the most important information to them was the product information, and should be front and center when arriving to a product page. I designed this page so users could learn the details that were most importance to considering to purchase a piece of machinery. The call to action button waslocated beneath the product image, which felt secondary to the product image.

Final Results  

High Fidelity Screens

After rounds of iterations, I arrived at my final designs. I presented the following screens and InVision prototype to the client:

 

Style Guide 

 

Future Considerations

Although our team had two rounds of user testing, we knew that we could have taken a few extra weeks to hone in on the entire website. There are multiple different flows that a Surplus Record user could take on a given day, and I would have loved the opportunity to explore further. Given additional time, I would have:

  • Redesigning the “My Surplus Record” user flow.

    The limited scope of this UI project has resulted in some areas of Surplus Record being excluded from the redesign. One of these was the “My Surplus Record” workflow. This would be one of the first areas I would advise addressing in the future, primarily for the reason that it is the direct (and one of the first) interface that a prospective dealer may interact with.  

  • Clean up Machine Directory for easier navigation.

The current state of the full Surplus Record directory is not optimized for web navigation or finding items by browsing. The fact that there is a good search capability has reduced the impact of this issue, but it would be very beneficial to have someone analyze and reorganize the data structure in such a way that listings are grouped properly with categories. Once this is achieved it would allow a UI designer to apply to efficiently apply existing design patterns to these screens.

  • Consolidate and define the meaning of the dealer ratings.

Surplus Records is a brand built off of heritage. This brand's well established roots in the machine industry has confirmed their trust and respect as a company, as well as within the relationships they have created with dealers. We recommend that a concise and well defined system is implemented to rate sellers based on factors such as how long they have been with Surplus Record, and the number of items they have sold through Surplus. This will give existing dealers a significant incentive to remain on the SR platform, and is also key for customers who seek reassurance that the dealers they choose to work with have a clean track record.

  • Incorporate a product favorite list feature.

Watch lists were a common feature throughout many of the products we looked at, this enables users to “mark” listings that caught their interest in search results, and then compare them all at one time. We recommend that this is given attention in the future in order to keep Surplus Record in line with the competition.

What did I learn?

This design project was definitely my most difficult to date. Of course with any challenge comes priceless lessons to be learned. Setting aside the subject matter, designing for a decade old company is always a challenge due to the long established brand that users are familiar with. Changing too much can turn off an existing user, so striking a balance and being able to retain the old while recruiting the new is tough. 

Large machinery and the industry at large was all new to me at the beginning of the 3 weeks. After presenting the final round of designs, the client mentioned numerous times how thrilled he was with our knowledge of the clientele and their needs. If anything, I now have faith that I can learn the interworking of any industry and FAST. (Squirrel motor is now a term I frequent to show off my skills.) 

Over the three weeks, I successfully learned the inter workings of a complex website with no prior knowledge of large machinery, while becoming an expert on what users need from the Surplus Record website. The product I delivered to the client truly evolved their century old machinery company, while preserving the heritage and essence of the brand.