Surplus Record
Redesigning North America's leading industrial machinery marketplace.
My Task

Over three weeks, redesign the user interface of an online marketplace for used and surplus machinery.
Platform

Desktop.
Deliverables

Visual competitive analysis, style tiles, high-fidelity mockups, interactive prototype, style guide.
Tools

Sketch, InVision, Google suite.
The challenge

Surplus Record provide an online platform which connects buyers and dealers of used and surplus industrial equipment — ranging from machine tools, generators, engines and much more. With over 70,000 listings from over 1100 dealers it is widely known as the "go-to" place in North America in the industry. They've been providing this service since 1924 in the form of monthly paper publications, and successfully made the leap to the online realm in the mid 1990's.

While their initial move to digital was considered revolutionary— being one of the first of its kind in the early mainstream internet days — they haven't released a major update to their front-end interface since. As time passes the outdated aesthetic has become more and more apparent, resulting in dealers feeling uneasy about having themselves associated with it, and newer buyers being hesitant to trust the company.

The overall visual language of the current design is very reminiscent of its early online presence.
With this realisation, Surplus Record came to DESIGNATION seeking guidance on how they could bring their service into the modern age, but without alienating their long-time users who are familiar with the current design and all its quirks.

A UX team were first on the scene. They conducted thorough research which included interviewing long-time, current and potential new users of the service, analysing the competitive landscape and ultimately producing a set of low-fidelity wireframes for the redesign.
Wireframes for key screens from the UX phase
My task was to pick up from where the UX team left of, using their wireframes as a basis to apply a visual design language in alignment with the needs of existing and future users, while respecting well-established brand values of the company.

I worked on a team with two other UI Designers, a Creative Director and Project Manager. Over three weeks we adopted an agile workflow based on Google Ventures design sprint to gather requirements, establish visual direction, and create multiple iterations of high-fidelity mockups based directly on user testing results. We worked together to establish requirements, run user testing and conduct research, before ultimately each pitching our own final solution to the client.
Establishing the requirements
Some quality team bonding time around every designers best friend; the whiteboard.
    By thoroughly analysing UX data, interviewing UX team members and running a strategic kickoff meeting with the client, I was able to establish a clear direction for the UI phase. I distilled all of this down to the following key insights:

        • Place emphasis on giving users a sense of trust when using the application, it should feel like a reputable, professional source.

        • We're still Surplus Record — The aim is to make the site feel modern and new, however be aware that a large portion of traffic comes from legacy users meaning that the overall essence of the existing site must be acknowledged and respected.

        • The search engine is a well optimised, very effective and popular feature of the current site. Give visual prominence to this by creating clear contrast and spacing around it on the homepage.

        • Data density is a huge factor. Given the amount of listings, users often need to scan though a huge volume results to find what they're looking for. Make scanning easy by striking a balance between sufficient spacing, while maximising the amount of data within the viewport at one time.

        • Look for any opportunities to simplify the interface without infringing on content.
        "This is not entertainment or a social event, guys are in a hurry, let's get to the source."
        -Surplus Record CEO
        Refining the concept
          Following our kick-off meeting with the client, it became apparent that some decisions made by the UX team on the Homepage design needed to be revised. This included:

              • Reintroducing the Featured Auctions section which was removed in the final wireframes delivered. Client noted that these are a valuable source of revenue and need to remain in the design.

              • Removing Featured Dealers section from the homepage. In the interest of not favouring some dealers over others, the client requested the removal these sections from final designs.

              In addition to this, I noticed some other discrepancies between links available in the current site and what was present in the wireframe. After unsuccessfully finding sufficient justification in the UX documentation, I felt it necessary to raise with my project manager. This prompted another meeting between my team and the client, which resulted in us doing a full analysis and subsequent sitemap redesign. We utilised a top navigation system based on the five core components of the site; Search, Browse, Sell, Bulletin Board and My Surplus Record (Account).
              Revised site map
              User testing
              A late night user testing session at our co-working space in Chicago
              We created a detailed testing schedule at the beginning the project, allowing one day between each testing day to iterate on designs. Our subjects included current and potential customers of Surplus Record and our goals from the sessions were to:

              • Establish boundaries in terms of users comfort level when it came to diverging away from the existing branding style.

              • Measure the effectiveness of the main navigation updates after sitemap revisions. We did this by setting tasks for the user and observing as they completed them.

              • Gain insights into how the visual language of each design made user feel. We did this by giving them a list of adjectives to choose from when looking though designs, before letting them add any of their own.
              What we discovered
              1
              Stick to variations of green for the main colour palette
              Existing users are very uncomfortable with any designs wildly different from the legacy branding.
              2
              Give more visual hierarchy to the search
              Existing and potential customers both expressed a keen interest in using search over browsing categories.
              3
              Aim to further declutter the homepage
              People come to Surplus Record to find a very specific item and are generally not interested in recently added listings or popular categories. They are often bouncing between other similar sites to find the best deal and want to get to the product as quickly and easily as possible.
              Final mockups - before and after


              Home page
              The face of Surplus Record and arguably one of the most important pieces to get just right. After a number of iterations I settled on the Google-esque design, giving clear prominence to the powerful and popular search feature. I simplified the interface by moving less common links to a clearly organised footer and keeping all navigation in the header in accordance with the redesigned sitemap. I used the darker shade of green to create a more sophisticated, modern feel, without straying too far from familiar branding for legacy users.
              Search Results
              There were some significant content hierarchy and layout issues to be solved on the search results screen. The biggest decision point was how much screen real estate to sacrifice in order to improve scanability. Through thorough guerrilla style testing I came to compromise which does a good job of satisfying both needs.
              Product Categories
              Similarly to the search results page, creating an intentional and clear visual hierarchy was the main challenge for product categories.
              Product Listing
              The existing product listing page lacked structure, organisation and hierarchy. A common theme amongst research participants was that they wanted to see the basic specs of a listing easily and clearly. In order to achieve this I organised General Specs and Dealer Info into separate tabs. The dealer information is only required when user is satisfied that they have found a the right product, so having this information hidden in the initial state makes more sense. On top of this I use basic typography and layout principles to guide the users eye though the information in a logical way.
              Reflections

              After around six months of intense training, reading, studying and practice towards my dream of being a UI designer, Surplus Record was the first client I worked with. I felt extremely fortunate to have the opportunity to apply my skills to make a real difference to an established business.

              The Surplus Record project presented a number of unique challenges. One of the biggest of which was keeping the project focused on visual design when the client struggled to make the distinction between UI and UX phases of work. Due to the tight timeframe, we had to be firm on communicating limitations while making the client feel heard at the same time. When it became apparent that we would have to rework some of the wireframes it affected the schedule quite significantly and meant some very late nights and increased stress levels.

              Another major challenge was understanding the complex and technical domain in which we were designing for. Until this point I had no prior knowledge of large industrial machinery and had to learn quickly. While I didn't need to be an expert, in order to make well informed decisions I needed to gain a reasonable understanding of how the industry operates.

              Throughout the project there was no input from the software development team at Surplus Record, almost all of our communication was exclusively with their (non-technical) CEO. Having no gauge on technical feasibility meant decisions could only be based on business priorities and adhering to best design practises. The lack of this input leaves me with concerns around how the delivered redesign will be implemented in the clients current technical environment.

              Looking back, if I were to start this project again, I would have pushed much harder to have the UX team and Surplus Record technology team present in the kickoff meeting and more involved throughout the project. While we communicated openly and regularly within our design team, I don't feel that we worked collaboratively enough as a wider team of stakeholders.

              Despite the many challenges, working with a company with such a long history and prestige in their industry was an honour and a privilege. Most importantly, I found that even through the high stress levels, frustrating scope changes and long hours of work, my love for digital product design remained completely in tact.

              Glen not only suggested creative and productive ideas, he produced specific web pages that will be extremely beneficial to our business. I am most impressed with his work by first understanding our industry and business. With this skill he was able to design web pages relevant to the future success of our business.
              Tom Scanlan, CEO of Surplus Record.
              Made on
              Tilda