Project Fuji: Scaling the Summit of Responsive Web Design

In 2017,  it’s no secret that e-commerce is a multi-device shopping journey. According to Digital Commerce 360, the average US adult owns 2.9 devices and nearly 40 percent of all transactions occur across multiple devices. Contemporary consumers expect a fluid shopping experience on any device and websites today need to to be responsive – functioning identically on desktop, mobile, and tablet. In order to meet those those expectations, the SUPPLY.com UX team recently responded and launched Project Fuji – the code name for the new, responsive SUPPLY.com site.

A project years in the making, overhauling the entire look, feel, and performance of a site with 350,000+ pages was not a simple flip of a switch. The brand new SUPPLY.com took extensive planning, cohesive collaboration, and flawless execution. Just like any hefty creative undertaking, the team experienced delays, roadblocks, and big wins throughout the process. Following launch day, we sat down with the three amigos from the UX team to learn about the reasons for the face lift, the redesign process, and the lessons learned.

Where do you begin?

When the organization made the decision to go live with redesigning the site, Justin, Matt, and Mike had a blank whiteboard and a seemingly endless tunnel of obstacles in front of them. When presented with such a mammoth challenge, where do you begin? “Our customers were at the core of our planning,” explained Justin Jackson, Senior Designer (check out our previous piece on Justin here). “We started by asking ourselves, ‘Who is this website for, and what do they hope to get out of it?'”

Director of UX, Matt Hobbs, furthered this sentiment by saying, “We already had a product that took care of thousands of people every day. It was our job to complement the strengths of the existing site with updates and features to make it even stronger.  We applied a lot of best practices and heuristics we observed from around the Internet.” Justin added, “Banking sites were influential because they’re super functional and service-based.”

marketing and user experience team brainstorm on whiteboard

Mike (left), Matt (center), & Justin brainstorming at the whiteboard – where it all began

senior graphic designer plots out new website

“The new site is the perfect combination of our pre-existing efficiencies and new enhancements to meet the new e-commerce expectations and standards.”

-Matt Hobbs, Director of UX

“The new site is the perfect combination of our pre-existing efficiencies and new enhancements to meet the new e-commerce expectations and standards. We interviewed our customers, explored competitors’ sites and collaborated with other internal teams. It was important that we built a well-informed product that would truly connect with our customers,” continued Hobbs.  “That’s an ultimate mirror. It doesn’t matter what we think of what we made, it’s what our customers think of it. That’s the real truth.”

“If we can just wait” – Challenges & Roadblocks

With only one designer and one developer, time was certainly a factor. As the project kicked off in early 2016, Justin, Matt, and Mike began an everyday balancing act. “We had to run the business while implementing a large new project that, after six months, had yet to show any impact to the business,” recalled Hobbs. “That’s the hard part. The company’s growing rapidly and we have to keep nurturing this machine as it grows.”

“As the developer, that was tough. We would have meetings about changes, and then Justin would have to design for two different places – the old site and the new. It was difficult and often frustrating,” explained Front-End Developer, Mike Owens, aka MOwens. “We knew we had this big thing coming and wanted to say, ‘If we can just wait…’ But, no, we can’t wait because this is impacting the business as it stands right now.” Justin added, “We couldn’t stop fueling the engine that was already running to go work on the new tires. Now that the new site is launched, it’s a big relief – we only have to maintain one thing.”

But, even with the constant roadblocks, and the occasional out-of-left-field idea from a man affectionately known as Onions, the team persevered thanks to the help of music. Justin listened to instrumental, progressive metal, also known as Djent. Matt, on the other hand, had a lot of Run the Jewelz and Vulfpeck in rotation. For Mike, the captain who would fly the rocket ship at takeoff, it was a wide range of sounds. “Typically, I was listening to something with no lyrics, but it depends on what I need at that moment,” he recalled. “At 2:00pm, when I was feeling like a nap, I’d put on trap music (EDM) to get me pumped up. But, on launch day, it was going to be Yo-Yo Ma to ease my mind.”

“If you think you’re doing enough, do more” – Communication

Once the team made the decision to go live, there was no turning back. But, even if you’ve defined the why, the who, and are ready to reveal your baby to the masses, how do you communicate a redesign such as this? “Patiently and frequently,” maintained Jackson. “Over communication is better than moderate communication. If you think you’re doing enough, do more. From the internal standpoint, since this has been a long time in the making, the importance of letting relevant departments know along the way was super important. The name of the game was, ‘No Surprises.'”

branding and mockups for new project at supply.com

External (above) & internal (below) communication around Project Fuji

new website project is announced at company

“Constant communication from our team was something that I was very proud of – I think it’s a testament to how prepared everyone was. If we made something great and didn’t do a good job of getting people excited about it, it’s worthless,” asserted Hobbs. “Justin put a lot of effort into messaging that we were going live to the rest of the company and we were fortunate to have input from other departments as we designed it. It wasn’t just awareness on their part; it was action. People being aware is one thing, but people having a hand in it is how they become truly aware.”

“We Shall Fight in the Shade” – Launch Day

After years of planning and months of execution, the big day was rapidly approaching. But, with launch day around the corner, what was the team vibe? “We had tested it rigorously, which allowed me to combat any fear our doubt. We had tons of data, but I was also like, ‘Why am I worried still? You would take a drug that has been tested this many times to make you feel better,'” recalled Hobbs. “The reality was that we had spent a lot of time thinking about the site, working on it, and living with it. It had become an extension of our team’s psyche and emotion. It was our baby in a very emotional way.”

When the team gathered on March 1st, there was a mix of excitement and nervousness. “That was a whirlwind if there ever was one. The first four hours went by so fast because there was so much happening all at once,” reminisced Jackson. “You know that scene from 300 when there’s that barrage of arrows that blocks out the sun? That’s how it felt that morning – so much was flying at us from all directions. But, we were fueled by so much coffee and I think we stuck the landing.”

“I’ve never invested so much into anything to make sure it works.”

-Mike Owens, Front-End Developer

“I’ve been here a long time – I was a part of the team that published the original National Builder Supply site. This was the most stressed, anxious, and excited I’ve ever been,” affirmed Owens. “That’s the problem with having one developer, one designer, and one lead is that if something happens, it rests solely on you. But, the knowledge that we if we could move past this, as a company, as a website, as a team, we are in such a better place. I’ve never invested so much into anything to make sure it works.”

MOwens – the Front-End Mastermind

Mike got into front-end development by chance when working as a video editor for a small video house in Atlanta. “We had a company that we did a video for, and they liked the video so much, they wanted us to rebrand them. We had to build them a website and I found that front-end coding is something I not only understand, but I’m also pretty good at it,” said MOwens. “I think I have the ability to see the whole picture. I know what can be done to make a designer’s dreams come true, but I can also say, ‘Yeah, that’s just not possible,’ and say it with relative assurance.”

“That’s what makes Mike brilliant. He’s not just some heads-down developer who struggles to explain why something matters. He can swap seamlessly from discussing project intent, to technical functionality, and then to look and feel,” boasted Hobbs. “That’s a rare and precious aptitude among developers. With him being a buck stops here guy, a project like this would only work with someone like Mike who can speak three disciplines fluently.”

developer is hard at work at desk with coffee

In the lab with front-end legend, Mike Owens (above), & his desk on launch day (below)

developer works to launch new website

“Mike’s my dude.”

-Justin Jackson, Senior Designer

“Sitting back-to-back as designer and developer was the best part about it,” Justin celebrated. “I could literally design something on the screen, lean back, and ask Mike, ‘Hey, does this look possible?’ Five minutes later, he would say, ‘Something like this?’ I’d never experienced that before and it made our general teamwork that much more successful by allowing us to speak the same language. Having that confidence in each other was super great – we’d only need to have one conversation about something and we knew it would work. Mike’s my dude.”

That teamwork is what gets Mike up in the morning and pushes him to deliver his best work every single day. “Honestly, more than anything else, it’s the people I work with. Building an e-commerce website that can convert people and make money is just a product to me. I love the design, the process, but without being around the people that I’m around, the grind would’ve been unbearable at times,” said MOwens. “The fact that we get to build it together – I know my strengths and weaknesses are made better because I’m around these guys, and that feels good. We can cut up, have fun, and do some damn good work.”

Having crossed the finish line on one of the largest development projects in company history, Mike has some advice for other development teams looking to undertake a similar project. “At the very beginning, I learned that technology is changing so rapidly all the time. At some point, you have to make a decision with your technology and move forward. Otherwise, you’ll be buried in that decision,” offered MOwens. “When you’re dealing with smaller, individual projects, you can pivot quickly. But, when it’s a huge project, you have to jump in and say, ‘We’re going to use this, this, and this,’ with the knowledge that the next day, that technology is going to be outdated.”

Take the tour at: https://www.supply.com/our-website

Extra, extra read all about it! Here at SUPPLY.com we love being extra – from celebrating company wins to talking through big developments, you can catch up on all of our breaking news here.