The quickest way to eat an elephant is one bite at a time.


I worked for Ferguson as the Lead Mobile UX Designer from 2012-14. During my time here my primary focus was to help create their first mobile website. At the time the companies mobile traffic was growing quickly, while delivering their customers a desktop experience. We had to move fast, efficent.

My Role

Mobile User Expereince Design

Timeframe

20 months

Platforms

Mobile E-Commerce Site | B2B, B2C

The Challenges

Business challenge

Ferguson has been around over 60 years, so we didn’t need to find their customer or build new personas. Rather we had the task of learning how the customers used smartphones and more importantly how could we use this technology to help them solve their needs quicker. At the time none of our competitors had solutions we could study so we had to start from the ground up.
  • We had 2 major challenges that required unique design thinking.
  • 1. How do we navigate over 500,000 products on the mobile device?
  • 2. How do we get all of our functionality from the desktop application to a phone intuitively?

Personal Challenge

I was hired at Ferguson to solve this very unique design challenge. However I was still new in the company as well as new to how a buisness to business(B2B) company interacted with its customers. I needed to learn not just the nature of B2B I needed to know the culture of Ferguson to be successful.
Table with flowers and a cup of coffee

User Research

A much needed trip

Knowing what was needed I requested that I take a branch visit and see how the business is done day to day. This lead to an opportunity to spend a week in a local office. I spent time pulling orders, conversating with customers, and creating orders with the inside sales team.

Major design takeaways from my experience

  • Our customers were mostly blue collar men.
  • Most didn’t have smartphones.
  • They had great relationships with the local sales associates.
  • They spent most of their time outside in the daylight.
  • The used our website to research more than purchase.
  • They had phones with large cases for protection from the elements.

The Approach

Our business didn't change.

We weren’t creating a site from scratch so the business approach was more about how do we recreate this large custom e-commerce application to mobile platform without limiting features. So we spent time prioritizing features and creating user stories that were essential for an (Minimal Viable Product) MVP.
My trip empowered me with perspective to speak for a user that would never be present in our team meetings. This gave me and my team a refernce for all design suggestions and implementation moving forward.
A book on a table

Solution

Applying what I learned to the design.

Here are a few things that directly effected the design approach.
  • We wanted to keep a simple UI (User Interface), that could work with devices other than smartphones.
  • We needed high contrasting colors to help with visibility in sunghlight.
  • We would need large icons to easily recognize and navigate our huge inventory.
  • We wanted to make the site feel personalized to reflect our local sales teams hospitality.
  • We didn’t want our customer to feel like we were replacing the branch but adding a tool.
  • We had to make sure it was easy and convienent to search.

Designing Fast

Being responsible for the wire-framing, designing and prototyping our deliverables I didn’t have the time to do each of them with approval needed within our 2 week sprint cycle. So I came up with a style sheet that incorporated all the things learned from our customer testing. The sheet displayed all of our basic UI components. We than began to use this to make high-fidelity mocks rather than wireframes.

Style Guides

I also created style guides for every sprint introducing the new features. The style guide displayed user stories, desired functionality, colors, fonts, buttons, pixel sizes, and padding requirements. This replaced the need for prototyping saving tons of time in the process.
This project was a massive undertaking. Creating design guides helped us maintain consistancy and understanding of all the UX decisions we had to make. This would help the team create hundreds of designs that allowed the business to transfer its 1 million a day worth of sales to the new mobile site on schedule.
A book on a table

Project fun facts

Check out the feature video

Reflection

My time working on this project at Ferguson taught me to not be afraid to make tough decisions based on your customer needs, even if it isn’t the norm. I also discovered that a UX Professional should nearly ever speak from personal preference, but rather lean on the research gained from customer perspective. Lastly, I learned to choose your battles wisely, large projects have a great amount of departmental stakeholders. Treat them all like customers, and the business’s customers will thank you all!

More Case Studies

A skateboard